作为前端 你不知道的meta标签

相信点进这篇文章的读者朋友们,或多或少有些懵逼,＜meta＞标签？？？ 怎么没有听说过?？
虽然这不是一个常用标签,但是这是一个功能非常强大的标签,那么就跟随小编的脚步一起来了解一下,神奇的＜meta＞标签。

1.＜meta＞标签

＜meta＞元素可以提供与页面相关的元信息(meta-information),如针对搜索引擎和更新频率度的描述和关键词。

(1)设置文档编码

有时候页面渲染完毕后会出现乱码的情况,这时就可以通过＜meta＞标签的charset属性设置文档的编码,将以下内容插入在页面的＜head＞标签中,可以将文档的编码设置为 utf-8。当然还可以设置成很多的编码格式。

<!-- 设置文档的编码为 utf-8 -->
<meta charset="utf-8">

除了可以设置文档的编码方式外,还可以设置其他元信息方式。

(2)设置网站关键词和内容描述

通过＜meta＞的name属性和content属性可以设置网站关键词和内容描述,可以让搜索引擎了解当前网站的关键词和网站的主要内容,有利于SEO搜索引擎优化,示例如下。

<!-- 设置网站关键词 -->
<meta name="keywords" content="HTML5,css,JAVA">
<!-- 设置网站内容描述  -->
<meta name="description" content="这是小编精心烹饪的文章">

(3)设置网站的作者和版权信息

可以通过＜meta＞标签的name属性和content属性设置网站的作者和版权信息,示例如下。

<!-- 设置网站作者信息 -->
<meta name="author" content="戴某">
<!-- 设置网站版权信息  -->
<meta name="copyright" content="云创网络工作室">

(4)设置是否允许搜索引擎索引

可以通过＜meta＞标签的name属性和content属性 设置是否允许搜索引擎索引,示例如下。

<!-- 允许抓取本页和跟踪链接 -->
<meta name="robots" content="index,follow">

content 中的值决定了允许其他抓取的类型,必须同时包含是否允许索引(index)和是否跟踪链接(follow)两个值,其共有四个参数可选,组成四个组合,如下。

content取值不同的集合
index,follow ------------允许抓取本页和跟踪链接
index,nofollow ------------允许抓取本页和但不允许跟踪链接
noindex,follow ------------不允许抓取本页,但是允许跟踪链接
noindex,nofollow ------------不允许抓取本页,也不允许跟踪链接

小编还要给大家扩展两种上面情况的简写方式
(1) index follow 可以写成 all , 示例如下

<meta name="robots" content="all">

(2) noindex,nofollow 可以写成 none 示例如下。

<meta name="robots" content="none">

2.结尾

本篇博客＜meta＞标签的部分知识就介绍到这里吧,如果想更详细的了解＜meta＞标签的跟多特性各位读者朋友们可以去参考官方文档 ,后需小编会更新更多更优质的内容喜欢的小伙伴不妨点个关注。