1、什么是meta标签?
meta,即meta-information,可以提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。
meta 永远位于head元素内部,不包含任何内容,并且元数据总是以名称/值的形式被成对传递的。
2、meta标签的组成。
meta标签共有两个属性,它们分别是 http-equiv 属性和 name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
http-equiv 属性主要是用来给浏览器识别网页内容,如 Content-Type和 Content-Language ,它们告诉浏览器网页使用了哪种语言和字符集
name是描述网页的,对应于Content(网页内容),以便于搜索引擎机器人查找、分类网站(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。
3、meta标签的属性
- 必须的属性
属性 | 值 | 描述 |
---|---|---|
content | some_text | 定义与 http-equiv 或 name 属性相关的元信息 |
可选的属性
http-equiv
属性 | 值 | 描述 |
---|---|---|
http-equiv | content-type | 把 content 属性关联到 HTTP 头部。 |
http-equiv | expires | |
http-equiv | refresh | |
http-equiv | set-cookie |
- name
属性 | 值 | 描述 |
---|---|---|
name | author | 把content 属性关联到一个名称 |
name | description | |
name | keywords | |
name | set-generator | |
name | revised | |
name | others |
- scheme
属性 | 值 | 描述 |
---|---|---|
scheme | some_text | 定义用于翻译 content 属性值的格式。 |
4、常用功能
1.SEO相关
● 页面关键词 :每个网页应具有描述该网页内容的一组唯一的关键字。
使用人们可能会搜索,并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短,则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。例如:
<meta name="keywords" content="开发者,开发者,程序猿,程序媛,极客,技术社区">
● 页面描述 :每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
<meta name="description" content="csdn是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
● 搜索引擎搜索方式 :robots(机器人向导),用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。content的参数有all、none、index、noindex、follow、nofollow。默认是all。例如:
<meta name="robots" content="index,follow">
<!--
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索;
nofollow:页面上的链接不可以被查询;
-->
● 页面重定向与刷新 :content内的数字代表时间(秒),既多少时间后刷新。如果加url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。例如:
<meta http-equiv="refresh" content="5;url=http:/www.baidu.com/">
上例代码表示5秒之后跳转到百度首页。
● 页面作者 :以自由格式定义的网页作者的名称。例如:
<meta name="author" content="author name">
● 页面版权 :copyright (版权),描述页面的版权。例如:
<meta name="copyright" content="本页版权归XX所有。All Rights Reserved">
● 编辑器 :generator是编辑器的说明。例如:
<meta name="generator" content="PCDATA|FrontPage|">
content的值是你所使用的编辑器。
● referrer:html文档控制http请求中的referer。可用的值:
属性 | 值 | 描述 |
---|---|---|
referrer | never | 删除http请求head中的referer |
referrer | always | 不改变http请求dead中的referer的值。注意,这种情况下,如果当前页面使用了https协议,而要加载的资源使用http协议,加载资源的请求head中也会携带referer |
referrer | origin | 从当前页面中发起的http请求只携带origin部分。 |
referrer | default | 如果当前页面使用的是https协议,而正要加载的资源使用的是普通的http协议,则将http请求head中的referer置为空。 |
例如,百度首页源码中的:
<meta content="always" name="referrer">
2.移动设备
● 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 全屏模式打开页面时出现黑边 -->
属性 | 值 | 描述 |
---|---|---|
viewport | width | 一个可能的正整数值或者设备的呈现表面的宽度 定义了视口的宽度,以px为单位 |
viewport | height | 一个可能的正整数值或者设备的呈现表面的高度 定义了视口的高度,以px为单位 |
viewport | initial-scale | 在0.0和10.0之间的正数 描述设备宽度(纵向模式下设备的宽度,横向模式下设备的高度)与视口大小的比率 |
viewport | maximum-scale | 在0.0和10.0之间的正数 限定缩放的最大值;它必须大于或等于最小尺度 |
viewport | minimum-scale | 在0.0和10.0之间的正数 限定缩放的最小值;它必须是小于或等于最大尺度 |
viewport | user-scalable | 布尔值(yes或no) 如果设置为no,则用户不能够在所述网页进行放大。默认值是yes。 |
注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。
● WebApp全屏模式 :伪装app,离线应用。
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 启用 WebApp 全屏模式 -->
● 隐藏状态栏/设置状态栏颜色 :只有在开启WebApp全屏模式时才生效。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="标题">
● 忽略数字自动识别为电话号码 :
<meta name="format-detection" content="telephone=no">
● 忽略识别邮箱 :
<meta name="format-detection" content="email=no">
● 添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner(如下图)
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
● 移动端的
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别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">
<!-- 适应移动端end -->
3.网页相关
● 声明编码(HTML5):描述当前页面使用的编码,例如:
<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">
国内双核浏览器默认内核模式如下:
1. 搜狗高速浏览器、QQ浏览器:IE内核(兼容模式)
2. 360极速浏览器、遨游浏览器:Webkit内核(极速模式)
● 禁止百度转码 :通过百度手机打开网页时,百度可能会对你的网页进行转码,加上广告,为此可在 head 内添加:
<meta http-equiv="Cache-Control" content="no-siteapp" />
● 禁止浏览器从本地计算机的缓存中访问页面内容:这样设定,访问者将无法脱机浏览。
<meta http-equiv="Pragma" content="no-cache">
● Windows 8
<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,两者必须是一一对应关系。
-->
● expires (期限) :指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
注意:必须使用GMT的时间格式,或直接设为0(数字表示多少时间后过期)。
● pragma (cach模式) :禁止浏览器从本地机的缓存中调阅页面内容。
<meta http-equiv="pragma" content="no-cach">
● set-cookie :定义一个cookie
<meta http-equiv="set-Cookie" content="cookievalue=xxx; expires=wednesday,21-Oct-98 16:14:21 GMT; path=/">
注意:必须使用GMT的时间格式。
● default-style :指定 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值,或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。
<meta http-equiv="default-style" content="the document's preferred stylesheet">
本文转自: https://www.cnblogs.com/koto/p/5659627.html
四、参数解析
name常用的选项(固定好的)有keywords(关键字) ,description(网站内容描述),author(作者),robots(机器人向导)等等。还可以指定其他任意值
1、Keywords(关键字)
说明:keywords是用来告诉搜索引擎你的网站的关键字是什么,提高搜索引擎的搜索质量,提高网站的排名。关键字用英文逗号隔开,包括标点符号不要超过250个单词。将最重要
的关键词放在最前面,让相关的关键词相邻。
例子:<meta name =”keywords” content=”通大网络”>
2、description(网站内容描述)
说明:description用来告诉搜索引擎你的网站主要内容,缩小关键字的判断范围。比如你用百度或GOOGLE等搜索引擎搜索某个关键字的结果下都有一下段描述,这个就是
description的内容(注:百度也有可能抓取的是网站内容的关键字作为描述)如果description没有内容,也会一定地影响网站的收录。
例子:<meta name =”description” content=”通大网络”>
<meta name =”referrer” content=”always”>
3、author(作者)
说明:标注网页的作者或制作人,制作公司等,可以是名字,域名或是E-mail等等。
例子:
4、robots(机器人向导)
说明:Robots用来告诉搜索引擎哪些页面需要索引,哪些页面不需要索引。参数有all、none、index、noindex等等。
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;(和 “noindex, no follow” 起相同作用)
index:文件将被检索;(让robot/spider登录)
follow:页面上的链接可以被查询;
noindex:文件将不被检索,但页面上的链接可以被查询;(不让robot/spider登录)
nofollow:文件将不被检索,页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
例子:
还有一些我们比较不常用到的:
5、Copyright (版权)
6、Generator (编辑器)
7、revisit-after (重访)