meta标签集合

2018-07-11 本文已影响18人指尖轻敲

meta标签始终位于head标签里，用于给浏览器提供一些信息。或许你经常使用的meta只有那么几个，但是它却是必不可少的。下面我们来总结一下meta标签各种用处。

SEO优化

<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta name="generator" content="Sublime">
<meta name="copyright" content="本网站版权归xxx所有">
<meta name="revisit-after" content="5 days" >

keywords：关键字，告诉搜索引擎你的网页的关键字
description：描述，网页的主要内容
author：作者，网页的作者
robots：泛指所有搜索引擎（可以指定搜索引擎如：Googlebot Baiduspide等），如果content有多个值，用逗号分开，但是不能是对立的两个值。

index：告诉搜索引擎抓取这个页面

follow：告诉搜索引擎可以从这个页面上找到链接，然后继续访问抓取下去。

all：等价于index, follow

noindex：不允许抓取这个页面

nofollow：不允许从这个页面找到连接，拒绝其继续访问

none：等价于noindex，nofollow。

noarchive：禁止建立网页快照

generator：网页生成工具，编辑器
copyright：标注版权
revisit-after：通知搜索引擎多久访问一次

添加http头部内容

http-equiv属性是添加http头部内容。

1. Refresh(重定向)

设置打开该网页5秒之后，重定向到百度首页。如果没有写重定向地址，就是刷新当前页。

<meta http-equiv="Refresh" content="5; url=http://www.baidu.com">
<meta http-equiv="Refresh" content="5">

2. expires（网页有效期）

用于设定网页的有效期，如果超出这个期限就要重新传输，需要注意的是这里时间格式应该是GMT的格式。

<meta http-equiv="expires" content="Wed Jul 11 2018 14:02:57 GMT+0800">

3. set-cookie（创建cookie）

创建一个cookie，包括cookie名、值、有效期、路径。

<meta http-equiv="Set-Cookie" content="cookievalue=xiaoxiao;expires=Wed, Jul 11 2018 14:12:34 GMT+0800;path=/">

不知道为什么自己写报错了，说不能从meta标签设置cookie。

error.png

4. content-type（返回内容的MIME类型）

通常用于字符集的设置。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

5. Pragam（cache模式）

禁止浏览器从本地缓存读取页面内容，使网站无法脱机浏览。

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

6. cache-control（控制文档缓存机制）

如果要控制文档不缓存

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

这里支持的属性有：

public：所有内容都被缓存（客户端和代理服务器都缓存）
private：只缓存到私有缓存中（仅客户端缓存，代理服务器不缓存）
no-cache：不缓存
no-store：缓存但是不归档。

7.X-UA-Compatible（强制IE浏览器的渲染方式）

如果使用这个属性，会使IE浏览器强制使用某种引擎渲染页面。这样可以使用最新的引擎来渲染。

<meta http-equiv="X-UA-Compatible" content="IE=8"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">

第一行是使用IE8的引擎来渲染页面。第二行是使用IE最新的edge引擎来渲染。chrome=1可以激活Chrome Frame---谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)。如果安装了GCF则使用chrome内核渲染。

移动端

视口

H5开发必须要使用的标签，来控制视口大小和缩放比例。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

width=device-width：宽度等于屏幕宽度
initial-scale=1：初始缩放比例为1
minimum-scale=1：最小缩放比例为1。maximum-scale=1为最大缩放比例。
user-scalable=no：禁止用户缩放
shrink-to-fit=no：这个属性针对IOS9。在IOS9中设置width=device-width和initial-scale=1之后，如果内容宽度超出屏幕，会自动缩放进屏幕里，也就是initial-scale=1属性没有生效（IOS9可能发生变化了），这里需要用该属性解决。

指定屏幕方向

QQ浏览器下

<meta name="x5-orientation" content="landscape/portrait">

landscape：强制横屏

portrait：强制竖屏

UC浏览器下

<meta name="screen-orientation" content="portrait">

全屏模式显示（应用模式）