【总结】常⽤的meta标签有哪些

meta标签由name和content属性定义，用来描述网页文档的属性，如网页的作者、网页的描述、关键词等。除了HTTP标准固定了一些name作为大家使用的共识外，开发者还可以自定义name。以下是一些常用的meta标签：

一、字符编码与文档类型

1. charset：用来描述HTML文档的编码类型。例如，<meta charset="UTF-8">。这是HTML5中推荐设定网页字符集的方式。在旧的HTML中，也使用<meta http-equiv="content-type" content="text/html;charset=UTF-8">来设定，但现已不推荐。
2. Content-Script-Type：定义脚本的类型。例如，<meta http-equiv="Content-Script-Type" content="text/javascript">。

二、SEO优化

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

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

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

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

三、移动端适配

1. 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。

四、页面控制与行为

1. refresh：页面重定向和刷新。例如，<meta http-equiv="refresh" content="0;url=http://www.example.com">，表示0秒后刷新并跳转到指定的URL。
2. expires：用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。例如，<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT">。但请注意，这个标签在现代Web开发中已较少使用，因为HTTP协议中的缓存控制机制更为灵活和强大。
3. cache-control：指定请求和响应遵循的缓存机制。例如，<meta http-equiv="cache-control" content="no-cache">。这个标签可以指导浏览器如何缓存某个响应以及缓存多长时间。
4. Pragma：禁止从本地缓存中读取页面。例如，<meta http-equiv="Pragma" content="no-cache">。但同样地，这个标签在现代Web开发中已较少使用，因为cache-control提供了更精细的控制。
5. format-detection：用于设置浏览器如何解析页面中的电话号码、邮箱地址和地址等信息。例如，<meta name="format-detection" content="telephone=no,email=no,address=no">，表示禁止浏览器自动将数字识别为电话号码、禁止识别邮箱地址以及禁止跳转至地图。

五、特定浏览器设置

1. screen-orientation：设置屏幕方向。例如，UC浏览器可以使用<meta name="screen-orientation" content="portrait">来强制竖屏显示。
2. full-screen：设置全屏模式。例如，UC浏览器和QQ浏览器可以使用相应的meta标签来强制全屏显示。
3. x5-orientation和x5-fullscreen：QQ浏览器的特定设置，用于控制屏幕方向和全屏模式。
4. apple-mobile-web-app-capable：IOS设备上的WebApp全屏模式设置。例如，<meta name="apple-mobile-web-app-capable" content="yes">表示启用WebApp全屏模式。
5. apple-mobile-web-app-status-bar-style：IOS全屏模式下隐藏状态栏或设置状态栏颜色。
6. apple-mobile-web-app-title：IOS添加到主屏后的标题设置。
7. apple-itunes-app：IOS添加智能App广告条设置。
8. render和force-rendering：强制浏览器使用特定的内核渲染页面。例如，<meta name="render" content="webkit">可以强制360浏览器等国产双核浏览器使用WebKit内核渲染页面。

综上所述，meta标签在Web开发中扮演着重要的角色，它们可以帮助开发者更好地控制网页的行为、优化SEO以及提高用户体验。