html之meta标签

时间 2019-11-08

标签 html meta 标签栏目 HTML 繁體版

原文原文链接

百度百科对于meta的描述：META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的<head>和<title>之间（有些也不是在<head>和<title>之间）。它提供的信息虽然用户不可见，但倒是文档的最基本的元信息。<meta>除了提供文档字符集、使用语言、做者等基本信息外，还涉及对关键词和网页等级的设定。因此有关搜索引擎注册、搜索引擎优化排名等网络营销方法内容中，一般都要谈论META标签的做用，咱们甚至能够说，META标签的内容设计对于搜索引擎营销来讲是相当重要的一个因素，合理利用 Meta 标签的 Description 和Keywords 属性，加入网站的关键字或者网页的关键字，可以使网站更加贴近用户体验。html

我对上面对meta标签的描述的理解是：meta标签表达的是整个html文档的描述信息，html中的meta标签影响搜索引擎注册和搜索引擎优化web

<meta>的属性chrome

meta标签有3个属性：name、http-equiv、content。每一个name或http-equiv都对应一个content。更确切的说，name或http-equiv的值表示属性，content的值为name或http-equiv的值所表示属性的值浏览器

例如百度百科meta词条的网页的meta缓存

<meta name="description" content="一般所说的META标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如做者、日期和时间、网页描述、关键词、页面刷新等。...">
复制代码

name：主要用于描述网页，好比网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。服务器

name属性的取值cookie

value	intro
keywords	告诉搜索引擎网页的关键字
description	告诉搜索引擎网站的主要内容
viewport	经常使用于设计移动端网页
robots	定义搜索引擎爬虫的索引方式
author	标注网页做者
generator	标明网页采用什么软件制做的
copyright	标注版权信息
revisit-after	搜索引擎爬虫重访时间
renderer	双核浏览器渲染方式

robots对应content的取值网络

value	intro
none	搜索引擎将忽略此网页，等价于noindex，nofollow
noindex	搜索引擎不索引此网页
nofollow	搜索引擎不继续经过此网页的连接索引搜索其它的网页。
all	搜索引擎将索引此网页与继续经过此网页的连接索引，等价于index，follow。
index	搜索引擎索引此网页。
follow	搜索引擎继续经过此网页的连接索引搜索其它的网页

renderer属性是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。app

例如360浏览器优化

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式
复制代码

http-equiv属性 ：至关于http的文件头做用。

value	intro
content-Type	设定网页字符集
X-UA-Compatible	浏览器采起何种版本渲染当前页面
cache-control	指定请求和响应遵循的缓存机制
expires	网页到期时间
refresh	网页将在设定的时间内, 自动刷新并调向设定的网址
Set-Cookie	cookie设定

具体实例

X-UA-Compatitle

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
复制代码

cache-control的做用有两个

做用1：设置缓存策略

<meta http-equiv="cache-control" content="no-cache">
复制代码

cache-control对应content的取值

value	intro
no-cache	先发送请求，与服务器确认该资源是否被更改，若是未被更改，则使用缓存。
no-store	不容许缓存，每次都要去服务器上，下载完整的响应
public	缓存全部响应，但并不是必须。由于max-age也能够作到相同效果
private	只为单个用户缓存，不容许任何中继进行缓存
max-age	表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器从新请求

做用2：禁止当前页面在移动端浏览时，被百度自动转码

<meta http-equiv="Cache-Control" content="no-siteapp" />
复制代码

expires

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
复制代码

refresh

<meta http-equiv="refresh" content="2; URL=http://www.baidu.com"> //表示2秒后跳转向百度
复制代码

Set-Cookie 若是网页过时。那么这个网页存在本地的cookies也会被自动删除。对应content取值的格式

<meta http-equiv="Set-Cookie" content="name, date"> 
复制代码

例如

<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT">
复制代码