The purpose of this paper is to collect the current mainstream metaconfigurations, to facilitate developers to quickly develop and debug. Here we will not do a variety of metain-depth analysis, only a brief introduction, let everyone know this stuff.

meta Brief

metaUsed to describe the HTMLdocument's metadata. Commonly used to specify page description, keywords, authors and other metadata.
Metadata can be used by browsers (how to display content or page loads), search engines (keywords), or other Webservice calls.
metaThe impact to some extent seo.

meta support which properties

Attributes	value	description
charset	character_set	Define the character encoding of the document.
content	text	Definitions related to the name or http-equiv attribute of the meta-information.
http-equiv	content-type default-style refresh	The associated content attributes to the HTTP header.
name	application-name author description generator keywords	Associate content attribute to a name.
scheme	format / s	HTML5 is not supported. Defines a format translation of the content attribute values.

http-equiv

metaOn the label http-equivattributes httpassociated header information, and a response header, since htmlessentially obtained by the response server. http-equivFor camouflage HTTPresponse headers. So http-equivwhat types of it? Let's look together.

value	description
cache-control	Control document caching mechanism. Allowed values are as follows: `public`: all content will be cached (the client and server can proxy cache) `private`: private cache caches only the contents (only the client can cache, the cache proxy server is unavailable) `no-cache`: not cached, provided by the server the cache validation mechanism, such as expired, and changes in content validation rules `no-store`: All the content will not be cached to the cache or `Internet`temporary file (set looks like an invalid, or that do not appear in response to the first great God who can explain under? )
content-language	Body language response. As `zh-CN`, `en-US`etc. (provided seemingly ineffective)
content-type	Returns the content `MIME`type
date	Time of the original message sent by the server, `GMT`the time format
expires	Expiration date and time of response, `GMT`time format `<meta http-equiv="expires" content="Fri, 30 Dec 2011 12:00:00 GMT">` (set seemingly ineffective)
last-modified	The last modification time of the requested resource `GMT`time format (set seemingly ineffective)
location	The recipient to redirect unsolicited `URL`position to fulfill the request or a new resource identifier (seemingly set invalid)
refresh	After you define how often to refresh the page. In seconds.
set-cookie	Create a `cookie`contains `cookie`name, `cookie`value, expiration time. (Seemingly set invalid)
window-target	To prevent others to call its own page in the framework. `<meta http-equiv="Window-target" content="_top">` (Seemingly set invalid)
Pragma	向后兼容只支持 `HTTP/1.0` 协议的缓存服务器，那时候 `HTTP/1.1` 协议中的 `Cache-Control` 还没有出来。 `<meta http-equiv="Pragma" content="no-cache">` （设置了貌似无效）

注意：以上都是在chrome浏览器最新版本， vue dev环境下测试的，不代表所有浏览器和服务器表现。

常见meta

指定字符编码
```
<meta charset="UTF-8">
```

IE杀手，推荐所有前端工程师采用，让我们干掉IE的市场份额。

<!-- renderer适用于国产双内核浏览器 -->
<!-- 使用Blink（Webkit） -->
<meta name="renderer" content="webkit">
<!-- IE兼容模式，使用ie低版本兼容 -->
<meta name="renderer" content="ie-comp">
<!-- IE标准模式，使用ie高版本兼容 -->
<meta name="renderer" content="ie-stand">
<!-- force-rendering适用于其他双内核浏览器 -->
<meta name="force-rendering" content="webkit">
<!-- 强化对IE的兼容性，强制IE使用最新版标准模式渲染或者使用Chrome Frame渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

viewport常见设置，一般适用于移动端。视口宽度设为理想宽度，禁止缩放。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

meta三剑客

<meta name="description" content="Tusi博客,专注大前端技术架构与分享,关注用户体验">
<meta name="keyword" content="Tusi博客,web前端,nodejs全栈,响应式,用户体验">
<meta name="author" content="Tusi">

