meta标签 · 前端笔记

[TOC] ## 基本标签 ### **使用 HTML5 doctype** 不区分大小写。 ``` <!DOCTYPE html>  ``` ### **meta** | 属性 | 描述 | | :--- | :--- | | name | 把 content 属性连接到某个名称。 | | content | 设置或返回元素的 content 属性的值。 | | httpEquiv | 把 content 属性连接到一个 HTTP 头部。 | ### 字符编码 #### **声明文档使用的字符编码** ``` <meta charset='utf-8'> ``` 简体中文 ``` <meta charset='utf-8'> ``` 繁体中文 ``` <html lang="zh-cmn-Hans"> ``` 很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如： ` 菠萝和鳳梨其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为黄梨。 ` **优先使用 IE 最新版本和 Chrome** ``` <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ``` ### SEO 优化 #### **页面重定向和刷新** content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚） ``` <meta http-equiv="refresh" content="0;url=" /> ``` #### **页面描述** 每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。[文档](http://msdn.microsoft.com/zh-cn/library/ff723911%28v=expression.40%29.aspx) ``` <meta name="description" content="不超过150个字符"> ``` #### **页面关键词** ``` <meta name="keywords" content=""> ``` #### **定义页面标题** ``` <title>标题</title> ``` #### **定义网页作者** ``` <meta name="author" content="name, email@gmail.com"> ``` #### **定义网页搜索引擎索引方式** content值是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。[文档](http://msdn.microsoft.com/zh-cn/library/ff724037%28v=expression.40%29.aspx) ``` <meta name="robots" content="index,follow"> ``` #### **定义版权** ``` <meta name="copyright" content="本网站版权归CSDN所有"> ``` #### **定义编辑器** ``` <meta name="generator" content="PCDATA|FrontPage|"> ``` #### **重访** 通知搜索引擎多少天访问一次 ``` <meta name="revisit-after" content="7 days" > ``` ### 可选标签 #### 为移动设备添加 viewport ``` <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> ``` width=device-width会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边。 [http://bigc.at/ios-webapp-viewport-meta.orz](http://bigc.at/ios-webapp-viewport-meta.orz) content 参数： | **width** | viewport 宽度\(数值/device-width\) | | :--- | :--- | | ** height** | viewport 高度\(数值/device-height\) | | ** initial-scale** | 初始缩放比例 | | ** maximum-scale ** | 最大缩放比例 | | ** minimum-scale** | 最小缩放比例 | | ** user-scalable** | 是否允许用户缩放\(yes/no\) | | ** minimal-ui** | iOS 7.1 beta 2 中新增属性（`注意：iOS8 中已经删除`），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"> | #### 添加到主屏后的标题（iOS 6 新增） ``` <meta name="apple-mobile-web-app-title" content="标题"> ``` #### 是否启用 WebApp 全屏模式 ``` <meta name="apple-mobile-web-app-capable" content="yes"> ``` #### 设置状态栏的背景颜色 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">  只有在 "apple-mobile-web-app-capable" content="yes" 时生效 content 参数： | 值 | 描述 | | :--- | :--- | | default | 默认值。 | | black | 状态栏背景是黑色。 | | black-translucent | 状态栏背景是黑色半透明。 | 如果设置为 `default`或 `black`,网页内容从状态栏底部开始。如果设置为 `black-translucent`,网页内容充满整个屏幕，顶部会被状态栏遮挡。 #### 禁止数字识自动别为电话号码 ``` <meta name="format-detection" content="telephone=no"> ``` #### 禁止自动自动识别地址 ``` <meta name="format-detection" content="address=no"> ``` #### 禁止自动自动识别日期 ``` <meta name="format-detection" content="date=no"> ``` #### 禁止自动自动识别 Email ``` <meta name="format-detection" content="email=no"> ``` #### **添加智能 App 广告条 Smart App Banner\(iOS6+Safari\)** 告诉浏览器这个网站对应的app，并在页面上显示下载banner，需要注意的是Smart App Banners标签不能用在frame框架内部，否则不起作用。 ``` <meta name="apple-itunes-app" content="app-id=app-id, affiliate-data=myAffiliateData, app-argument=myURL"> ``` 参考推特的写法 ``` <meta name="apple-itunes-app" content="app-id=333903271, app-argument=twitter://timeline, affiliate-data=partnerId=30&siteID=UkOLawSuc90&u1=tw-44c06a9f3dde70bac326583e550d2f3dafd9cf56a0f96e6e639cf2155"> ``` content 参数： | 属性 | 描述 | | :--- | :--- | | app-id | APP的唯一标识\(必选\) | | affiliate-data | iTunes 会员数据\(可选\) | | app-argument | 一个为native app提供了context的URL\(可选\) | #### **iOS 图标** rel 参数： `apple-touch-icon`：图片自动处理成圆角和高光等效果。 `apple-touch-icon-precomposed`：禁止系统自动添加效果，直接显示设计原图。 * iPhone 和 iTouch，默认 57x57 像素，必须有 ``` <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> ``` * iPad，72x72 像素，可以没有，但推荐有 ``` <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"> ``` * Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 ``` <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"> ``` * Retina iPad，144x144 像素，可以没有，但推荐有 ``` <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"> ``` 官方文档：[https://developer.apple.com/library/ios/qa/qa1686/\_index.html](https://developer.apple.com/library/ios/qa/qa1686/_index.html) 参考文章：[http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/](http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/) **iOS 启动画面** * iPad 的启动画面是不包括状态栏区域的。 * iPad 竖屏 768 x 1004（标准分辨率） ``` <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"> ``` * iPad 竖屏 1536x2008（Retina） ``` <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"> ``` * iPad 横屏 1024x748（标准分辨率） ``` <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"> ``` * iPad 横屏 2048x1496（Retina） ``` <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"> ``` * iPhone 和 iPod touch 的启动画面是包含状态栏区域的。 * iPhone/iPod Touch 竖屏 320x480 \(标准分辨率\) ``` <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"> ``` * iPhone/iPod Touch 竖屏 640x960 \(Retina\) ``` <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"> ``` * iPhone 5/iPod Touch 5 竖屏 640x1136 \(Retina\) ``` <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"> ``` 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）[文档](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html) #### Android * **设置显示分辨率** ``` <meta name="viewport" content="target-densitydpi=device-dpi" /> ``` target-densitydpi 的值： | 值 | 描述 | | :--- | :--- | | device-dpi | 使用设备原本的 dpi 作为目标 dp。不会发生默认缩放。 | | high-dpi | 使用hdpi 作为目标 dpi。中等像素密度和低像素密度设备相应缩小。 | | medium-dpi | 使用mdpi作为目标 dpi。高像素密度设备相应放大，像素密度设备相应缩小。这是默认的target density. | | low-dpi | 使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。 | | 200 | 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。 | * 禁止android识别邮箱 ``` <meta name="format-detection" content="email=no"/> ``` * **控制选项卡颜色** ``` <meta name="theme-color" content="#db5945"> ``` #### Windows 8 * **Windows 8 磁贴颜色** ``` <meta name="msapplication-TileColor" content="#000"/> ``` * **Windows 8 磁贴图标** ``` <meta name="msapplication-TileImage" content="icon.png"/> ``` #### [360 浏览器](http://se.360.cn/v6/help/meta.html) {#user-content-360} * **设置 360 浏览器渲染模式** `webkit` 为极速内核，`ie-comp` 为 IE 兼容内核，`ie-stand` 为 IE 标准内核。 ``` <meta name="renderer" content="webkit|ie-comp|ie-stand"> ``` #### [UC 浏览器](http://www.uc.cn/business/developer/) * **设置屏幕方向**` portrait`为横屏，`landscape`为竖屏。 `portrait` 为横屏，`landscape` 为竖屏。 ``` <meta name="renderer" content="webkit|ie-comp|ie-stand"> ``` * **设置全屏** ``` <meta name="full-screen" content="yes"> ``` * **设置适应屏幕排版（缩放是否显示滚动条）** UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 `uc-fitscreen=yes`，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。 ``` <meta name="screen-orientation" content="portrait|landscape"> ``` * **排版模式** UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。 ``` <meta name="layoutmode" content="fitscreen|standard"> ``` * **夜间模式** 可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂，由浏览器实现的单一夜间模式不一定能够适应所有情况\(例如游戏应用\)，因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式，自行设计更适合用户使用的夜间模式。注意：页面内的 `frame/iframe` 中的夜间模式的 `meta` 不生效。 ``` <meta name="nightmode" content="enable|disable"> ``` * **整页图片强制显示** 为了节省流量及加快速度，UC 为用户提供了无图模式，在实际使用中存在页面中的图片是不可缺少的，例如验证码，地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。 \*\*注意：整页图片强制显示仅对当前页面生效，对页面内的 `frame/iframe` 不生效，也不影响前进后退的页面 ``` <meta name="imagemode" content="force"> ``` * **开启应用模式** 应用模式是为方便 Web 应用及游戏开发者设置的综合开关，通过meta标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数: | 参数 | 状态 | 说明 | | :--- | :--- | :--- | | 全屏 | 生效 | 可通过 `meta` 或 JS API 调用退出全屏 | | 长按菜单 | 失效 | 可通过 JS API 调用重新生效 | | 浏览器默认手势 | 失效 | 可通过 JS API 调用重新生效 | | 排版模式 | 标准模式 | 可通过 `meta` 或 JS API 调用设置其他排版模式 | | 强制图片显示 | 生效 | / | | 夜间模式 | 失效 | 可通过 `meta` 或 JS API 调用启用夜间模式 | ``` <meta name="browsermode" content="application"> ``` #### QQ 浏览器（X5 内核） ```  <meta name="x5-orientation" content="portrait|landscape">  <meta name="x5-fullscreen" content="true">  <meta name="x5-page-mode" content="app"> ``` ### 其他 #### **添加 RSS 订阅** ``` <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"> ``` #### **添加 favicon icon** ``` <link rel="shortcut icon" type="image/ico" href="/favicon.ico"> ``` #### **禁止 Chrome 浏览器中自动提示翻译** 更多：[http://www.w3.org/International/questions/qa-translate-flag](http://www.w3.org/International/questions/qa-translate-flag) ``` <meta name="google" value="notranslate"> ``` #### **禁止百度转码** ``` <meta http-equiv="Cache-Control" content="no-siteapp"> ``` #### **UC强制全屏** ``` <meta name="full-screen" content="yes"> ``` #### **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-highlig content="no”> ``` #### **启用360浏览器的极速模式\(webkit\)** ``` <meta name="renderer" content="webkit"> ```