meta 标签的作用和结构

meta 标签的作用：

影响搜索引擎检索页面（SEO）

meta 标签必须有属性 content 表示需要设置的值 meta 标签还有两个可选的属性：name 和 http-equiv

name

name 属性可以用于描述，比如网页的关键词、叙述之类的，下面来看看 name 常用的字段

keywords：告诉 SEO 你页面的关键词类型
description：告诉浏览器关于你的网页的一些描述信息
viewpoint：移动端窗口相关的信息
robots：定义搜索引擎爬虫的索引关系
author：页面的作者
generator：定义网页制作的软件
copyright：版权信息
revisit-after：定义爬虫重新访问网站的时间
rerender：为一些双核浏览器准备（如360）可以指定用什么内核

基本语法

<meta name="xxx" content="xxx">

应用

/*保留历史记录以及动画效果*/
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
/*是否启用 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">
/*在网页上方显示一个app banner，提供app store下载*/
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"
/*启用360浏览器的极速模式(webkit)*/
<meta name="renderer" content="webkit">
/*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">
/*禁止自动探测并格式化手机号码*/
<meta name="format-detection" content="telephone=no">

http-equiv

http-equiv 设置的都是与 http 请求头相关的信息，设置的值会关联到 http 头部。
也就是说，浏览器在请求服务器获取 html 的时候，希望服务器在发送实际文档时，把这些字段放响应头返回给浏览器。

content-Type: 指明网页的字符集，建议使用 HTML5 出的 chartset
X-UA-Compatible：告诉浏览器以何种版本渲染页面（当然是越新越好）
refresh：表示将页面重定向到某个网页
window-target：强制页面在当前窗口以独立页面显示, 可以防止别人在框架中调用自己的页面
x-dns-prefetch-control：让 a 标签在HTTPS环境下进行 DNS 预解析
expires：页面缓存的到期时间，不能精确到秒（且若本地时间与服务端不同步，可能出现缓存失效）
pragma：禁止浏览器从本地计算机的缓存中访问页面的内容
content-secruity-policy：本质是白名单制度，明确告诉客户端，哪些外部资源可加载和执行
- script-src：外部脚本
- style-src：样式表
- img-src：图像
- media-src：媒体文件（音频和视频）
- font-src：字体文件
- object-src：插件（比如 Flash）
- child-src：框架
- frame-ancestors：嵌入的外部资源（比如 <frame> <iframe> <embed> <applet>）
- connect-src：HTTP 连接（通过 XHR、WebSockets、EventSource 等）
- worker-src：worker 脚本
- manifest-src：manifest 文件
cache-control：用于控制页面的缓存，content值如下
- no-cache：使用缓存前先向服务器请求确实是否为最新的
- no-store: 不允许缓存，每次都拿最新的
- public：缓存所有响应但是不是必须的
- private：只允许单用户缓存，不允许中继缓存
- max-age：缓存有效秒数
- no-siteapp：禁止在移动端访问时网页被转码
  
  残酷的现实： expires、pragma、cache-control 这些标签往往不会生效

基本语法

<meta name="xxx" content="xxx">

应用

<meta http-equiv="content-type" content="text/html charset=utf8">
<!--
  脚本：只信任当前域名 
  <object>标签：不信任任何URL，即不加载任何资源
  样式表：只信任cdn.example.org和third-party.org
  框架（frame）：必须使用HTTPS协议加载
  其他资源：没有限制
-->
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

参考资料

《meta标签到底是做什么的|我竟一无所知》
《那些你不知道的meta标签》
《Content Security Policy 入门教程》