Hexo Blog 05：NexT 主題 SEO 相關設置

發表於 更新於 分類於 ， 閱讀次數： Disqus： 文章字數： 1.8k 所需閱讀時間 ≈ 6 分鐘

前一篇系列文章：NexT 主題加入留言與聊天室機制 讓我們有機會透過留言與聊天室跟讀者互動，這回來讓我們的文章能真正接觸到讀者，並且綜觀全局知曉到底有沒有讀者來過吧!

目標

  • 完成 Blog 的 SEO 相關設置

  • 使用 Google Analytics 進行 Blog 流量監測

環境

Hexo: 6.3.0

hexo-cli: 4.3.0

NexT: 8.14.0

SEO 設置

想要讓建置好的 Blog 被需要的人們看到，搜尋引擎優化 (Search Engine Optimization, SEO) 是必要的功課。而要讓我們的 Blog 被搜尋引擎收錄的第一步就是要驗證網站的所有權。

驗證網站擁有權

NexT 提供了一些方便我們進行 SEO 作業的 接口，主要是方便我們對各搜尋引擎驗證網站所有權，適配的搜尋引擎有：Google、Bing、Yandex、Baidu。其中 Yandex 主要是服務俄羅斯，所以我直接放棄使用；Baidu 是服務中國，雖然同是中文圈，但它申請服務需要使用中國境內手機號碼才能申請，所以我被迫放棄。而 Bing 的驗證可以直接以通過驗證的 Google 帳號來授權，因此最終我們只需要申請 Google 的驗證就好。

於 Google Search Console 驗證網站擁有權：

以網址前置字元進行驗證

輸入 Blog 網址後點擊 繼續

驗證擁有權

選擇 HTML 標記

  • 複製 HTML 程式碼中的 content 內容（不含引號），貼進 NexT 主題設置中：
_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# ---------------------------------------------------------------
# SEO Settings
# See: https://theme-next.js.org/docs/theme-settings/seo
# ---------------------------------------------------------------

# If true, site-subtitle will be added to the title of index page.
# Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
index_with_subtitle: true

# Automatically add external URL with Base64 encrypt & decrypt.
exturl: true
# If true, an icon will be attached to each external URL
exturl_icon: true

# Google Webmaster tools verification.
# See: https://developers.google.com/search
google_site_verification: XXXXXXXXXXXXXXXXXXXXXXX # 僅填入 content 部分：<meta name="google-site-verification" content="XXXXXXXXXXXXXXXXXXXXXXX">
  • 重新部署 Blog 後，回到 Google Search Console 點擊 驗證 即可完成驗證。

於 Bing Webmaster Tools 驗證網站擁有權：

選擇 從 GSC 匯入您的網站，即可簡單完成。

點擊 匯入

驗證完所有權後，接著必須讓搜尋引擎知道我們的 Blog 有什麼內容。執行的方式簡單粗暴，就是我們主動提交網站資訊給搜尋引擎，不這樣做就只能慢慢等待他們的網路爬蟲爬到我們的 Blog 了。

提交網站資訊

最理想的方式就是提交網站地圖 (sitemap) 位置，讓搜尋引擎定期透過爬蟲方式來更新我們 Blog 的最新索引狀態。

提交 sitemap

使用 hexo-generator-sitemap 插件可以在部署 Blog 時生成 sitemap 於特定路徑：

  1. 於專案根目錄安裝：

    command line tool
    1
    $ npm install hexo-generator-sitemap --save

  2. 修改主題配置：

    _config.next.yml
    1
    2
    3
    4
    5
    6
    7
    # hexo-generator-sitemap: https://github.com/hexojs/hexo-generator-sitemap
    sitemap:
      path:
        - sitemap.xml
      rel: false
      tags: true
      categories: true

  3. 重新部署 Blog 後，前往 Blog 網頁，在網址後加上 /sitemap.xml，即可看到 sitemap 的 xml 畫面。

  4. 將 sitemap 路徑加入 Google Search Console 與 Bing Webmaster Tools。

