Cheat Sheet速查表
跳转到主要内容

HTML Meta 标签 速查表

本文根据 Devhints / HTML meta tags 翻译。代码示例及版本范围沿用原文。原文标注更新日期：2020-03-20。

Meta 标签

<meta charset='utf-8'>
<!-- title -->
<title>···</title>
<meta property='og:title'  content='···'>
<meta name='twitter:title' content='···'>
<!-- url -->
<link rel='canonical'       href='http://···'>
<meta property='og:url'  content='http://···'>
<meta name='twitter:url' content='http://···'>
<!-- description -->
<meta name='description'         content='···'>
<meta property='og:description'  content='···'>
<meta name='twitter:description' content='···'>
<!-- image -->
<meta property="og:image"  content="http://···">
<meta name="twitter:image" content="http://···">
<!-- ua -->
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<!-- viewport -->
<meta name='viewport' content='width=device-width'>
<meta name='viewport' content='width=1024'>

更多 OpenGraph 相关内容

<meta property='og:site_name' content='···'>
<meta property='og:type' content='website'>
<meta property='fb:app_id' content='···'>
<meta property='fb:admins' content='UID1,UID2'>
<!-- ···unless there's app_id -->
<meta property='og:audio' content='http://···/theme.mp3'>
<meta property='og:video' content='http://···/trailer.swf'>

参见： OpenGraph协议 (developers.facebook.com)

文章的 Open Graph 协议

  • article:published_time
  • article:modified_time
  • article:expiration_time
  • article:author
  • article:section
  • article:tag

仅限 Apple 设备

<meta name='format-detection' content='telephone=no'>

渐进式 Web 应用 (PWA)

添加到主屏幕

<meta name='mobile-web-app-capable' content='yes'>
<meta name='apple-mobile-web-app-capable' content='yes'>
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
<!-- black | black-translucent | default -->

主题颜色

<meta name='theme-color' content='#ff00ff'>

仅限 Android。参见： 主题颜色

清单 (Manifest)

<link rel='manifest' href='/manifest.json'>

仅限 Android。参见： 清单 (Manifest)

图标

<!-- Minimal -->
<link rel='icon' type='image/png' href='favicon@32.png'>
<link rel='icon' sizes='192x192' href='icon@192.png'>
<link rel='apple-touch-icon' href='icon@152.png'>
<meta name='msapplication-square310x310logo' content='icon@310.png'>
<!-- Apple -->
<link rel='apple-touch-icon' href='touch-icon-iphone.png'>
<link rel='apple-touch-icon' sizes='76x76' href='touch-icon-ipad.png'>
<link rel='apple-touch-icon' sizes='120x120' href='touch-icon-iphone-retina.png'>
<link rel='apple-touch-icon' sizes='152x152' href='touch-icon-ipad-retina.png'>
<!-- Microsoft -->
<meta name='msapplication-square70x70logo' content='icon_smalltile.png'>
<meta name='msapplication-square150x150logo' content='icon_mediumtile.png'>
<meta name='msapplication-wide310x150logo' content='icon_widetile.png'>

在 Android 上使用 Chrome（推荐） 192x192。参见： 图标

参考资料

标签: htmlHTML Meta 标签速查表