部落格大翻新心得｜筆記本風格、新技術與 SEO 優化全紀錄

終於把部落格大翻新了！

舊版用了好幾年，一直覺得不好看，但也一直抱著「可以用就好」的心態 XD 程式架構也亂亂的，尤其原本是 fork 別人的多語系模板，問題很多。加上中文文章在 Google 上越來越難被找到，就決定整個打掉重練。

這篇把這次改了什麼、用了什麼技術、SEO 怎麼調整，一次記下來，給未來失憶的自己，也給想整理部落格的你參考。

為什麼要翻新

• 不好看：舊版是很標準的技術部落格模板，乾淨但沒有個性，越看越膩。
• 內容方向變了：以前主要寫前端筆記，現在更想寫生活、旅行和海外經驗。
• SEO 有問題：中文文章的搜尋排名一直掉，後來才發現是語言設定出了問題（後面會講）。
• 架構太亂：fork 來的多語系模板本身就有不少問題，又綁了一堆用不到的套件，想升級都很痛苦。

新的樣子：一本筆記本

這次的主題是「筆記本」：

• 背景是方格紙
• 卡片、按鈕都是歪歪的手繪墨線框
• 標題用螢光筆畫重點，標籤像貼紙
• 首頁右邊貼了一張便利貼，寫最近的小體會
• 相簿用紙膠帶把照片貼在頁面上

字體沒有另外載入網路字型，直接用系統內建的手寫字體，所以頁面載入很快。深色模式也保留，變成深色的方格紙。

內容怎麼重新整理

• 導覽列改成：全部、生活、旅遊（底下依國家分）、技術、相簿、關於、聯絡。
• 首頁和「全部」只放生活與旅遊文章。技術文章沒有刪，還是可以從「技術」分類進去，只是不再佔首頁版面。
• 文章卡片上的標籤可以直接點，例如點「紐西蘭」就能看到所有紐西蘭的文章。
• 新增相簿：一本一本的相簿，點進去看照片，手機上可以左右滑。
• 留言系統從 Disqus 換成 Waline，這個故事比較長，另外寫了一篇。

用了什麼技術

舊版 → 新版：

幾個比較大的改動：

拿掉 Contentlayer 和 Pliny。這兩個是模板附的，功能很多但我只用到一小部分，而且卡住升級。現在改成自己用幾個小工具處理 Markdown：gray-matter 讀文章開頭的設定、@mdx-js/mdx 把 MDX 轉成頁面、shiki 負責程式碼上色。東西變少，出問題也比較知道去哪裡找。

Tailwind CSS 4。設定從 JavaScript 檔搬進 CSS 裡，顏色和字體都用 CSS 變數定義。筆記本風格的那些手繪框、貼紙、螢光筆，就是在同一份 CSS 裡寫成幾個共用樣式，整站重複使用。

拿掉用不到的東西：電子報訂閱、每個標籤各自的 RSS 都移除了，舊網址會自動轉到新的位置。

SEO 怎麼優化

這是這次花最多心力的部分。

1. 修好語言設定（最重要）

我的部落格有中文和英文兩個版本。舊版的設定把「預設語言」指到英文，首頁也是導到英文版，而且告訴 Google「這兩頁是同一篇文章的不同語言」的標記（hreflang）是壞的。結果就是 Google 搞不清楚中文頁面的定位，中文排名一路掉。

這次改成：

• 中文是主要語言，首頁直接進中文版
• 每一頁都正確標示它的中文版和英文版在哪裡
• 只有「真的有另一個語言版本」的文章才標示，沒有翻譯的就不亂標
• 語言切換按鈕會帶你到同一篇文章的另一個語言，而不是回首頁

2. 結構化資料

每篇文章都加上給搜尋引擎看的結構化資料（JSON-LD），告訴它這是一篇文章、作者是誰、什麼時候發布、屬於網站的哪一層。這有機會讓搜尋結果顯示得更完整。

3. 分享預覽圖

每篇文章會自動產生一張帶有標題的分享圖，貼到社群或通訊軟體時不會再是一片空白。

4. Sitemap 和重複內容

• Sitemap 會列出每一頁的各語言版本
• 只有真的有更新日期的頁面才標示更新時間，不讓它每次部署都變動
• 發現有兩篇內容重複的文章，刪掉一篇並把舊網址轉到另一篇

5. 文章標題和圖片

• 中文文章的標題改成更貼近大家實際會搜尋的說法
• 文章封面改成依照圖片原本的比例顯示，直式照片不會再被裁掉
• 文章開頭重複出現的封面圖全部清掉

最後

翻新完最開心的是，打開自己的部落格終於會想多看兩眼，也比較想寫東西了。

現在有了 AI 的幫助確實快很多。不過雖然 AI 給了品質，但給不了品味，想要長成什麼樣子，還是得自己想清楚～

人生不過短短 30,000 天，之後想多寫一點生活裡的小事。如果你也有一個放很久沒整理的部落格，希望這篇有給你一點動力～