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">

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