meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 —— W3School

meta标签是HTML语言head区的一个辅助性标签,用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。它提供的信息虽然用户不可见,但却是文档的最基本的元数据。

meta标签的必要属性:

属性 说明
content some_text 定义与http-equiv或name属性相关的元信息

可选属性:

属性 说明
http-equiv content-type/expire/refresh/set-cookie 把content属性关联到HTTP头部
name author/description/keywords/generator/revised/其他 把 content 属性关联到一个名称
scheme some_text 定义用于翻译 content 属性值的格式
charset character encoding 定义文档的字符编码

通过改变name属性的有效值来定义不同的meta标签。

应用1:SEO优化

在过去,搜索引擎靠meta标签,如标题(title)、描述(description)甚至关键字(keywords)来索引网页页面的。然而,某些网站滥用它们,在页面中塞满众多著名的关键词,目的在于获得一个更好的搜索结果。但Google在2009年就宣布在搜索算法中不再使用元关键词或者描述来得出排名(Ranking)了。

尽管描述meta标签对搜索引擎的排名没有影响了,但它们的确会出现在搜索结果的描述当中。一个人在点击你的链接之前是会在搜索结果中先看到页面的描述,这个也说明,应该添加上meta描述,方便用户去阅读而不是为了方便网络机器人去查找。总的来说,虽然一个好的meta描述不会增加网站排名,但在搜索结果中却会增加点击率。

注意,重要的一点是:不是所有的流量都只是来自Google、Bing和Yahoo。其他搜索引擎(如百度)会赋予meta标签较高的权重。

1.1 页面关键词

每个网页应具有描述该网页内容的一组唯一的关键字。

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

1.2 页面描述

反映网页内容的描述。

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

1.3 搜索引擎索引方式

robotterms是一组使用逗号(,)分割的值,通常有如下几种取值:

all:文件将被检索,且页面上的链接可以被查询;

none:文件将不被检索,且页面上的链接不可以被查询;

index:文件将被检索;

follow:页面上的链接可以被查询;

noindex:文件将不被检索;

nofollow:页面上的链接不可以被查询。

<meta name="robots" content="index,follow" />

1.4 页面重定向和刷新

content内的数字代表多少时间后刷新,单位为s(秒)。如果加url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。

<meta http-equiv="refresh" content="0;url=" />

1.5 cookie过期定义

set-cookie:设定页面cookie过期时间,操作cookie跟js操作cookie类似

<meta http-equiv="set-cookie" contect="cookievalue=xxx; expires=Wed, 12 Dec 2012 12:12:12 GMT; path=/">

1.6 Cache过期时间

Expires可设定网页Cache过期时间。

<meta http-equiv="expires" contect="Wed, 12 Dec 2012 12:12:12 GMT">

1.7 文档的缓存机制

cache-control可设置文档的缓存机制。值如下:
public:浏览器和缓存服务器都可以缓存页面信息;
private:只缓存在浏览器端;(默认值)
no-cache:浏览器和缓存服务器都不应该缓存页面信息;
no-store:请求和响应的信息都不应该被存储在对方的磁盘系统中;

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

1.8 网页作者

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

1.9 网页版权

<meta name="copyright" content="© http://www.dreamdu.com" />

1.10 其他信息

name值还有:
last-modified:页面的最后生成时间;
location:重定向到另一个网址;
window-target:指定了这个属性的iframe,会在加载这个iframe的页面窗口打开;
date:指定页面创建的日期;
Pragma:设置是否缓存网页;

应用2:移动设备

2.1 响应式布局

viewport:能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放。

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

content的取值如下:

width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素);

height:高度(数值 / device-height)(范围从223 到10,000);

initial-scale:初始的缩放比例 (范围从>0 到10);

minimum-scale:允许用户缩放到的最小比例;

maximum-scale:允许用户缩放到的最大比例;

user-scalable:用户是否可以手动缩 (no,yes);

minimal-ui:可以在页面加载时最小化上下状态栏。(已弃用);

2.2 WebApp全屏模式

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

2.3 隐藏状态栏/设置状态栏颜色

只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。

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

2.4 网站添加到主屏后的标题

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

2.5 忽略数字自动识别为电话号码

<meta content="telephone=no" name="format-detection" />

2.6 忽略识别邮箱

<meta content="email=no" name="format-detection" />

2.7 添加智能 App 广告条 Smart App

Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner(如下图)。

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

2.8 其他

<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- 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">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

应用3:网页相关

3.1 申明编码

<meta charset='utf-8' />

3.2 优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

3.3 浏览器内核控制

国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。

国内双核浏览器默认内核模式如下:

  1. 搜狗高速浏览器、QQ浏览器:IE内核(兼容模式);

  2. 360极速浏览器、遨游浏览器:Webkit内核(极速模式);

 <meta name="renderer" content="webkit|ie-comp|ie-stand">

3.4 禁止浏览器从本地计算机的缓存中访问页面内容

这样设定,访问者将无法脱机浏览。

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

3.5 Windows 8 磁贴

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

3.6 站点适配

主要用于PC-手机页的对应关系。

[wml|xhtml|html5]根据手机页的协议语言,选择其中一种;
url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">

3.6 转码申明

用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta:

<meta http-equiv="Cache-Control" content="no-siteapp" />

应用4:link创建图标和动画

4.1 iOS中创建桌面图标和启动画面

apple-touch-icon:创建桌面图标和启动画面,在meta标签中指定它的值可以使得你的网页在保存至主屏时,显示为自定义的icon,而不是网页的缩略图。

<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

4.2 iOS中网页启动画面

apple-touch-startup-image:给网页声明启动画面,类似原生app。但是被声明的图片对于iphone和itouch 大小只能是 320 x 460 ,其他大小的都无效。但是同样你可以通过sizes 来进行多设备适配。

<link rel="apple-touch-startup-image" href="/startup.png">
//for iphone Retina Display high
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
//for iPad Landscape
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
//for iPad Portrait
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

4.3 浏览器Tab标签icon

<link rel="shortcut icon" href="/images/favicon.ico" />

过时的meta用法汇总

meta标签已经使用多年,但有一些经典实践对今天来说已经不适用了,应该丢弃。

1. 编码声明:

<!-- 不要用下面这个! -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 推荐使用下面这个! -->
<meta charset="UTF-8" />

2. 版权说明:

<!-- 下面这个是过时的! -->
<meta name="copyright" content="SitePoint" />
<!-- 推荐使用下面这个! -->
<link rel="copyright" href="copyright.html" />
本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/html/333