Terry Yao's Blog

[hexo] 如何利用 Hexo 提升 SEO 與行銷效能

閱讀時間約 4 分鐘

cover

Hexo SEO 實戰：讓搜尋引擎找到你

寫了一堆文章結果 Google 搜不到？那大概是 SEO 基本功沒做好。

先講結論

hexo 行銷相關概念

SEO 不是什麼神秘技術，對 Hexo 部落格來說，就是做好這幾件事：裝 Google Analytics 追蹤數據、用 abbrlink 讓網址乾淨好記、設計一個不趕人走的 404 頁面、壓縮圖片提升載入速度、把分類標籤當成內部連結的骨架。

Google Analytics：先知道有沒有人看

沒有數據就是在瞎猜。Google Analytics 是免費的，裝一下不虧：

<% if(theme.ga_track_id) { %>
    <script async src="https://www.googletagmanager.com/gtag/js?id=<%= theme.ga_track_id %>"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '<%= theme.ga_track_id %>');
    </script>
<% } %>

把這段加到 theme 的 <head> 裡，然後在 theme 設定檔裡填上你的 GA tracking ID 就好。裝完之後你就能看到哪些文章有人看、讀者從哪來、停留多久。

有了數據，你才知道該寫什麼主題的文章。

abbrlink：讓網址不再又臭又長

預設的 Hexo URL 是 /2024/09/08/如何使用-hexo/ 這種東西。中文在 URL 裡會被 encode 成 %E5%A6%82%E4%BD%95 的亂碼，醜到不行而且不利於分享。

裝 abbrlink 插件，自動產生短網址：

pnpm install hexo-abbrlink --save
abbrlink:
    alg: crc32
    rep: dec
permalink: :category/:abbrlink/

改完之後 URL 會變成 /tech/3937366855/ 這樣，短而且永遠不會變——即使你改了文章標題，URL 也不受影響。

404 頁面：別讓讀者就這樣走了

大多數人的 404 頁面就是一行「找不到頁面」，然後讀者就關掉視窗了。浪費。

好的 404 頁面應該做兩件事：告訴讀者發生什麼事，然後引導他去其他有價值的地方。

在 source/ 下建一個 404.md：

---
title: 404
layout: page
description: 找不到頁面
---
 
# 嗯，這頁不見了
 
可能是連結過期了，也可能是我搬家的時候弄丟了。
 
試試 [首頁](/) 看看有沒有你要找的東西？

簡單直白，不裝可愛，但給了讀者一條出路。

圖片壓縮：載入速度就是 SEO

Google 明確說過頁面載入速度會影響排名。對部落格來說，最大的效能殺手通常就是圖片。

hexo-neat 在 進階設定篇 已經裝過了，它會自動壓縮 HTML、CSS、JS。但圖片壓縮它管不了——你需要在上傳前自己處理。

我的做法是統一用 WebP 格式，寬度不超過 1200px。用任何你順手的工具（Squoosh、ImageOptim、甚至 macOS Preview）壓一下就好。

分類和標籤的 SEO 價值

很多人把分類和標籤當裝飾，其實它們是你網站內部連結結構的骨架。搜尋引擎透過這些結構來理解你的網站「在講什麼」。

分類要粗，標籤要細。分類是「前端」、「後端」、「DevOps」這種大方向，標籤是「React」、「Docker」、「CI/CD」這種具體技術。不要反過來。

SEO 做了一個月，Google 搜尋結果從第 87 頁進步到第 12 頁。嗯，繼續努力。

關係圖譜