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">
参考
- – HTML | MDN
- HTML5 – The meta element
- Metatags.org
- The Meta Referrer Tag: An Advancement for SEO and the Internet
- How much time should I spend on meta tags, and which ones matter?
- Apple-Specific Meta Tag Keys
- Referrer Policy
- Swiftype-specific Meta Tags
- Webkit – Github
- The Road to HTML5 Character Encoding
- Document metadata