09月09, 2014

关于meta标签的一点研究

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用来描述namehttp-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="...">

豆瓣

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


禁止爬虫RobotsGoogle各个业务搜索引擎抓取:

<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

本文链接:http://aztack.wang/post/the-meta-tag.html

-- EOF--

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。