关于meta标签的一点研究

  • by Weihua

    • meta标签用来描述title、base、link、style、script标签无法描述的页面元信息。
    本文试图通过收集互联网上的一些资料、对WebCore代码的分析，对meta标签的有一个更深入的了解。

    meta标签101

    从HTMLMetaElement.idl的接口描述来看

    //[Reflect=X] attribute TYPE NAME 表示 NAME反映了属性X的内容

interface HTMLMetaElement : HTMLElement {
    [Reflect] attribute DOMString content;
    [Reflect=http_equiv] attribute DOMString httpEquiv;
    [Reflect] attribute DOMString name;
    [Reflect] attribute DOMString scheme;
};

    （scheme属性已经废弃了,忽略它的存在）

    标签可以有content,http-equiv,name,scheme四个属性。

    HTMLMetaElement对应content,httpEquiv,name,scheme四个属性。

    • name属性用来描述文档级别的元数据
    • http-equiv用来描述HTTP相关的文档处理指令
    • content用来描述name和http-equiv的值。

    1. 元数据

    元数据(Metadata)

    <meta name="[application-name|author|description|generator|keywords]" content="...">
    字段名 含义
    application-name Webapp的名称
    author 页面作者
    description 页面描述
    generator 生成页面的软件
    keywords 逗号分隔的页面关键词

    2. 页面处理指令

    页面指令(Pragma directives)用来模拟HTTP header(http-equiv = http equivalent)

    <meta http-equiv="[content-type|content-type|default-style|refresh|set-cookie]" content="...">
    State Keyword
    文档语言 content-language
    文档类型 content-type
    默认样式 default-style
    定时重定向 refresh
    设置cookie set-cookie

    3. 文档字符编码

    文档字符编码，即Charset Encoding

    <meta charset="...">

    问题来了：为什么IDL接口里没有定义charset呢？

    IDL中确实没有定义charset。但是几乎所有浏览器都支持这种写法。所以，HTML5干脆将charset加入了标准之中。（其实HTML5做的一些事情就是将事实标准写入标准中）

    由于早期HTML编写者会省略属性值的引号:

    <META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1>

    浏览器为了兼容这种写法就干脆从属性值中抽取charset的值，就导致下面的写法也是可行的：

    <META charset=ISO-8859-1>

    HTML5标准写法:

    <meta charset="utf-8">

    为了抽取charset，浏览器会在下载的文档中搜索"charset"。但是文档有可能很大，为此浏览器会设定一个最大无条件读取的字节数1024，如果超过这个字节数还没有找到charset则停止查找。

    所以HTML5页面推荐将charset声明放在head最前面，让浏览器尽快确定文档编码：

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
</html>

    对于需要支持HTML5之前浏览器的页面

    <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Title</title>
  </head>
</html>

    搜索引擎相关的属性值

    description中的内容会被搜索引擎抓取并显示在搜索结果：

    <meta name="description" content="...">

    豆瓣

    可见，针对每个可被浏览器搜索的页面定制合理的页面描述是有必要的。比如，对于博客博文页面可以输出文章的摘要。

    禁止爬虫Robots、Google各个业务搜索引擎抓取：

    <meta name="robots" content="noindex,nofollow">
<!-- 禁止Google搜索引擎索引页面 -->
<meta name="Googlebot" content="noindex">
<meta name="Googlebot-News" content="noindex">
<meta name="Googlebot-Image" content="noindex">
<meta name="Googlebot-Video" content="noindex">
<!-- Google AdSense -->
<meta name="Mediapartners-Google" content="noindex">
<meta name="AdsBot-Google" content="noindex">

    看到keywords，你可能会认为通过在搜索引擎中搜索keywords中的关键词可以搜到对应的页面。
    但是，Google根本不会使用这个keywords

    <meta name="keywords" content="...">

    浏览器相关的属性值

    <!-- IE工作在最高版本。IE11默认是这个设定 -->
<meta name="X-UA-Compatible" content="IE=edge">
<!-- IE模拟IE7（当网站在IE7以上有问题时使用） -->
<meta name="X-UA-Compatible" content="IE=EmulateIE7">
<meta name="X-UA-Compatible" content="IE=EmulateIE8">
<meta name="X-UA-Compatible" content="IE=EmulateIE9">

<!-- 如果有Google Chrome Frame则启动 -->
<meta name="X-UA-Compatible" content="chrome=1">

    X-UA-Compatible是HTTP header，是IE8引入的，为了告诉IE使用哪种模式来解析文档。IE7和之前版本的浏览器不认识它。
    注意：这个标签需要在所有script标签之前出现。

    版本 渲染模式
    IE8 IE5.5混杂；IE7标准；IE8几乎标准；IE8标准
    IE9 同上；IE9几乎标准；IE9标准；IE9 XML
    IE10 同上；IE10混杂；IE10几乎标准；IE10标准；IE10 XML

    Viewport相关

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no;">

    这是一段本博客使用的viewport对应的content

    属性 含义
    width 视口宽度
    device-width 设备屏幕宽度
    height 视口高度
    device-height 设备屏幕高度
    initial-scale 初始缩放级别
    minimum-scale 可缩放的最小级别
    maximum-scale 可缩放的最大级别
    user-scalable 是否允许缩放 yes 或 no.

    虽然理论上可以使用height=device-height，但事实上没有什么卵用，也没有见哪个页面有用过。

    参考：

    Apple相关的属性值

    <!-- Webapp运行在全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Webapp状态栏样式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 是否将页面中的电话号码转换为链接并可以拨号 -->
<meta name="format-detection" content="telephone=no">
<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

<!-- 顺带说一下 -->
<!-- 60×60 iPhone & iPod Touch (Non-Retina) -->
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">
<!-- 76×76 iPad 2 & iPad mini (Non-Retina)-->
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- 120×120 iPhone & iPod Touch (Retina) -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- 152×152 iPad & iPad mini (Retina) -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

    其他

    <meta name="referrer" content="always">

    参考

    1. – HTML | MDN
    2. HTML5 – The meta element
    3. Metatags.org
    4. The Meta Referrer Tag: An Advancement for SEO and the Internet
    5. How much time should I spend on meta tags, and which ones matter?
    6. Apple-Specific Meta Tag Keys
    7. Referrer Policy
    8. Swiftype-specific Meta Tags
    9. Webkit – Github
    10. The Road to HTML5 Character Encoding
    11. Document metadata
    Scroll to top