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

清疚 2022-05-22 00:42 285阅读 0赞

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

一、meta的作用：

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

二、直接看淘宝中的meta代码吧

1>、

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

！注意：这个charset一定要写第一行，不然就可能产生乱码问题

charset的写法除了上面淘宝的写法，还可以写成下面的方式（和上面的方法是等效的）

2>、

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

常用的有如下：

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

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

3>、

这句代码，简单点来说，就是强制浏览器使用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_Webkit]、[浏览器内核控制标签meta说明][meta]

4>、

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

想要看看的，请点击[meta标签使用大全][meta 1]

5>、

这个就很好理解了description，描述。有一个不超过 150 个字符且能准确反映网页内容的描述标签。

6>、

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

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

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

[前端meta用法大全][meta 2]、[meta标签的作用整理][meta 3]

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

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

[meta_Webkit]: https://jingyan.baidu.com/article/0f5fb09924dae56d8334ea16.html
[meta]: http://se.360.cn/v6/help/meta.html
[meta 1]: http://www.mamicode.com/info-detail-1471811.html
[meta 2]: https://www.jianshu.com/p/850d2a209ba8
[meta 3]: https://blog.csdn.net/yc123h/article/details/51356143