UC浏览器私有meta

<!-- 横屏/竖屏 -->
<meta name="screen-orientation" content="landscape|portrait">
<!-- 全屏 -->
<meta name="full-screen" content="yes">
<!-- 缩放不出滚动条 -->
<meta name="viewport" content="uc-fitscreen=yes|no">
<!-- 排版，fitscreen简化页面，适合阅读省流量，standard模式和标准浏览器一致 -->
<meta name="layoutmode" content="fitscreen|standard" 
<!-- 夜间模式的启用和禁用 -->
<meta name="nightmode" content="enable|disable"/>
<!-- 强制图片显示 -->
<meta name="imagemode" content="force"/>
<!-- 强制图片显示，只作用于单图 -->
<img src="..." show="force">
<!-- 应用模式,默认全屏，禁止长按菜单，禁止手势，标准排版，以及强制图片显示。 -->
<meta name="browsermode" content="application">

QQ浏览器X5内核私有meta（现在微信内置浏览器的内核也是X5哦）

<!-- 横屏/竖屏 -->
<meta name="x5-orientation" content="landscape|portrait">
<!-- 全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- 应用模式 -->
<meta name="x5-page-mode" content="app">

苹果机适配

<!-- "添加到主屏幕“后，全屏显示 -->
<meta name="apple-touch-fullscreen" content="yes">
<!-- 隐藏菜单栏和状态栏，类似于应用模式 -->
<meta name="apple-mobile-web-app-capable" content="yes|no">
<!-- 设置状态栏颜色，貌似只有default白色，black黑色，black-translucent灰色半透明 -->
<meta name=”apple-mobile-web-app-status-bar-style” content=black”>
<!-- 取消电话号码识别，防止误触拨号 -->
<meta name="format-detection" content="telephone=no">

其他优化和适配手段

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">

<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

<!-- robots 用来告诉搜索机器人哪些页面需要被检索 -->
<!-- index 搜索引擎抓取这个页面 -->
<!-- noindex 搜索引擎不抓取这个页面 -->
<!-- follow 抓取外链 -->
<!-- nofollow 不抓取外链 -->
<meta name="robots" content="index,follow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,follow">
<meta name="robots" content="noindex,nofollow">

<!-- referrer 控制http请求头的referer，暂时没想到什么实际应用场景 -->
<!-- no-referrer 不发referer -->
<!-- origin 只发送origin部分 -->
<!-- no-referrer-when-downgrade 默认值，当目的地是先验安全的(https->https)则发送origin作为 referrer，但是当目的地是较不安全的(https->http)时则不发送referrer -->。
<!-- origin-when-crossorigin 在同源请求下，发送完整的URL(不含查询参数)，其他情况下则仅发送当前文档的origin -->
<!-- unsafe-URL 在同源请求下，发送完整的URL(不含查询参数) -->
origin-when-crossorigin
<meta name="referrer" content="no-referrer">

<!-- og: Open Graph Protocol，一种友好的配置，让自己的网站在社交网络分享中更得心应手，更多的配置可以去自行搜索 -->
<!-- og:type 告诉SNS，我这是一个什么类型的网站 -->
<meta property=”og:type” content=”article”/>
<!-- og:title 告诉SNS，分享时告诉用户我这个网站的标题是什么，别自己瞎搞个标题 -->
<meta property=”og:title” content=”Tusi博客”/>
<meta property=”og:url” content=”https://blog.wbjiang.cn”/>
<!-- og:image 缩略图 -->
<meta property=”og:image” content=”/static/imgs/thumbnail.png”/>
<meta property=”og:description” content=”专注于大前端技术架构与分享，关注用户体验”/>

首发链接

扫一扫下方小程序码或搜索Tusi博客，即刻阅读最新文章！

Tusi博客

Soon is the most complete history of meta Daquan

meta Brief

meta support which properties

http-equiv

常见meta

Guess you like