前端接触时间也不小了,但可能很多人对meta标签依然认识不足(只知道charset=utf-8?)。
我们今天来好好分析一下meta标签的作用以及如何更好的利用meta标签做网页的SEO。
第一方面 meta标签可以用作http-equiv相关信息的设置。相当于http头的作用
1. pragma:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出
`<meta http-equiv="Pragma" content="no-cache">`
2. expries:用于设定网页的到期时间。过期即从服务器从新加载。(注意为GTM格式)
存在的问题:如果客户端与服务器端的系统时间不一致,将导致无法更新等问题。
`<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">`
3. refresh:自动刷新并指向新页面。(3表示停留3秒)
`<meta http-equiv="refresh" content="3;URL=http://www.baidu.com/">`
4. set-cookie:如果网页过期,那么存盘的cookie将被删除。
`<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/">`
5. content-Type(显示字符集的设定) :设定页面使用的字符集。
`<meta http-equiv="content-Type" content="text/html; charset=gb2312">`
6. cache-control:清除缓存(再访问这个网站要重新下载!)
`<meta http-equiv="cache-control" content="no-cache">`
第二方面 meta标签可以用作对网页的描述,有利于更好的搜索引擎优化,SEO
1、name:keywords
页面关键词,每个网页应具有描述该网页内容的一组唯一的关键字。
使用人们可能会搜索,并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短,则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。
<meta name="keywords" content="your tags" />
2、name:”robots”
robotterms是一组使用逗号(,)分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。确保正确使用nofollow和noindex属性值。
<meta name="robots" content="index,follow" /><!--
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索;
nofollow:页面上的链接不可以被查询。
-->
3、name:description
页面描述,每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
`<meta name="description" content="150 words" />`
4、name:viwport
能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->
1.width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素
2.height:高度(数值 / device-height)(范围从223 到10,000)
3.initial-scale:初始的缩放比例 (范围从>0 到10)
4.minimum-scale:允许用户缩放到的最小比例
5.maximum-scale:允许用户缩放到的最大比例
6.user-scalable:用户是否可以手动缩 (no,yes)