常用 HTML Meta 标签大总结

Meta 标签的作用

<meta> 标签定义了 HTML 文档的元数据，这些数据是面向机器的，目的是告诉浏览器如何解析页面、规定搜索引擎的抓取策略、提供社交分享元信息等。

除去大部分浏览器都能识别的属性外，有少部分属性只作用于特定内核的浏览器，考虑到 IE 浏览器已正式退出历史，本文不再收集与 IE 相关的特定属性。

浏览器解析方式

charset：定义文档的字符编码

<meta charset='utf-8' />

renderer：指定内核渲染模式

<meta name="renderer" content="webkit" />

移动端相关

viewport：初始视口定义，优化移动端浏览器展示。

<meta
  name="viewport" content="width=device-width,
  initial-scale=1.0, maximum-scale=1.0,
  user-scalable=no"
/>

width / height：指定视口初始宽度 / 高度
initial-scale：指定页面初始缩放比例
maximum-scale / minimum-scale：允许手动缩放比例的最大值和最小值
user-scalable：是否允许手动缩放

iOS 相关

添加智能 App 广告条：Smart App Banner，作用于 iOS ，官方文档点这里

<meta name="apple-itunes-app" content="app-id=myAppStoreID, app-argument=myURL"/>

启用 WebApp 全屏模式：伪装 app，离线应用。

<meta name="apple-mobile-web-app-capable" content="yes" />

隐藏状态栏 / 设置状态栏颜色：只有在开启 WebApp 全屏模式时才生效。content 的值为 default | black | black-translucent 。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

程序名称：指定一个“应用程序名称”，以便网站可以像 web 应用程序一样使用，当用户在其 web 浏览器中选择“添加到主屏幕”功能时，该名称会显示在移动设备上的应用程序图标下方。

<meta name="apple-mobile-web-app-title" content="app name" />

Android 相关

程序名称：指定“应用程序名称”

<meta name="application-name" content="app name" />

设置状态栏颜色

<meta name="theme-color" content="#4285f4" />

windows 相关

Windows 8 磁贴颜色

<meta name="msapplication-TileColor" content="#fadb14" />

Windows 8 磁贴图标

<meta name="msapplication-TileImage" content="icon-tile.png" />

考虑到多平台的兼容性和一致性，给网站添加图标名称是一个特别琐碎的工作，推荐大家使用 Favicon Generator。

SEO 相关

通用标签

keywords：描述该网页内容的一组关键词

<meta name="keywords" content="your tags" />

description：提供一段有关网页的简短说明，一般为文章的概述，在某些情况下，此说明将用在搜索结果中显示的摘要中。据谷歌称，排名时不考虑这一因素，但它会影响你在搜索结果上的点击率。

如果有不适合放在标题中的关键字，可以添加在此标签中。当用户的搜索包含这些关键字时，命中的关键字会以粗体显示。长度一般不要超 150 字。

<meta name="description" content="150 words" />

author：页面的作者信息

<meta name="author" content="author name" />

robots：规范搜索引擎爬虫的抓取策略

<meta name="robots" content="noindex,nofollow" />

all：默认值，页面将被索引，页面上的链接可以被抓取；
none：与 all 相反，页面不被索引，页面上的链接不被抓取；
index：页面将被索引，会展示在搜索结果中；
noindex：与 index 相反，在搜索结果中不展示此页面，在构建网站时，你可能不想为某些页面添加索引，比如设置页面、内部的搜索页面等；
follow：页面上的链接可以被抓取；
nofollow：与 follow 相反，不抓取此页面上的链接，与 <a rel="nofollow" /> 的效果一致；

Google 搜索引擎特有

<meta name="googlebot" content="noindex,nofollow" />

你有时也会看到 googlebot 标签。大多数情况下，robots 已经够用。googlebot 标签是针对 Google 的。如果您想为 Googlebot 制定单独的规则，并为其他搜索机器人制定通用规则，可以使用此标签。所有指令查这里

<meta name="google" content="nositelinkssearchbox" />

当用户搜索你的网站时，Google 搜索结果有时会显示特定站点的搜索框，以及指向你的网站的其他直接链接。该标签告诉 Google 不要显示站点链接搜索框。

<meta name="google" content="notranslate" />

当谷歌意识到网站内容不是用户可能想要阅读的语言时，谷歌通常会在搜索结果中提供翻译链接。这个标签告诉谷歌，你不希望他们为这个页面提供翻译。

开放图谱协议（The Open Graph protocol）

开放图谱协议的英文全称是 The Open Graph protocol ，简称 OG 协议，最早由 Fackbook 于 2010 年 F8 开发者大会公布的一种网页元信息的标记协议。该协议制定了一套 meta 标签的规范，用来标记网页重要的元信息，比如网页的标题、概述、图片等。

当用户在社交媒体上分享网页时，网站会自动抓取网页的元信息，用卡片的形式呈现出来。相比分享一段单纯丑陋的链接（URL）来说，卡片所呈现的内容更加丰富立体，更有利于信息传播。为网站添加 og 标签可以大幅提高网页在社交媒体上分享时的打开率。

基本元数据：包含四个必须参数，title、type、url、image。

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

可选元数据：作为基本元数据的补充，建议添加。

<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description" 
  content="Sean Connery found fame and fortune as the
           suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />

某些属性可以附加额外的元数据。元数据的指定方式与具有属性和内容的其他元数据相同。

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

目前国外的大多社交媒体网站，比如 Twitter、Pinterest、LinkedIn 等大都支持 OG 协议，同时像 Twitter 也拥有自己的特有标签，作为对 og 标签的补充。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content={TWITTER_USERNAME} />
<meta name="twitter:creator" content={TWITTER_USERNAME} />

文档及调试工具汇总

客观来讲添加 og 标签，并不会提升网页搜索引擎排名，但仍建议使用，便于人们通过社交媒体消息工具上分享你的内容。

HTTP 相关

http-equiv，全称为 http-equivalent，定义 http headers 参数。

Pragma：禁止浏览器从本地缓存中读取页面

<meta http-equiv="Pragma" content="no-cache" />

cache-control：指定缓存机制，作用等同于 http 协议规范中的 cache-control。

<meta http-equiv="cache-control" content="no-cache" />

expires：指定过期时间，作用等同于 http 协议规范中的 expires

<meta http-equiv="expires" content="Sat, 02 Jul 2022 13:48:08 GMT" />

<!-- 组合使用，禁止浏览器缓存 -->
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />

Content-Security-Policy：简称 CSP，CSP 是一种白名单机制，定义当前页面的安全政策，是一种可以有效防范 xss 攻击的手段，详细作用请阅读 Content Security Policy 入门教程

<meta 
  http-equiv="Content-Security-Policy"
  content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:"
/>

refresh：该属性有两种情形，如果 content 属性只是一个整数，则表示页面重新加载的时间间隔。如果 content 属性是一个整数和 url 的组合，表示当前页面 XX 秒后重定向到 url。

<meta http-equiv="refresh" content="300" />
<meta http-equiv="refresh" content="5;url='https://www.google.com'" />

其他

<!-- UC强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 --> 
<meta name="browsermode" content="application">
<!-- QQ应用模式 --> 
<meta name="x5-page-mode" content="app">
<!-- 用百度打开网页可能会对其进行转码（比如贴广告），添加如下meta避免转码-->
<meta http-equiv="Cache-Control" content="no-siteapp" />

以上是对常见 meta 标签的总结，如有遗漏，欢迎留言补充。

本文作者：杨奇的博客

本文链接：https://www.yangqi.show/posts/meta-tag

微信公众号

杨奇的博客