meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！

桌面端

Name属性

Meta Description

这个标签曾经在搜索排名中占有很大的权重，但随着算法的不断更新升级，它的地位也逐渐降低。它虽然不会提高网站排名，但是，因为它会被用在搜索引擎的结果页，所以依然有用。

<meta name="description" content="You can write everything!">

Meta description标签可能是最有用的标签之一。顾名思义，它会给搜索引擎提供关于这个网页的简短的描述。推荐的description长度为160 个字符。

Meta Robots

Meta robots标签管理着搜索引擎是否可以进入网页，你可以用它来允许或不允许搜索引擎来获取你的网页、进入你网页中的子链接或对你的网页存档。

<meta name="robots" content="robotterms" />

robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。

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

如果网页没有提供robots，搜索引擎认为网页的robots属性为all(index，follow)；

Title

专业的讲，title标签不是meta标签，但他们都放在相同位置。我之所以把title标签放在这里是因为它对搜索引擎优化很重要。在所有的HTML文档中，title标签都是不可缺少的。它定义了整个文档的标题。

<title>Examples</title>

浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

Meta keywords

keywords用于定义网页关键词，keywords出现在name属性中，使用content属性提供网页的关键词。

<meta name="keywords" content="HTML XHTML" />
  • keywords提供的网页关键词通常是为搜索引擎分类网页使用的；
  • 可以为网页提供多个关键词，多个关键词应该使用空格分开；
  • 不要给网页定义过多的关键词，最好保持在10个以下，过多的关键词，搜索引擎将忽略；
  • 不要给网页定义与网页描述内容无关的关键词；
  • 由于网页制作者滥用keywords(提供过多的关键词或者提供与网页无关的关键词)，导致目前常用的搜索引擎降低了keywords的重要性。
Meta refresh

定义文档在规定的时间内容刷新或跳转到新的 URL 上。

<meta name="refresh" content="10"><meta name="refresh" content="10;URL=http://www.chuyunt.com">

name值还有：

  • abstract 定义了一个二级描述

  • author 定义文档的作者。
    实例：<meta name="author" content="Hege Refsnes">

  • classification 归类站点到正确类别

  • copyright 定义文档的版权信息。
    实例：<meta name="copyright" content="2016 © lion1ou">

  • distribution 规定文件是否可用于Web或Intranet。（web - 互联网，intranet - 内网）
    实例：<meta name="distribution" content="web">

  • doc-class 指定文档完成的状态

  • doc-rights 文档的版权声明

  • doc-type 指定文档的类型

  • DownloadOptions 控制下载对话框按钮的显示。noopen - 隐藏打开按钮，nosave - 隐藏保存按钮。

  • expires 设置网页过期时间
    实例：<meta name="expires" content="Fri, 10 Jun 2011 12:00:00 GMT">

  • generator 指定文档生成的工具名称

  • googlebot 设置 Google 搜索隐藏的收入规则：

    • noarchive - 告诉爬虫,不要为本网页建立快照
    • nofollow - 网页可以被追踪，但网页的链接不要去追终
    • noindex - 链接可以被追踪，但含此标签的网页不能建立索引
    • nosnippet - 告诉Google不要在搜索结果页的列表里显示含此标签的网站的描述语句，并且不要在列表里显示快照链接。

    实例：<meta http-equiv="googlebot" content="noarchive">

  • MSSmartTagsPreventParsing 防止微软页面编辑软件在页面上自动添加标签、链接等。

    • name 指定文档的名称
    • owner 定义网页的所有者
    • progid 定义程序 id 用于生成文档。
    • rating 定义内容分级，如：14 years（14岁以上），general(普通人)，mature（成年人），restricted（限制级），safe for kids(孩童)。
    • reply-to 定义网页开发者的邮件地址
    • resource-type 定义 web 资源类型
    • revisit-after 定义搜索引擎爬取网页的时间频率
    • Template 内容属性可以指定用于编译文档的模板位置
    • others 你可以定义自己的名字

httpEquiv 属性

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

content：

  • public - cached in public shared caches/缓存在共享缓存中
  • private - cached in private cache/缓存在私有缓存中
  • no-cache - not cached/不缓存
  • no-store - cached but not archived/缓存但不存档
文本语言
<meta http-equiv="content-language" content="en-US">
编码格式
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
定义页面本身刷新的时间
<meta http-equiv="refresh" content="300">
创建带有指定名称的cookie，过期日期和值
<meta http-equiv="set-cookie" content="cookie=myContent;expires=Fri, 30 Dec 2011 12:00:00 GMT; path=http://www.chuyunt.com">

scheme 属性

scheme 属性设置或返回用于解释 content 属性的值的格式。

content 属性

content 属性可设置或者返回 meta 元素 content 属性值。content 属性指定了 meta 信息的内容。这个属性可用的值依赖于name 和 httpEquiv 属性的值。

移动端

Meta 之 viewport

　viewport即可视区域，有如下几种属性值可以设置：

  • width: viewport 的宽度 (范围从 200 到 10,000 ，默认为 980 像素 )
  • height: viewport 的高度 (范围从 223 到 10,000 )
  • initial-scale: 初始的缩放比例 (范围从>0到 10 )
  • minimum-scale: 允许用户缩放到的最小比例
  • maximum-scale: 允许用户缩放到的最大比例
  • user-scalable: 用户是否可以手动缩放

对于这些属性，我们可以设置其中的一个或者多个，并不需要你同时都设置，手机会根据你设置的属性自动推算其他属性值，而非直接采用默认值。

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

Meta 之 format-detection

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

telephone=no就禁止了把数字转化为拨号链接!telephone=yes就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启!

Meta 之 apple-mobile-web-app-capable

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

这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

Meta 之 apple-mobile-web-app-status-bar-style

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

作用是控制状态栏显示样式