「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。

作者：Mintimate

博客：www.mintimate.cn
Mintimate’s Blog，只为与你分享

Meta标签

什么是Meta标签呢？这可不是最近很火的“元宇宙”或是FB。

Meta标签，或者说Meta元素，是HTML内head标签的一部分。通常用于指定页面描述、关键字以及未在其他head元素、属性中提供的其他元数据。间接参与浏览器页面渲染，或者为搜索引擎的爬虫提供引导（进而让搜索引擎更好收录网站）。

对于包含HTML 4.01和XHTML的HTML，有四个有效的属性：content、http-equiv、name和scheme。在HTML 5下，现在有五个有效的属性，添加了charset。http-equiv用于模拟HTTP标题，并用name来嵌入元数据。

而我们SEO优化，就是针对SEO的有效属性，衍生出的keywords、description和viewport。

SEO优化

SEO优化是为了什么呢？综合前文所说，总的来说有两大作用：

• 让搜索引擎收录，用户可以使用搜索引擎搜索到你的网站。
• 让自己网站的搜索排名提高，用户使用搜索引擎可以更快找到你的网站。

有些人可能会说，直接把sitemap.xml丢到各大搜索引擎的站点之家不就好了？这样……一般只有收录的目的，排名和展示效果就看运气了。

SEO主要影响因素：网站内的外链、网站的友情链接、网站的定位和内容、网站的存在时间、网站的关键词、网站的描述。其中，前几项取决于你body标签内具体写了什么，而后几项就是我们head标签内Meta来描述，也可以提升展示效果和排名。

viewport

viewport标签，如果写响应式布局的小伙伴应该很熟悉，格式为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">

当然，content内参数你可以自定义，但是一般模版是这样。用途：

• 移动端放大并宽度自适应

部分搜索引擎爬虫（e.g.Google）判断网站的适配性，会根据viewport，对页面进行判断；所以，这个标签最好添加上：

description

description标签，用一句话或一段话来描述页面的内容和信息；比如：掘金。

<meta data-n-head="ssr" vmid="description" name="description" content="掘金是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货,其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时,掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户,我们相信你也可以在这里有所收获。">

有利于搜索引擎的爬取：

个人认为：一句话能言简意赅地描述主要内容最好，最好能涉及关键信息，比如：掘金，就是开发者、产品经理和社区。

让爬虫知道你网站页面是做什么的，进而大数据统计提升你的网站排名。

keywords

keywords标签，顾名思义就是关键词，网站页面设计的关键词，方便搜索引擎进行关键词录入。

比如我自己的个人博客网站：

这里的格式注意：词与词之间，使用半角逗号隔开

（爬虫使用split分割？）。

搜索引擎后台的统计，看看用户一般用什么关键词搜索到你的页面，进而进行更改：

其实在网站被搜索引擎收录后，强烈建议查看Bing的搜索报告，进而正反馈文章的Meta内的keywords。个人觉得，bing的搜索业务做的还是挺不错的，也支持Vue的动态爬取。可惜就是市场份额少，入局晚了～

og标签

还有一个很重要的meta类别属性：The Open Graph protocol，就是平时meta内，name为og开头的属性。

这个标签比较特殊，H5的标准是2014年确定，H4的标准更是在1994年就有了，以上的meta属性基本也是H4时候就确定了。但是og标签不一样，这个是Facebook在2010年公布的，用于社交分享。

基本属性

基本属性，基本对应网站的基本内容：

• og:title：网站页面标题。
• og:type：网站、页面类型
• og:image：页面头图
• og:url：页面地址链接

比如我博客的og标签：

<meta property="”og:title”" content="Mintimate's Blog">
<meta property="og:description" content="Mintimate's Blog为你我贡献经验，主要分享Linux的使用教程，同时也分享分享代码设计；偶尔荒腔走板聊聊Android、服务器以及程序员生活～～～">
<meta property="”og:image”" content="https://imagehost.mintimate.cn/index_img/od_banner.jpg">
<meta property="og:url" content="https://www.mintimate.cn/">

og标签的全称是：The Open Graph protocol。用处最多的就是当用户使用分享等插件工具，将网页分享到微博或者 facebook、twitter 时候，内容按照我们 OG 协议属性规定的内容呈现，以此保证信息分享更准确更符合作者所想。

更简单的理解就是分享时候的外链卡片显示……

比如：QQ就是参考OG的og:image属性设置的图片

现在越来越多的搜索引擎，也支持og（e.g. 百度在2015年支持爬取og标签）。

可选属性

可选属性就比较多了，有：

• og:audio
• og:description 
• og:determiner 
• og:locale
• og:locale:alternate 
• og:site_name
• og:video 

比较多，一般我自己用，就使用了og:description 标签，和description填写一样内容，便于分享时候读。

如果你网站是是其他工程的子网站，可以使用og:site_name进行上级网站归属标识。

END

到此，就是本次分享的全部内容了嗷。是不是还想问，Vue项目内怎么操作？其实也要具体情况具体分析，不过就meta标签动态响应来说，下次给大家介绍meta-vue组件的使用吧。

又挖一个坑～～

但是Vue项目，如果没有做预渲染，写了meta标签后，要看搜索引擎是否支持动态爬取了……（Bing的动态爬取做挺好的……）