前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，最终效果查看：TypeScript中文文档。这篇文章讲的是SEO优化中的OpenGraph协议。metatags如果我们打开四福的任何一篇文章，比如这篇《VuePress 博客优化之增加 Vssue 评论功能》，查看DOM元素，可以在head中找到这样一个metatags：可以发现名字以og:开头，这是什么意思？，作用是什么？其实这是Facebook提出的OpenGraphProtocol，官方地址：https://ogp.me/，用于标记页面类型和描述页面内容，方便在社交媒体中传播.简单来说，就是社交网站按照这个约定来描述页面信息，根据页面上og标签的内容呈现给用户。由于它的广泛使用，它也得到了搜索引擎的支持。参考这个很老的帖子的内容：参与使用OpenGraphProtocol的好处： 可以被蜘蛛正确抓取。您的内容可以在百度网页上搜索到。它可以帮助您的内容更有效地在百度的结构中展示。应用OG协议会有更丰富的内容。站长分享指南，以下是使用OG协议的文章、新闻提要或博文：这些属性包括我们希望在用户共享文章元数据时专门针对该文章呈现的描述性信息。其中og:type表示内容的媒体类型。此标签会影响内容在Feed中的显示方式。有关完整类型，请参阅对象类型参考。这里我选择文章类型，查看TheOpenGraph协议，可以看到文章类型下还有其他属性可以显示：使用OG协议虽然我们可以借助config自定义每个页面的og属性.js和FrontMatter，但是我们也可以利用现有的插件如vuepress-plugin-seo来快速实现1.安装yarnaddvuepress-plugin-seo@0.1.4-D注意，因为我们使用的是vuepress1.x，所以对应的插件应该使用v0.1.4，如果是2.x，安装最新版本即可。2.使用//config.jsmodule.exports={title:'title',description:'description',plugins:[['seo',{siteTitle:(_,$site)=>'TypeScript中文文档',title:$page=>$page.title,description:$page=>$page.frontmatter.description,author:(_,$site)=>'鼻羽',type:$page=>'article',url:(_,$site,path)=>'https://ts.yayujs.com'+路径,图片:($page,$site)=>"https://www.typescriptlang.org/icons/icon-144x144.png",publishedAt:$page=>$page.frontmatter.date&&newDate($page.frontmatter.date),modifiedAt:$page=>$page.lastUpdated&&newDate($page.lastUpdated),}]]}这里我根据自己的情况自定义了一些属性的显示。注意这里的publishedAt，即发布时间，需要借助FrontMatter在每个md文件中写上日期名称：共三部分：官方文档翻译、重点难点分析、实用技巧与总结，预计40篇左右。目前官方文档Handbooks的翻译已经完成，重点难点解读正在准备中。日期：2021/11/1106:06:063。顺序问题在实际开发过程中，如果同时使用@vuepress/last-updated和sitemap，建议按照这个顺序：//config.jsmodule.exports={title:'title',description:'description',插件：[['@vuepress/last-updated',{transformer:(timestamp,lang)=>{returnnewDate(timestamp).toLocaleDateString();}}],['sitemap',{hostname:'https://ts.yayujs.com'}],['seo',{...}]]}否则不会显示modifiedAt。4.效果展示现在我们看DOM元素，会有一个og标签。不仅如此，seo插件还为我们写了一个twitter标签。至于这个标签，你可以理解为twitter推出的一个协议，就像og一样。全部用于展示目的。5.工具验证可以使用官方提供的FacebookObjectDebugger工具进行验证：该工具会显示在Facebook上分享的效果，并提供一些警告。系列文章博客搭建系列是我目前为止写的唯一实用系列教程。预计20篇左右，讲解如何使用VuePress搭建和优化博客，并部署到GitHub、Gitee、私服等平台。本文为第30篇，全系列文章地址：https://github.com/mqyqingfen...微信：“mqyqingfeng”，进入世优读者群。如有错误或不准确的地方，请务必指正，万分感谢。如果你喜欢或者有启发，欢迎star，这也是对作者的鼓励。
