前言
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为例
1 <!-- bilibili中定义的keywords和description --> 2 <meta name="description" content="bilibili是国内知名的视频弹幕网站，这里有最及时的动漫新番，最棒的ACG氛围，最有创意的Up主。大家可以在这里找到许多欢乐。"> 3 <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">
........