常用meta标签

字符编码与文档类型

charset: 用来描述HTML文档的编码类型。例如, <meta charset="UTF-8">。这是HTML5中推荐设定网页字符集的方式。在旧的HTML中, 也使用<meta http-equiv="content-type" content="text/html;charset=UTF-8">来设定, 但现已不推荐。

Content-Script-Type: 定义脚本的类型。例如, <meta http-equiv="Content-Script-Type" content="text/javascript">。

SEO优化

keywords: 页面关键词, 用于告诉搜索引擎网页的关键字。例如, <meta name="keywords" content="页面关键词">。

description: 页面描述内容, 用于告诉搜索引擎网站的主要内容。例如, <meta name="description" content="页面描述内容">。

robots: 搜索引擎索引方式, 用于设置搜索引擎爬虫对网页的抓取行为。例如, <meta name="robots" content="index,follow">。其中, content参数包括:

• all: 文件将被检索, 且页面上的链接可以被查询。
• none: 文件将不被检索, 且页面上的链接不可以被查询。
• index: 文件将被检索。
• follow: 页面上的链接可以被查询。
• noindex: 文件将不被检索, 但页面上的链接可以被查询。
• nofollow: 文件将被检索, 但页面上的链接不可以被查询。

移动端适配

viewport: 适配移动端, 可以控制视口的大小和比例。例如, <meta name="viewport" content="width=device-width, initial-scale=1.0">。其中, content参数包括:

• width: 宽度, 可以指定一个值（如600）, 或者特殊的值（如device-width, 表示设备的宽度）。
• height: 高度, 与width相对应, 指定高度。
• initial-scale: 初始缩放比例, 页面第一次加载时的缩放比例。
• maximum-scale: 允许用户缩放到的最大比例, 范围从0到10.0。
• minimum-scale: 允许用户缩放到的最小比例, 范围从0到10.0。
• user-scalable: 是否允许用户缩放, 值可以是yes或no。

页面控制与行为

refresh: 页面重定向和刷新。例如, <meta http-equiv="refresh" content="0;url=http://www.example.com">, 表示0秒后刷新并跳转到指定的URL。

expires: 用于设定网页的到期时间。一旦网页过期, 必须到服务器上重新传输。例如, <meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT">。但请注意, 这个标签在现代Web开发中已较少使用, 因为HTTP协议中的缓存控制机制更为灵活和强大。

cache-control: 指定请求和响应遵循的缓存机制。例如, <meta http-equiv="cache-control" content="no-cache">。这个标签可以指导浏览器如何缓存某个响应以及缓存多长时间。

Pragma: 禁止从本地缓存中读取页面。例如, <meta http-equiv="Pragma" content="no-cache">。但同样地, 这个标签在现代Web开发中已较少使用, 因为cache-control提供了更精细的控制。

format-detection: 用于设置浏览器如何解析页面中的电话号码、邮箱地址和地址等信息。例如, <meta name="format-detection" content="telephone=no,email=no,address=no">, 表示禁止浏览器自动将数字识别为电话号码、禁止识别邮箱地址以及禁止跳转至地图。

特定浏览器设置

screen-orientation: 设置屏幕方向。例如, UC浏览器可以使用<meta name="screen-orientation" content="portrait">来强制竖屏显示。

full-screen: 设置全屏模式。例如, UC浏览器和QQ浏览器可以使用相应的meta标签来强制全屏显示。

x5-orientation和x5-fullscreen: QQ浏览器的特定设置, 用于控制屏幕方向和全屏模式。

apple-mobile-web-app-capable: IOS设备上的WebApp全屏模式设置。例如, <meta name="apple-mobile-web-app-capable" content="yes">表示启用WebApp全屏模式。

apple-mobile-web-app-status-bar-style: IOS全屏模式下隐藏状态栏或设置状态栏颜色。

apple-mobile-web-app-title: IOS添加到主屏后的标题设置。

apple-itunes-app: IOS添加智能App广告条设置。

render和force-rendering: 强制浏览器使用特定的内核渲染页面。例如, <meta name="render" content="webkit">可以强制360浏览器等国产双核浏览器使用WebKit内核渲染页面。