Google Search Console

Bing Webmaster Tools

加入 sitemap 後，理想上搜尋引擎就能定期透過他們的網路爬蟲自動更新我們 Blog 的索引狀態。不過我使用 Google 加入sitemap 後一直都是顯示 無法擷取，保險起見還是主動提交網址吧。

2023/01/01 更新：
Google 終於讀了我的 sitemap

提交網址

sitemap 中包含我們 Blog 中所有文章的網址，因此交給搜尋引擎爬蟲是最省力的，但當 sitemap 方式不可靠時，就必須將每篇文章的網址一一提交給搜尋引擎了。

手動提交

就是暴力解，每次發布新文章都去各搜尋引擎提交網址，不同搜尋引擎這功能的名稱小有不同：

Google Search Console：網址審查。

Bing Webmaster Tools：URL 檢查。

自動提交

手動畢竟還是太惱人了，好險有前輩們提供的自動提交網址審查插件。

這裡列出我使用過的兩種：

hexo-seo-autopush

使用方法它的文檔就很清楚了，在此列一些它的特點：

  • 每日定時推送 (預設是中午12點)。
  • 點擊 Blog 的 GitHub 倉儲的 Star 即可手動推送。
  • 使用 GitHub Actions 機制完成。
  • keys 敏感資訊透過 GitHub Secrets 保存，不存在自己的設定檔中。
  • 須注意 GitHub 倉儲的 default branch 需要設成存放靜態網頁的 branch 才會運作，不過跟著我建議的方法建置就不用思考這問題 使用 Hexo 迅速在 GitHub Pages 展開 Blog 旅程。
hexo-submit-urls-to-search-engine

申請 keys 的方法需要參照 hexo-seo-autopush 的文件，特點為每次部署 Blog 時都會推送網址去審查。

最終我自己是只採用 hexo-seo-autopush，因為一天推送一次網址審查其實就夠多了，真有額外需要也有提供手動執行的方式。

至此，SEO的基本設定就完成了，新文章發布後什麼都不做，半週內即可在搜尋引擎搜尋到自己的文章，至於如何提升在搜尋引擎中的排序優先度就是其他課題了。

想知道自己的 Blog 被搜尋引擎收錄了沒只需要在搜尋引擎搜尋： site:自己網址 （注意：冒號後面沒有空格！）

Google Analytics

各搜尋引擎的 Webmaster Tools 都有提供很不錯的網站成效分析，其實基本上就夠用了，不過沒有人在嫌多的吧?

Google Analytics 提供的資訊更多，對於之後可能套用更多 Google 工具的人來說，就順手加上吧，畢竟之後也一定會用到。

前往 Google Analytics 創建帳號，如果先前有用了其他 Google 服務的話記得直接使用，或是將他們關聯起來，取得 Google track ID 後貼進主題設定檔及可：

_config.next.yml
1
2
3
4
5
6
7
# Google Analytics
# See: https://analytics.google.com
google_analytics:
  tracking_id: OOOOO # <app_id>
  # By default, NexT will load an external gtag.js script on your site.
  # If you only need the pageview feature, set the following option to true to get a better performance.
  only_pageview: false

設定好後 Google 就可以追蹤我們 Blog 的表現，我們可以依據這些數據知曉各文章的觸及效果如何，以調整我們的 SEO 策略。

其他 SEO 相關插件與文件設置

hexo-filter-nofollow

對外部連結進行必要修飾，有助於優化安全、隱私和 SEO。

robots.txt

告訴搜尋引擎爬蟲網站中哪些地方能去或不能去。

生成各頁面唯一 URL，可視需求使用。

結語

至此我們的 Blog 建設就完成得差不多了，未來大致就是好好學怎麼寫好文章，跟加上廣告來破壞版面 (咦?

下一篇系列文章：NexT 主題加入 Google Adsense

參考資料

Hexo SEO 最有用的教程

hexo-filter-nofollow - Hexo 官方的 nofollow 插件