VuePress 部落格之 SEO 優化（一）之 sitemap 與搜尋引擎收錄

前言

在《一篇帶你用 VuePress + Github Pages 搭建部落格》中，我們使用 VuePress 搭建了一個部落格，最終的效果檢視：TypeScript 中文文件。

本篇講講如何進行 SEO 優化。

1. 生成 sitemap

1.1 安裝

yarn add vuepress-plugin-sitemap -D

1.2 修改 config.js

// .vuepress/config.js
module.exports = {
  plugins: {
    'sitemap': {
      hostname: 'https://ts.yayujs.com'
    },
  }
}

1.3 如果生成失敗

如果 build 的時候，生成失敗：

這可能是因為你設定了 lastUpdated 或者使用了 @vuepress/last-updated 外掛，當兩個一起用的時候，因為時間物件的緣故，產生了報錯，我們搜尋 vuepress-plugin-sitemap 的 issues，可以找到一個解決方法，我們修改一下 config.js：

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

1.4 build 成功

如果 build 成功，我們則會在 dist 目錄裡看到一個 sitemap.xml，大致類似於這種結構：

<?xml version="1.0" encoding="utf-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  <url>
    <loc>https://ts.yayujs.com/learn-typescript/</loc>
    <lastmod>2022-01-05T16:00:00.000Z</lastmod>
    <changefreq>daily</changefreq>
  </url>
  <url>
    <loc>https://ts.yayujs.com/learn-typescript/handbook/ConditionalTypes.html</loc>
    <lastmod>2022-01-05T16:00:00.000Z</lastmod>
    <changefreq>daily</changefreq>
  </url>
</urlset>

1.5 sitemap 地址

我們部署到伺服器上，就可以獲得一個 sitemap 地址，比如我的就是：

https://ts.yayujs.com/learn-typescript/sitemap.xml

有了這樣一個 sitemap 地址，我們可以方便的提交給各個搜尋引擎平臺，方便根據 sitemap 抓取我們的頁面。

2. 百度收錄

2.1 新增站點

登陸百度搜尋資源平臺，進入使用者中心：

點選「新增站點」，可能需要你完善下賬戶資訊，然後會進入站點資訊填寫頁面，分為三步：

第一步：輸入站點

第二步：站點屬性

第三步：驗證網站

之所以需要驗證網站，是為了證明你是該域名的擁有者，驗證成功後，可以快捷批量新增子站點，檢視所有子站資料，無需再一一驗證子站點。

這裡我採用的是 HTML 標籤驗證的方式，根據圖中的程式碼指示，修改 vuepress 的 config.js 檔案：

// config.js
module.exports = {
    title: "title",
    description: 'description',
    head: [
        ['meta', { name: 'baidu-site-verification', content: '填寫自己的 code' }]
    ]
}

然後點選「完成驗證」，就會出現：

點選「我知道了」，就會跳轉到 HTTPS 認證這裡：

等待一天後，會顯示認證成功：

2.2 提交收錄

在站點管理頁面，點選「普通收錄」：

普通收錄工具可以向百度搜尋主動推送資源，縮短爬蟲發現網站連結的時間，不保證收錄和展現效果。

這裡提供了三種方式收錄：API 提交、sitemap、手動提交，那該如何選擇呢？參考平臺工具使用手冊：

API推送：最為快速的提交方式，建議您將站點當天新產出連結立即通過此方式推送給百度，以保證新連結可以及時被百度收錄。
sitemap：您可以定期將網站連結放到Sitemap中，然後將Sitemap提交給百度。百度會週期性的抓取檢查您提交的Sitemap，對其中的連結進行處理，但收錄速度慢於API推送。
手動提交：如果您不想通過程式提交，那麼可以採用此種方式，手動將連結提交給百度。

這裡我選擇的是 sitemap 方式，填寫上節獲得的 sitemap 地址：