Meta 标签

带你系统性的了解 meta 标签究竟为何物

作者 Haojen Ma 日期 2015-10-30
Meta 标签

该元素可提供有关页面的元信息, 比如针对搜索引擎和更新频度的描述和关键词. meta 标签位于文档的头部, 不包含任何内容, 该标签的属性定义了与文档相关联的名称/值对 元数据不会显示在页面上,但是对于机器是可读的。主要面向的是搜索引擎之类的机器人,它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

<!-- more -->

name 属性

该属性提供了名称/值对中的名称,用来描述网页; HTML 和 XHTML 标签都没有指定任何预先定义的 meta 名称, 通常情况下,可以自由使用对自己和源文档的读者来说富有意义的名称

content 属性

该属性提供了名称/值对中的值. 该值可以是任何有效的字符串,且该属性始终要和 name 或 http-equiv 属性一起使用

http-equiv 属性

http-equiv 为名称/值对提供了名称, 并指示服务器在发送实际的文档之前,先在要传送给浏览器的 MIME 文档头部包含名称/值对,用来告诉浏览器应该以哪种方式显示之类的,主要面向的是浏览器

当服务器先向浏览器发送文档时,会先发送许多名称/值对, 而且所有的服务器都至少要发送一个: content-type:text/html,意思是告诉浏览器准备接受一个 HTML 文档

一个服务器向浏览器发送的信息

<meta http-equiv='charset' content='utf-8''>
<meta http-equiv="expires" content="31 Dec 2008">

这样发送浏览器的头部就包含:

charset:utf8
expires: 31 Dec 2008

属性具体应用

###SEO 优化 页面关键字 ,每个网页应具有描述该网页内容的一组唯一的关键字。 使用人们可能会搜索,并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短,则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。

<meta name="keywords" content='your tags'>

如果没有提供 name 属性, 那么名称/值中的名称会采用 http-equiv 属性的值 页面描述

<meta name=" description" content="不能大于150个字符且能准确反应网页内容的描述标签">

搜索引擎索引方式 , robotterms是一组使用逗号(,)分割的值, 通常有以下几种取值

<meta name="robots" content='index, follow'>
  1. none:文件不背检索,且页面上的链接也不可以被查询
  2. noindex: 文件不被检索
  3. nofollow: 页面上的链接不会被查询
  4. all: 文件将被检索, 且页面上的链接可以被查询
  5. index: 文件将被检索
  6. follow: 页面上的链接可以被查询

页面重定向和刷新

<meta http-equiv="refresh" content="0;url=这里是链接">

content 内的数字代表时间秒, 即多长时间后刷新, 如果加URL ,则会重定向到指定的网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。 定义作者

<meta name="author" content="author name"> 

移动设备

viewport: 能优化移动显示器的显示

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
//width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边

content 属性值:

  1. width: 宽度(数值或者/device-width 设备宽度)
  2. height: 高度(数值或者 device-height 设备高度)
  3. initial-scale: 初始的缩放比例 , 范围从0-10
  4. minimum-scale: 允许用户缩放到的最比例
  5. maximum-scale: 允许用户缩放到的最比例
  6. user-scalable: 用户是否可以手动缩放 no, yes

注意: 很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。

apple 移动设备

WebApp全屏模式伪装app, 离线应用 <meta name="apple-mobile-web-app-capable" content="yes">

隐藏状态栏/设置状态栏颜色只有在开启 WebApp全屏模式时才生效

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

content 的值有

  1. black-translucent
  2. default
  3. black

添加到主屏后的标题

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

忽略数字自动识别成电话号码 <meta name="format-detection" content="telephone=no">

忽略识别邮箱-apple

<meta  name="format-detection" content="email=no" />

android 移动设备

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签,用来控制选项卡颜色。

<meta name="theme-color" content="#db5945">

禁止 Chrome 浏览器中自动提示翻译

<meta name="google" value="notranslate">

其他

<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

申明编码

<meta charset='utf-8' />	

禁止浏览器从本地计算机的缓存中访问页面内容

这样设定,访问者将无法脱机浏览。

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

转码申明

用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta。

<meta http-equiv="Cache-Control" content="no-siteapp" />