meta标签详解（name、http-equiv、scheme、charset、各浏览器常用meta标签、常见移动端meta标签）、viewport详解

目录

meta标签

元数据

name+content

viewport

 Keywords (关键字)

Description (网页描述)

Robots (机器人向导)

Author (作者)

Copyright (版权)

Generator (编辑器)

Revisit-after (重访)

其它name可指定属性

http-equiv+content

content-security-policy

刷新重定向

声明文档使用字符编码

其它常用的 HTTP-header 值

scheme

各浏览器常用meta标签

Microsoft Internet Explorer

Google Chrome

 360浏览器

UC手机浏览器

 QQ手机浏览器

Apple iOS 

Google Android

App Links

常见移动端meta标签

---

meta标签

通常用于指定网页的描述、关键词（用于爬虫检索）、文件的最后修改作者和其他元数据。通常啊可以在meta标签中设置以下属性和值。

属性	值	描述
content	some_text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-type expires refresh（定义浏览器刷新事件，可以用于重定向） set-cookie charset(定义文档的字符编码。)	把 content 属性关联到 HTTP 头部。
name	author description keywords generator revised others	把 content 属性关联到一个名称。
scheme	some_text	定义用于翻译 content 属性值的格式。不支持。

元数据

以名称/值对的形式出现且不会显示在客户端，但是会被浏览器解析的数据。可以被使用的浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

在meta标签中通过name或http-equiv定义名称，content定义值。

name+content

viewport

用于移动端页面布局。详细作用见链接介绍。

https://blog.csdn.net/AIWWY/article/details/120499036

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 Keywords (关键字)

说明：告诉搜索引擎你网页的关键字是什么。
用法：<meta name="keywords" content="SEO优化,SEO优化教程,网站优化,搜索引擎优化教程">

Description (网页描述)

说明：Description用来告诉搜索引擎你的网页主要内容。
用法：<meta name="description" content="学习研究搜索引擎优化网提供专业的SEO优化教程，收集整理SEO优化文章、SEO优化工具，为网络营销贡献出自己的一份力量。" />

Robots (机器人向导)

说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
用法：<meta name="robots" content="All|None|Index|Noindex|Follow|Nofollow">
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；(和 "noindex, no follow" 起相同作用)
index：文件将被检索；（让robot/spider登录）
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

Author (作者)

说明：标注网页的作者或制作组
用法：<meta name="author" content="mycodewind，mycodewind@qq.com">
注意：Content可以是：你或你的制作组的名字,或Email

Copyright (版权)

说明：标注版权
用法：<meta name="copyright" content="本网站版权归CSDN所有">

Generator (编辑器)

说明：编辑器的说明
用法：<meta name="generator" content="PCDATA|FrontPage|">
注意：Content="你所用编辑器"

Revisit-after (重访)

说明：通知搜索引擎多少天访问一次
用法：<meta name="revisit-after" content="7 days" >

其它name可指定属性

最齐全的网站元数据meta标签的含义和用法_freshlover的专栏-CSDN博客

http-equiv+content

http-equiv是添加http头部内容，对一些自定义的或者需要额外添加的http头部内容，发送到浏览器中。即告诉浏览器如何解析这个页面或添加服务器发送到浏览器的http头部内容，例如我们为页面中添加如下meta标签：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

那么浏览器的头部就会包括这些（注意：只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义）:

charset:iso-8859-1
expires:31 Dec 2008

content-security-policy

csp内容安全策略，规定页面加载的内容来源。详见

前端安全-内容安全策略CSP（Content Security Policy）_YF-SOD的博客-CSDN博客

<meta http-equiv="content-security-policy" content="策略集">
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

刷新重定向

下面例子指5秒后将刷新页面，并重定向到指定页面

<meta http-equiv="Refresh" content="5;url=https://blog.csdn.net/AIWWY/article/details/116381739" />

声明文档使用字符编码

用于解决乱码问题，注意charset一定要写第一行，不然就可能会产生乱码了。

charset有两种写法：

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

其它常用的 HTTP-header 值

值	描述
cache-control	控制文档的缓存机制。 允许的值： public - 所有内容都将被缓存(客户端和代理服务器都可缓存) private - 内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存) no-cache - 不缓存 no-store - 缓存当不归档 but not archived 实例: <meta http-equiv="cache-control" content="no-cache">
content-language	响应体的语言 实例: <meta http-equiv="content-language" content="en-US">
content-type	返回内容的MIME类型 提示: 通常用于字符集的设置。 实例: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
date	原始服务器消息发出的时间 实例: <meta http-equiv="date" content="Wed, 16 Feb 2011 22:34:13 GMT">
expires	响应过期的日期和时间 实例: <meta http-equiv="expires" content="Fri, 30 Dec 2011 12:00:00 GMT">
last-modified	请求资源的最后修改时间 实例: <meta http-equiv="last-modified" content="Mon, 03 Jan 2011 17:45:57 GMT">
location	用来重定向接收方到非请求URL的位置来完成请求或标识新的资源 实例: <meta http-equiv="location" content="URL=http://www.runoob.com">
set-cookie	创建一个 cookie ，包含了 cookie 名，cookie 值，过期时间。 实例: <meta http-equiv="set-cookie" content="runoobcookie=myContent;expires=Fri, 30 Dec 2015 12:00:00 GMT; path=http://www.runoob.com">
window-target	指定要载入的框架名

scheme

设置或返回用于解释 content 属性的值的格式。

<meta name="revised" content="2011-02-03" scheme="YYYY-MM-DD">

各浏览器常用meta标签

Microsoft Internet Explorer

<!-- 优先使用最新的ie版本 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- 是否开启cleartype显示效果 -->
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- Pinned Site -->
<!-- IE 10 / Windows 8 -->
<meta name="msapplication-TileImage" content="pinned-tile-144.png">
<meta name="msapplication-TileColor" content="#009900">
<!-- IE 11 / Windows 9.1 -->
<meta name="msapplication-config" content="ieconfig.xml">

Google Chrome

<!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 禁止自动翻译 -->
<meta name="google" value="notranslate">

 360浏览器

<!-- 选择使用的浏览器解析内核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

UC手机浏览器

<!-- 将屏幕锁定在特定的方向 -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 全屏显示页面 -->
<meta name="full-screen" content="yes">
<!-- 强制图片显示，即使是"text mode" -->
<meta name="imagemode" content="force">
<!-- 应用模式，默认将全屏，禁止长按菜单，禁止手势，标准排版，强制图片显示。 -->
<meta name="browsermode" content="application">
<!-- 禁止夜间模式显示 -->
<meta name="nightmode" content="disable">
<!-- 使用适屏模式显示 -->
<meta name="layoutmode" content="fitscreen">
<!-- 当页面有太多文字时禁止缩放 -->
<meta name="wap-font-scale" content="no">

 QQ手机浏览器

<!-- 锁定屏幕在特定方向 -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 全屏显示 -->
<meta name="x5-fullscreen" content="true">
<!-- 页面将以应用模式显示 -->
<meta name="x5-page-mode" content="app">

Apple iOS 

<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
<!-- 禁止自动探测并格式化手机号码 -->
<meta name="format-detection" content="telephone=no">
<!-- Add to Home Screen添加到主屏 -->
<!-- 是否启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加到主屏后的标题 -->
<meta name="apple-mobile-web-app-title" content="App Title">

Google Android

<meta name="theme-color" content="#E64545">
<!-- 添加到主屏 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

App Links

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- More info: http://applinks.org/documentation/ -->

常见移动端meta标签

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别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">