Meta标签常用属性和介绍

Posted 2020-10-04

一、 Name类：

　1、 Keywords（网页关键字）

　　　How：<meta name="keywords" content="这里写网页关键内容字段，利于搜索引擎优化"> 

　　　　what：向搜索引擎解释本页面的关键内容字段是什么？

　

　2、Description（网页内容描述）

　　　　How：<meta name="description" content="搜索引擎优化相关内容" /> 

　　　　what：向搜索引擎解释本页面的关键内容是什么？

 

　3、Robots（搜索引擎爬虫的索引方式）

　　　　How：<meta name="robots" content="All|None|Index|Noindex|Follow|Nofollow"> 

　　　　what：Robots用来告诉搜索机器人页面需不需要索引。默认是all。

　　　　

all	文件将被检索，且页面上的链接可以被查询
none	文件将不被检索，且页面上的链接不可以被查询；(和 "noindex, no follow" 起相同作用)
index	文件将被检索；（让robot/spider登录）
follow	页面上的链接可以被查询；
noindex	文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
nofollow	文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

 

　4、viewport（移动端视窗设置）

　　　　How：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 

　　　　what：让网页适配或响应各种不同分辨率的移动设备。

width	设置网页的宽度，为一个正整数，或字符串"width-device"（范围从 200 到 10,000，默认为 980 像素）
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数（范围从 > 0 到 10）
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置网页的高度，很少使用（范围从 223 到 10,000 ）
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

 

　5、format-detection（格式读取）

　　　　 How：<meta name="format-detection" content="email=no|telephone=no|adress=no" /> 

　　　　what：是否检验格式（yes/no），是否禁止作为邮箱地址触发 | 是否禁止了把数字转化为拨号链接 | 是否禁止跳转至地图

 

　6、apple-mobile-web-app-status-bar-style（改变顶部状态条的颜色）

　　　　How：<meta name="apple-mobile-web-app-status-bar-style" content=颜色值" /> 

　　　　what：设置web app 应用下状态条（屏幕顶部条）的颜色；默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）

 

　7、apple-mobile-web-app-capable（网站开启对 web app 程序的支持）

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

　　　　what：苹果设备：网站开启对 web app 程序的支持

 

　8、Author（作者） 

　　　　How：<meta name="author" content=" 码农 "> 

　　　　what：标注网页的作者或制作组

 

　9、Copyright（版权）

　　　　How：<meta name="copyright" content="本网站版权归博客园所有"> 

　　　　what：标注版权

 

　10、renderer（双核浏览器渲染方式）

　　  How：<meta name="renderer" content="webkit | ie-comp | ie-stand ">  
　　　what：分别代表用webkit内核，IE兼容内核，IE标准内核，区分大小写。

内核	Webkit	IE兼容	IE标准
内核版本	Chrome 45	IE6/7	IE9/IE10/IE11(取决于用户的IE)
html5支持	YES	NO	YES
ActiveX控件支持	NO	YES	YES

　11、revisit-after(搜索引擎爬虫重访时间)

　　　　How：<meta name="revisit-after" content="2 days" > 

　　　 what：如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。

 

 二、 HTTP 标题信息 http-equiv类：

　1、Content-Type（网页字符集的设定）

　　　　How：  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> //旧Html，不推荐   <meta charset="utf-8"> //新Html5方式 推荐 

　　　　what：字符集的设置和渲染的编码格式

 

　2、X-UA-Compatible(浏览器采取何种版本渲染当前页面)

　　　　How：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 

　　　　what：用于告知浏览器以何种版本来渲染页面。

 

　 3、refresh(自动刷新并指向某页面)

　　　　How：<meta http-equiv="refresh" content="10; URL=https://i.cnblogs.com">   //10秒后跳转https://i.cnblogs.com

　　　　what：网页将在设定的时间内，自动刷新并调向设定的网址

 

　 4、expires(网页到期时间)

　　　　How：<meta http-equiv="expires" content="Sunday 26 October 2017 01:00 GMT" />  

　　　　what：用于设定网页的到期时间，过期后网页必须到服务器上重新传输。

 

　 5、set-Cookie(cookie设定)

　　　　How：<meta http-equiv="set-cookie" content="CookieName=CookieValue; expires=Fri, 30 Dec 2015 12:00:00 GMT; path=/"> 

　　　　what：创建一个 cookie ，包含了 cookie 名，cookie 值，过期时间。

 

　6、cache-control(指定请求和响应遵循的缓存机制)

　　　　How：<meta http-equiv="cache-control" content="no-cache"> 

　　　　what：控制文档的缓存机制。

public	所有内容都将被缓存(客户端和代理服务器都可缓存)
private	内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)
no-cache	不缓存
no-store	缓存当不归档 but not archived