该元素可提供有关页面的元信息, 比如针对搜索引擎和更新频度的描述和关键词. 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'>
- none:文件不背检索,且页面上的链接也不可以被查询
- noindex: 文件不被检索
- nofollow: 页面上的链接不会被查询
- all: 文件将被检索, 且页面上的链接可以被查询
- index: 文件将被检索
- 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 属性值:
- width: 宽度(数值或者/device-width 设备宽度)
- height: 高度(数值或者 device-height 设备高度)
- initial-scale: 初始的缩放比例 , 范围从0-10
- minimum-scale: 允许用户缩放到的最小比例
- maximum-scale: 允许用户缩放到的最大比例
- 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 的值有
- black-translucent
- default
- 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" />