VuePress 部落格之 SEO 優化（四） Open Graph protocol

冴羽發表於2022-03-12
Vue優化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，對作者也是一種鼓勵。

相關文章