meta标签大全

2018-09-06 本文已影响0人情有千千节

关于meta标签

HTML DOM Meta对象

Meta 对象代表 HTML 的一个 <meta> 元素。<meta> 元素可提供有关某个 HTML 元素的元信息 (meta-information)，比如描述、针对搜索引擎的关键词以及刷新频率。

属性	描述	W3C
content	设置或返回 <meta> 元素的 content 属性的值。	Yes
httpEquiv	把 content 属性连接到一个 HTTP 头部。	Yes
name	把 content 属性连接到某个名称。	Yes
scheme	设置或返回用于解释 content 属性的值的格式。	Yes

HTML <meta> content 属性

content 属性给出了与 http-equiv 或 name 属性相关的值。
描述 HTML 文档内的元数据：

<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
</head>

HTML <meta> name 属性

name 属性可设置或者返回content属性信息名称。

name 属性值依赖 content 属性值。

name 属性可以是预定义值，或由用户定义。

语法

<!-- 设置name属性 -->
metaObject.name = "application-name|author|description|generator|keywords"
<!-- 获取name属性 -->
metaObject.name

属性

值	描述
application-name	规定页面所代表的 Web 应用程序的名称。
author	规定文档的作者的名字。实例： <meta name="author" content="Hege Refsnes">
description	规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。实例： <meta name="description" content="Free web tutorials">
generator	规定用于生成文档的一个软件包（不用于手写页面）。实例： <meta name="generator" content="FrontPage 4.0">
keywords	规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）。提示：总是规定关键词（对于搜索引擎进行页面分类是必要的）。实例： <meta name="keywords" content="HTML, meta tag, tag reference">

HTML <meta> scheme 属性(HTML5 不支持)

使用 scheme 属性来定义 content 属性的格式：

HTML5 不支持 <meta> scheme 属性。
scheme 属性规定用于翻译 content 属性的值的方案（格式或 URI）。

语法

<meta scheme="format|URI">

实例

<head>
<meta name="date" content="2009-01-02" scheme="YYYY-MM-DD">
<meta name="identifier" content="0-2345-6634-6" scheme="ISBN">
</head>

属性值

值	描述
format/URI	定义 content 属性内的值的格式（或指向一个包含信息的 URI）

Meta httpEquiv 属性 H5中被charset替换了

定义和用法

httpEquiv 属性可设置或者返回 content 属性中HTTP 头部信息。

http-equiv 属性可以使用伪装 HTTP 响应头部信息。
-http-equiv 属性值依赖 content属性的值。
-注意：如果 name 属性已设置, http-equiv 属性就无需设置。

语法

<!-- 设置http-equiv 属性 -->
linkObject.httpEquiv="HTTP-header"
<!-- 获取 http-equiv 属性-->
linkObject.httpEquiv

一些常用的http-header值

值	描述
cache-control	控制文档的缓存机制。允许的值：public - 所有内容都将被缓存(客户端和代理服务器都可缓存) private - 内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)no-cache - 不缓存 no-store - 缓存当不归档 but not archived 实例:<meta http-equiv="cache-control" content="no-cache">
content-language	响应体的语言实例:<meta http-equiv="content-language" content="en-US">
content-type	返回内容的MIME类型,提示: 通常用于字符集的设置。实例:<meta http-equiv="content-type" content="text/html; charset=UTF-8">
date	原始服务器消息发出的时间.实例:<meta http-equiv="date" content="Wed, 16 Feb 2011 22:34:13 GMT">
expires	响应过期的日期和时间.实例:<meta http-equiv="expires" content="Fri, 30 Dec 2011 12:00:00 GMT">
last-modified	请求资源的最后修改时间实例:<meta http-equiv="last-modified" content="Mon, 03 Jan 2011 17:45:57 GMT">
location	用来重定向接收方到非请求URL的位置来完成请求或标识新的资源实例:<meta http-equiv="location" content="URL=http://www.runoob.com">
refresh	定义间隔多久后刷新页面。实例:<meta http-equiv="refresh" content="300">
set-cookie	创建一个 cookie ，包含了 cookie 名，cookie 值，过期时间。实例<meta http-equiv="set-cookie" content="runoobcookie=myContent;expires=Fri, 30 Dec 2015 12:00:00 GMT; path=http://www.runoob.com">
window-target	指定要载入的框架名

HTML <meta> charset 属性

规定 HTML 文档的字符编码：
定义和用法
charset 属性规定 HTML 文档的字符编码。

提示：charset 属性可以通过任意元素上的 lang 属性来重写。

HTML 4.01 与 HTML5之间的差异

charset 属性是 HTML5 中的新属性，且替换了：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

仍然允许使用 http-equiv 属性来规定字符集，但是使用新方法可以减少代码量。

语法

<meta charset="character_set">

值	描述
character_set	规定 HTML 文档的字符编码。常用的值：UTF-8 - Unicode 字符编码ISO-8859-1 - 拉丁字母表的字符编码在理论上，可以使用任何字符编码，但并不是所有浏览器都能够理解它们。某种字符编码使用的范围越广，浏览器就越有可能理解它。如需查看所有可用的字符编码，请访问 IANA 字符集。

实例

<head>
<meta charset="UTF-8">
</head>

常用meta标签

SEO优化

页面关键词

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

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

页面描述

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

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

搜索引擎索引方式

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;url=" />

其他

<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。

注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  
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：可以在页面加载时最小化上下状态栏。（已弃用）
-->

WebApp全屏模式

伪装app，离线应用。这meta的作用就是删除默认的苹果工具栏和菜单栏。

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
<!--添加到主屏后是否以全屏显示-->
<meta name="apple-touch-fullscreen" content="yes">

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

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

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

添加到主屏后的标题

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

<!--  添加到主屏后的图标  苹果-->
<link rel="apple-touch-icon" href="logo57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="logo72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="logo114.png" />

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

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

忽略识别邮箱

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

添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner(如下图)。参考文档

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

其他参考文档

<!-- 针对手持设备优化，主要是针对一些老的不识别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">

网页相关

申请编码

<meta charset='utf-8' />

优先使用 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 -->

浏览器内核控制

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

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

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

搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）

360极速浏览器、遨游浏览器：Webkit内核（极速模式）

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

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

window8

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

站点适配

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

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
 -->

转码申明

用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta。

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