你不知道的meta标签

前言

　　meta标签可以用来做seo优化、指定移动端viewport的展现形式、设置http请求、告诉浏览器缓存静态资源的模式等等。今天整理一下使用meta标签实用的，常见的场景。

meta标签的组成

　　meta标签的作用取决于我们为它定义的属性和属性值。

　　name：把content属性连接到某个名称。

　　content：定义与 http-equiv 或 name 属性相关的信息。

　　http-equiv：把content属性关联到http头部。

　　charset：定义文档的字符编码。

指定浏览器缓存模式

　　这里有个坑。在项目开发阶段后台接口的数据结构经常会发生变化，但接口名称不变。浏览器会缓存之前请求过来的数据，新的请求接口名称不变的话，浏览器就会使用缓存。有一次我修改同一段代码无数次，页面上的显示就是不变。然后开始疯狂检查代码，看了一遍又一遍，纠结两个多小时，才发现是浏览器缓存在做妖。

　　http-equiv的值中的cache-control指定请求和响应的缓存机制，在content中指定具体描述

　　》no-cache:先发送请求，与服务器确认该资源是否被更改，如未被更改，则使用缓存。

　　》no-store:不准缓存，每次都去服务器，下载完整的响应。开发测试时经常刷着就页面就不更了。

　　》public：缓存所有响应。

　　》private：只为单个用户缓存，不容许任何中继进行缓存。

　　》maxage：当前请求开始，该响应在多久内能被缓存和重用，而不用去服务器重新请求。

<-- 不准缓存，每次都去服务器下载完整的响应 -->
<meta http-equiv="cache-control" content="no-store">

seo优化

　　从前端的角度做seo优化基本就是在meta标签中定义两个部分的内容

　　页面关键词（keywords）：每个网页都应该有一组描述网页内容的关键词，这些关键词是提供给搜索引擎进行搜索匹配的。

　　页面描述（description）：对网页内容的描述，不超过150个字符。这个部分会被搜索引擎抓出来作为网站概要显示出来。

　　这里以百度和bilibili为例

　　

 <!-- bilibili中定义的keywords和description -->
 <meta name="description" content="bilibili是国内知名的视频弹幕网站，这里有最及时的动漫新番，最棒的ACG氛围，最有创意的Up主。大家可以在这里找到许多欢乐。">
 <meta name="keywords" content="Bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,...">

让浏览器优先使用最新的版本

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

让多核浏览器优先使用webkit内核 渲染页面

<meta name="renderer" content="webkit|ie-comp|ie-stand">

........