淘宝首页中meta标签的作用整理

嗯,淘宝是啥就不介绍了哈,直接进入主题

一、meta的作用:

简单来说:<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。(提供文档字符集、使用语言、作者等基本信息,以及对关键词和网页等级的设定等)最大的作用是能够做搜索引擎优化(SEO)。

二、直接看淘宝中的meta代码吧
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<title>淘宝网 - 淘!我喜欢</title>
<meta name="spm-id" content="a21bo" />
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!" />
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />

1>、

<meta charset="utf-8" />

这里用到的是charset标签了,charset是声明文档使用的字符编码,解决乱码问题,主要用的就是它

!注意:这个charset一定要写第一行,不然就可能产生乱码问题

charset的写法除了上面淘宝的写法,还可以写成下面的方式(和上面的方法是等效的)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

2>、

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

http-equiv="X-UA-Compatible" 这是一个文档兼容模式的定义

X-UA-Compatible:是IE8新加的一个设置,对于IE8以下的浏览器是不识别的,通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。

< meta http-equiv = "X-UA-Compatible" content = "chrome=1" >用以声明当前页面用chrome内核来渲染。

Edge模式告诉IE以最高级 模式渲染文档,也就是任何IE版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。

这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果为安装GCF,则使用最高版本的IE内核进行渲染。

在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。 兼容性模式设置优先级:

meta tag > http header

常用的有如下:

<meta http-equiv="X-UA-Compatible" content="IE=7">  
#以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=8">  
#以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
#以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
<meta http-equiv="X-UA-Compatible" content="IE=7,9">  
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

360浏览器比较奇葩,看网上有很多吐槽360浏览器的,嗯,那就稍微提一嘴吧

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

默认使用兼容模式的最高版本(当前系统安装IE的最高版本或Edge)不然默认用的是IE7。

3>、

<meta name="renderer" content="webkit">

这句代码,简单点来说,就是强制浏览器使用Webkit内核

国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。

renderer:指定双核浏览器默认以何种方式渲染页面。

content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。

若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 
若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 
若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand">

360浏览器说它怎么不好怎么流氓都行,但为了前端它可是做了一件良心事:自定义了一个meta标签,可以指定360浏览器默认使用webkit内核,这样浏览效果就跟Chrome差不多了,开发代码随心应手。

!注意:这种方法只能默认设置,如果用户之前手动切换过兼容模式,那就不行了。再者就只能加个提示,检测如果是ie内核,就提示用户换个浏览器,或者切换极速模式

在查资料的时候发现了两篇关于这一属性的介绍,有兴趣的可以看看哦(真的很好)!

通过meta标签强制浏览器使用Webkit内核浏览器内核控制标签meta说明

4>、

下面这两句目前还不了解,但据查应该没有普遍适用性,查了一下meta标签的详解,也没有有关说明可能是对淘宝自己有用吧,本着科学的态度,所以就不在这里误导大家了

想要看看的,请点击meta标签使用大全

   <meta name="spm-id" content="a21bo" />
<meta name="aplus-xplug" content="NONE">

5>、

<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!" />
这个就很好理解了description,描述。有一个不超过 150 个字符且能准确反映网页内容的描述标签。

6>、

<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />

keyword:关键字。描述该网页内容的一组唯一的关键字。

使用人们可能会搜索的关键词,并能准确描述网页上所提供信息的描述性和代表性关键字及短语。

嗯,附上在查阅的时候看到的我认为比较好的文章(有兴趣的可以看看哦,查阅了很多文章,下面是我挑出的比较好的文章):

前端meta用法大全meta标签的作用整理

还有我前面提到的两个,再附一遍通过meta标签强制浏览器使用Webkit内核浏览器内核控制标签meta说明


ok,完毕,嗯、互相学习,共同进步,有问题欢迎提出或指正哦


猜你喜欢

转载自blog.csdn.net/lhjuejiang/article/details/80656531
今日推荐