关于vuepress:VuePress-博客之-SEO-优化四-Open-Graph-protocol

前言

在《一篇带你用 VuePress + Github Pages 搭建博客》中，咱们应用 VuePress 搭建了一个博客，最终的成果查看：TypeScript 中文文档。

本篇讲讲 SEO 优化中的 Open Graph protocol。

meta 标签

如果咱们关上思否任意一篇文章，比方这篇《VuePress 博客优化之减少 Vssue 评论性能》，查看 DOM 元素，咱们能够在 head 中找到这样一段 meta 标签：

咱们能够发现 name 都是以 og: 结尾，这是什么意思呢，又是什么作用呢？

其实这是 Facebook 提出的 Open Graph Protocol，官网地址：https://ogp.me/，用来标注页面类型和形容页面内容，从而不便在社交媒体中进行流传。

简略的来说，依照这个协定形容页面信息，社交网站按就会依照页面上 og 标签的内容出现给用户，因为应用宽泛，目前也曾经被搜索引擎反对，参照这个十分老的帖子的内容：

参加到 Open Graph Protocol 的益处：

• 可能正确被蜘蛛抓取您的内容到百度网页搜寻
• 帮忙您的内容更无效的在百度结构化展示
• 利用了 OG 协定将会有更丰盛的内容展示

标记示例

参照网站管理员分享指南，以下就是一个应用 OG 协定标记文章、新闻动态或博文：

<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

这些属性包含咱们在用户分享文章时具体想要出现的与文章无关的描述性元数据。

其中 og:type，示意内容的媒体类型。此标签会影响内容在动静中的显示方式。残缺的类型参阅对象类型参考文档。

这里我抉择的是 article 类型，查看 The Open Graph protocol，能够看到 article 类型下还有其余能够展现的属性：

应用 OG 协定

尽管咱们能够借助 config.js 和 Front Matter 自定义每个页面的 og 属性，但咱们也能够借助现有的插件比方 vuepress-plugin-seo 来疾速的实现

1. 装置

yarn add vuepress-plugin-seo@0.1.4 -D

留神，因为咱们应用的是 vuepress 1.x，所以对应的插件应该应用 v0.1.4，如果是用的 2.x，就装置最新的版本即可。

2. 应用

// config.js

module.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' + path,
        image: ($page, $site) => "https://www.typescriptlang.org/icons/icon-144x144.png",
        publishedAt: $page => $page.frontmatter.date && new Date($page.frontmatter.date),
        modifiedAt: $page => $page.lastUpdated && new Date($page.lastUpdated),
        }]
      ]
}

这里我依据本人的状况，自定义了一些属性的展现，要留神这里的 publishedAt，即公布工夫，是须要借助 Front Matter 以 date 为名称，写在每个 md 文件中的：

title: TypeScript 中文文档_入门进阶必备
description: TypeScript 系列文章由官网文档翻译、重难点解析、实际技巧与总结三个局部组成，预计 40 篇左右。目前已实现了官网文档 Handbooks 的翻译，正在筹备重难点解读局部。date: 2021/11/11 06:06:06

3. 程序问题

在理论开发的过程中，如果你还用到了 @vuepress/last-updated 和 sitemap，倡议依照这样的程序：

// config.js

module.exports = {
    title: 'title',
    description: 'description',
      plugins: [
      [
        '@vuepress/last-updated',
        {transformer: (timestamp, lang) => {return new Date(timestamp).toLocaleDateString();}
        }
      ],
      [
        'sitemap',
        {hostname: 'https://ts.yayujs.com'}
      ],
      ['seo', {...}]
      ]
}

否则 modifiedAt 会展现不进去。

4. 成果展现

当初咱们查看 DOM 元素，就会有 og 标签了，不仅如此，seo 这个插件还为咱们写了 twitter 标签，至于这个标签，你能够了解为这是 twitter 推出的协定，与 og 一样，都是为了不便展现。

5. 工具验证

你能够应用 Facebook Object Debugger 这个官网提供的工具进行验证：

这个工具会展当初 Facebook 分享的成果，以及提供一些正告。

系列文章

博客搭建系列是我至今写的惟一一个偏实战的系列教程，预计 20 篇左右，解说如何应用 VuePress 搭建、优化博客，并部署到 GitHub、Gitee、公有服务器等平台。本篇为第 30 篇，全系列文章地址：https://github.com/mqyqingfen…

微信：「mqyqingfeng」，进冴羽的读者群。

如果有谬误或者不谨严的中央，请务必给予斧正，非常感激。如果喜爱或者有所启发，欢送 star，对作者也是一种激励。