前言
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">
........