VuePress 博客之 SEO 优化（四） Open Graph protocol

时间：2022-12-21 16:00:00 ogp301光电传感器

前言

在带你用一篇 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

p>注意，因为我们使用的是 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', { 
        
        ...
    	}]
  	]
}