常用HTML meta 标签属性 -- 网站兼容与优化

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

meta可选属性

属性值描述http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。nameauthor / description / keywords / generator / revised / others把 content 属性关联到一个名称。contentsome text定义用于翻译 content 属性值的格式。

SEO优化 

1、页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。 
使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。 

复制代码

代码如下:

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

2、页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。

复制代码

代码如下:

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

3、搜索引擎索引方式，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。确保正确使用nofollow和noindex属性值。

复制代码

代码如下:

<meta name="robots" content="index,follow" />
<!--
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
-->

4、页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。

复制代码

代码如下:

<meta http-equiv="refresh" content="0;http://www.baidu.com" /> 

;后不写东西，代表刷新本页面。

5、其他

复制代码

代码如下:

<meta name="author" content="author name" /> <!-- 定义网页作者 -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" /> 

移动设备 
viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。 
大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。

复制代码

代码如下:

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边

双核浏览器 指定默认渲染引擎

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

<meta name="renderer" content="webkit">//默认webkit内核

<meta name="renderer" content="ie-comp">//默认IE兼容模式

<meta name="renderer" content="ie-stand">//默认IE标准模式

而 webkit|ie-comp|ie-stand 这种写法，跟font-family的规则类似，按照顺序排他的优先级，不支持则往下，浏览器将会按照从左到右的先后顺序选择其具备的渲染内核来处理当前网页。目前支持对其提供支持的浏览器有:360

另：

<!-- 如果安装了GCF（chrome frame浏览器插件），则使用GCF来渲染页面，如果没有安装GCF，则使用最高版本的IE内核进行渲染。
X-UA-Compatible：这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如人见人烦的IE6)，以此来解决部分兼容问题。 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >

<!-- 强制页面在当前窗口以独立页面显示。 -->
<meta http-equiv="Window-target" content="_top">

<!-- 禁止浏览器缓存 -->
<!-- 是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
用法： -->
<meta http-equiv="pragram" content="no-cache"> 
<!-- 清除缓存（再访问这个网站要重新下载！） -->
<meta http-equiv="cache-control" content="no-cache, must-revalidate"> 
<!-- 设定网页的到期时间 -->
<meta http-equiv="expires" content="0"> 
<!-- 手机端 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 不缓存 -->
<meta http-equiv="cache-control" content="no-cache" />
<!-- 初始化设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 网站开启对iphone私有 web app 程序的支持 -->
<meta content="yes" name="apple-mobile-web-app-capable" />
<!-- 改变顶部状态条的颜色 iphone私有的属性-->
<meta content="black" name="apple-mobile-web-app-status-bar-style" />