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 [email protected] -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/mqyqingfeng/Blog

微信：「mqyqingfeng」，進冴羽的讀者群，

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝，如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/445569.html

標籤：其他

上一篇：前端面試題（1）—— HTML語意化

下一篇：HTML+CSS制作博客園主頁