Claude Code x 部落格架設(四)：部落格 SEO 設定與流量追蹤
AI 文章延伸
選擇平台後可直接帶入閱讀脈絡，快速整理重點、補齊盲點，並延伸到同站相關文章。
上一篇我們把部落格部署到 Cloudflare Workers，全世界都能打開你的網址了。但「能打開」跟「有人會打開」是兩件事。
你的部落格現在就像一間開在巷子裡的店——裝潢好了、門也開了，但沒有招牌、沒有地圖標記，路過的人根本不知道你在這裡。這篇要做的事，就是幫你掛上招牌、登記到 Google 地圖上，然後裝一個計數器，讓你知道到底有沒有人來過。
具體來說，我們會完成三件事：
- SEO 基本設定 — 讓搜尋引擎看懂你的網站內容（meta 標籤、sitemap、Open Graph 等）
- Cloudflare Web Analytics — 知道有多少人來、從哪裡來
- Google Search Console — 知道搜尋引擎怎麼看你的網站
整個過程大概三十分鐘，一樣全部交給 Claude Code 處理。
搜尋引擎怎麼「看」你的網站？
在動手設定之前，花一分鐘搞懂搜尋引擎的運作方式，後面的步驟會更有感覺。
Google 會派出一個叫「爬蟲」的程式，像一隻到處爬的蜘蛛，順著網路上的連結從一個頁面爬到另一個頁面。它爬到你的部落格之後，會做兩件事：
第一，讀懂你的內容。 它看的不只是文章本文，還會看你在 HTML 裡留下的「標籤」。這些標籤告訴 Google：這頁的標題是什麼、描述是什麼、配圖是什麼。標籤寫得好，Google 就能正確理解你的內容，搜尋結果上顯示的資訊也會更吸引人。
第二，決定排名。 Google 會根據內容品質、網站速度、連結數量等因素，決定你的文章在搜尋結果裡排第幾位。好消息是，Astro 產出的網站先天速度就快——第一篇提過，Astro 產出的頁面非常輕量，這在 Google 的速度評分裡是加分項。
我們現在要做的，就是把那些「標籤」設定好，再給 Google 一份網站的完整目錄，讓它不用瞎摸就能找到你所有的頁面。
Meta 標籤：你在搜尋結果上的門面
你在 Google 搜尋的時候，每一筆結果都會顯示三樣東西：標題、網址、一段描述文字。
那段描述文字不是 Google 自己寫的——是你在 HTML 裡用 meta 標籤告訴它的。
如果你沒有設定 meta 標籤，Google 會自己從頁面內容裡抓一段文字來當描述。結果通常不太好看，可能是文章開頭的半句話，也可能是導覽列上的選單文字。設定好 meta 標籤，你就能控制搜尋結果上顯示的每一個字。
標題標籤和描述標籤
最重要的兩個 meta 標籤：
- Title 標籤：顯示在搜尋結果最上面那行藍色文字，也是瀏覽器分頁上顯示的名稱。好的標題要清楚說明這一頁在講什麼，長度建議控制在 30 個中文字以內，超過的部分會被 Google 截掉
- Description 標籤：顯示在標題下方的灰色描述文字。好的描述要讓搜尋的人一眼知道這篇文章值不值得點進來，長度建議 50-75 個中文字
跟 Claude Code 說：
幫我設定部落格的 SEO meta 標籤，包括每一頁的 title 和 description。
文章頁面用文章的標題和描述，首頁用網站名稱和網站描述。Claude Code 會去改你的 layout 檔案（還記得第二篇提到的「餐廳裝潢」嗎？），在 HTML 的 <head> 區塊裡加上這些標籤。
你寫文章的時候其實就在設定 meta 標籤
這裡有一個重要的觀念：設定完之後，你以後寫文章不需要再去動任何程式碼。
還記得第二篇提過，每篇文章開頭都有一個「基本資料卡」（frontmatter）嗎？
---
title: "我用 Claude Code 架了一個部落格"
description: "完全不懂程式，從零開始的架站紀錄"
pubDate: 2026-04-17
---Claude Code 設定好 meta 標籤之後，Astro 會自動把 frontmatter 裡的 title 變成標題標籤，description 變成描述標籤。你每次寫新文章，只要把這兩個欄位填好，那篇文章在 Google 搜尋結果上的門面就自動搞定了。
所以「設定 SEO」不只是一次性的技術操作。之後每一篇文章的 title 和 description 都值得花幾秒鐘想一下——這是讀者在 Google 上看到你的第一印象。
怎麼確認有設定成功？
在瀏覽器裡打開你的部落格，在頁面上按右鍵，選「檢視原始碼」。你會看到一大堆 HTML，不用看懂全部，只要搜尋 <meta name="description"，找到一行長這樣的東西：
<meta name="description" content="你設定的描述文字">有的話就代表設定成功了。每一頁都檢查一下，確認首頁和文章頁面顯示的描述不一樣——如果每一頁的描述都一模一樣，等於沒設定。
Canonical URL：告訴 Google 哪個才是「正版」
這個名詞聽起來很嚇人，但概念很簡單。
有時候同一篇文章可能會出現在不同的網址上。最常見的情況是多語系網站——假設你的部落格有中文和英文版，同一篇文章可能同時存在 https://my-blog.com/first-post 和 https://my-blog.com/en/first-post。或者更單純的情況：你的網址有沒有結尾斜線（/first-post vs /first-post/）都能存取同一頁，Cloudflare 的預覽網址上也看得到同樣的內容。
Google 的爬蟲看到這些不同的網址指向相似的內容，會困惑：「到底哪一個才是正版？」如果它猜錯了，搜尋排名的分數就會分散到好幾個網址上，反而降低你的排名。
Canonical URL 就是你在 HTML 裡放一個標籤，告訴 Google：「不管你從哪個網址看到這個頁面，正版在這裡。」對多語系網站來說，中文版的 canonical 指向中文網址，英文版的指向英文網址，Google 就不會把兩個語言版本搞混。
跟 Claude Code 說：
幫我在每一頁加上 canonical URL 標籤，指向該頁面的標準網址Claude Code 會在 layout 的 <head> 裡加上一行 <link rel="canonical">。設定完之後你不需要再管它，Astro 會自動幫每一頁產生正確的 canonical URL。
Robots.txt：跟爬蟲說規矩
如果 sitemap 是「請看這份目錄」，robots.txt 就是「請遵守這些規矩」。
Robots.txt 是一個放在網站根目錄的小檔案，告訴搜尋引擎的爬蟲：哪些頁面可以爬、哪些不要來。對部落格來說，大部分頁面都歡迎爬蟲來訪。但有些頁面不需要被搜尋到——比如標籤頁、分頁的第 2、3、4 頁，這些頁面內容重複度高，讓 Google 收錄反而會稀釋你的搜尋排名。
跟 Claude Code 說：
幫我建立 robots.txt，允許所有搜尋引擎爬取，並且在裡面指向 sitemap 的位置Claude Code 會在 public/ 資料夾裡建一個 robots.txt 檔案。內容很短，通常就幾行：
User-agent: *
Allow: /
Sitemap: https://你的網址/sitemap-index.xml第一行說「對所有爬蟲」，第二行說「所有頁面都可以爬」，第三行說「sitemap 在這裡」。就這麼簡單。
Sitemap：給搜尋引擎的網站地圖
剛才 robots.txt 裡提到了 sitemap，現在來把它裝上。
Sitemap 是你網站的完整目錄，用 XML 格式列出所有頁面的網址和最後更新時間。沒有 sitemap，Google 的爬蟲得自己順著連結一頁一頁去找，可能會漏掉你的某些文章。有了 sitemap，等於你直接遞了一份清單給它：「這是我所有的頁面，請全部收錄。」
Astro 有官方的 sitemap 套件，安裝只要一句話。跟 Claude Code 說：
幫我安裝 Astro 的 sitemap 套件，設定好讓它自動產生 sitemapClaude Code 會幫你安裝 @astrojs/sitemap，然後在 astro.config.mjs（那個「餐廳營業登記」）裡加上設定。這裡有一個重要的細節：Claude Code 會確認 astro.config.mjs 裡面有設定你的網站網址。Sitemap 需要知道你的完整網址才能正確產生，如果設定檔裡的 site 欄位是空的或還是預設值，sitemap 產出的連結就會是錯的。
完成之後，每次你部署網站，Astro 就會自動產生一個 sitemap.xml，列出所有頁面的網址。
你可以在瀏覽器裡打開 你的網址/sitemap-index.xml 確認。看到的會是一個 XML 格式的頁面，裡面有一個指向 sitemap-0.xml 的連結：
你可能會想：「怎麼只有一個連結，我的文章清單呢？」別擔心，這是 Astro 的 sitemap 結構——它會先產生一個索引檔（sitemap-index.xml），再把實際的網址清單放在另一個檔案裡。點進 sitemap-0.xml，就能看到你所有頁面的完整網址列表：
為什麼要分兩層？因為 sitemap 規範規定單一檔案最多只能放 50,000 筆網址。Astro 預設就用索引檔的格式，萬一你的部落格以後文章多到超過上限，它會自動拆成 sitemap-0.xml、sitemap-1.xml⋯⋯不用你操心。
後面我們串接 Google Search Console 的時候，提交的是索引檔的網址（sitemap-index.xml），Google 會自動順著找到裡面所有的子 sitemap。
Open Graph：社群分享的門面
你有沒有注意過，在 LINE 或 Facebook 分享一個網址的時候，有些連結會自動顯示一張大圖、標題和描述，有些只顯示一個光禿禿的網址？
差別就在 Open Graph 標籤。
Open Graph 是 Facebook 發明的一套標準，現在幾乎所有社群平台都支援——LINE、X（Twitter）、LinkedIn 都會讀取這些標籤。你在 HTML 裡放上 og:title、og:description、og:image 這些標籤，社群平台就會用這些資訊來產生分享預覽卡片。
跟 Claude Code 說：
幫我設定 Open Graph 標籤，讓部落格文章在 LINE 和 Facebook 分享時能顯示標題、描述和配圖Claude Code 會在 layout 裡加上 Open Graph 的 meta 標籤。跟前面的 meta 標籤一樣，文章頁面會自動從 frontmatter 裡讀取標題和描述，不需要你每次手動設定。
如果你的文章有配圖，也會自動帶上去。沒有配圖的話，建議準備一張通用的預設圖（比如你的部落格 logo 加上背景色），當作沒有特定配圖時的替代。尺寸建議 1200 x 630 像素，這是各平台通用的最佳比例。
怎麼測試分享預覽？
設定好之後，你可以用 Facebook 的 Sharing Debugger 來測試。把你的文章網址貼進去，它會顯示分享時的預覽效果。如果沒有圖片或標題不對，就回頭跟 Claude Code 調整。
LINE 的分享預覽沒有官方測試工具，最簡單的方法就是把網址丟到 LINE 聊天室裡看看預覽長什麼樣子。第一次可能沒有預覽（LINE 會快取舊的結果），等幾分鐘再試一次通常就會出現。
結構化資料：讓 Google 「看懂」你是誰
前面的 meta 標籤告訴 Google 每一頁的標題和描述。結構化資料（Structured Data）做的事情更進一步——它用一種 Google 看得懂的格式，告訴搜尋引擎你的網站「是什麼」、文章「是什麼」。
聽起來很抽象，用一個例子說明。你在 Google 搜尋食譜的時候，有些結果會直接顯示烹飪時間、評分星星、卡路里。搜尋一個人的名字，右邊可能出現一張資訊卡片，列出他的職業、公司、社群連結。這些額外的資訊就是結構化資料的效果——Google 讀到之後，會用更豐富的格式呈現你的搜尋結果。
對部落格來說，最實用的結構化資料有兩種：
網站資訊（WebSite Schema）：告訴 Google 你的網站名稱和網址。這會影響 Google 搜尋結果上顯示的網站名稱——沒有設定的話，Google 會自己猜，有時候猜得不太對。
文章資訊（Article Schema）：告訴 Google 每篇文章的作者、發布日期、修改日期。這些資訊有機會讓你的文章在搜尋結果上顯示發布日期，讀者看到日期是近期的，會更願意點進來。
跟 Claude Code 說：
幫我加上結構化資料：
1. 網站層級的 WebSite Schema，包含網站名稱和網址
2. 每篇文章加上 Article Schema，包含作者、發布日期
用 JSON-LD 格式放在 HTML 的 head 裡面Claude Code 會在 layout 裡加上一段 <script type="application/ld+json"> 標籤。你不需要看懂裡面的 JSON，只要知道它在那裡就好。跟 meta 標籤一樣，文章的結構化資料會自動從 frontmatter 讀取日期和標題。
怎麼確認結構化資料正確？
Google 提供了一個免費的 Rich Results Test 工具。把你的文章網址貼進去，它會告訴你 Google 讀到了哪些結構化資料、有沒有格式錯誤。綠色勾勾代表正確，紅色警告代表需要修正——把錯誤訊息貼給 Claude Code 就好。
設定結構化資料不保證 Google 一定會顯示那些額外資訊（Google 有自己的判斷標準），但設定好等於給了 Google 選擇的機會。沒設定，機會就是零。
圖片的 alt text：容易忽略但很重要
這個設定跟前面不太一樣——不是一次設定好就不用管的，而是每次你在文章裡放圖片的時候都要注意。
當你用 Markdown 語法插入一張圖片：
方括號裡的那段文字就是「alt text」（替代文字）。它的用途有兩個：
第一，讓看不到圖片的人知道圖片的內容。 視障讀者使用螢幕閱讀器瀏覽你的網站時，螢幕閱讀器會把 alt text 念出來。圖片載入失敗的時候，瀏覽器也會顯示 alt text。
第二，讓 Google 理解圖片的內容。 Google 的爬蟲看不懂圖片，它靠 alt text 來判斷這張圖在講什麼。寫好 alt text，你的圖片有機會出現在 Google 圖片搜尋裡，帶來額外的流量。
好的 alt text 要具體描述圖片的內容，而不是寫「圖片」或「截圖」。「Cloudflare Dashboard 的部署狀態頁面」比「截圖」好太多。
這不是什麼需要跟 Claude Code 設定的東西，但值得養成習慣。每次在文章裡加圖片的時候，花五秒鐘寫一段具體的描述。
全部一次搞定
如果你不想分好幾次跟 Claude Code 溝通，其實可以一句話把前面的設定全部搞定：
幫我設定完整的 SEO：
1. 每一頁都要有 meta title 和 description，從文章的 frontmatter 讀取
2. 每一頁加上 canonical URL
3. 建立 robots.txt，允許所有爬蟲，指向 sitemap
4. 安裝 Astro 的 sitemap 套件，確認 astro.config.mjs 裡的 site 網址正確
5. 設定 Open Graph 標籤，讓社群分享有預覽圖
6. 加上結構化資料：網站的 WebSite Schema，文章的 Article Schema，用 JSON-LD 格式Claude Code 會一次處理完所有設定。跑完之後，用開發伺服器確認一下：打開頁面原始碼看 meta 標籤和 OG 標籤有沒有出現，再打開 /sitemap-index.xml 和 /robots.txt 確認內容正確。都沒問題就可以推到 GitHub，讓 Cloudflare 自動部署。
到這裡，你的部落格對搜尋引擎和社群平台來說已經是一個「準備好了」的網站。接下來要處理的是：怎麼知道有沒有人來？
Cloudflare Web Analytics：你的訪客計數器
網站上線之後，最讓人好奇的問題大概是「到底有沒有人在看？」
好消息是，你的部落格已經部署在 Cloudflare Workers 上了，Cloudflare 本身就有內建的流量分析工具——Web Analytics。不需要額外安裝追蹤碼、不需要註冊新帳號，在 Dashboard 上點幾下就能開啟。
開啟 Web Analytics
登入 Cloudflare Dashboard，點左側選單的 Web Analytics，選擇你的網站，點「啟用」就完成了。
沒有了。就這麼簡單。
不需要在部落格裡加任何程式碼，不需要推到 GitHub 重新部署。Cloudflare 會自動開始收集你的網站流量資料。
看懂基本數據
開啟之後等幾個小時讓資料累積，再回到 Web Analytics 頁面，你會看到幾個重要的數字：
造訪次數（Visits） — 有多少人造訪過你的網站。
頁面瀏覽數（Page Views） — 總共被看了幾頁。一個人看了三篇文章就算三次。
熱門頁面（Top Pages） — 哪幾篇文章最多人看。這個數據很實用，它會告訴你讀者對什麼主題有興趣。
流量來源（Top Sources） — 訪客是從哪裡來的。常見的來源有：
- Google / Bing：從搜尋引擎來的（這是 SEO 的成效指標）
- Direct：直接在瀏覽器輸入網址
- t.co / threads.net：從社群平台來的
- 其他網站名稱：從別人的網站連結過來的
Core Web Vitals — 這是 Cloudflare Web Analytics 比較特別的功能，它會顯示你的網站在真實使用者裝置上的載入速度評分。Google 把這個速度當作搜尋排名的參考指標之一，所以值得偶爾看一眼。用 Astro 架的網站通常分數都不錯。
剛上線的部落格，數字小是正常的。不需要每天盯著報表看，一週看一次，觀察趨勢就好。重點是那條線有沒有慢慢往上走。
需要更細緻的分析再用 Google Analytics
Cloudflare Web Analytics 的優點是零設定、不需要 cookie、對讀者隱私友善。對大部分個人部落格來說夠用了。
如果之後你的部落格流量起來了，需要更細緻的數據——比如讀者在每篇文章上停留多久、從哪一段開始跳出、轉化率追蹤——那時候再考慮加裝 Google Analytics（GA4）。跟 Claude Code 說「幫我安裝 Google Analytics」，它會幫你在 layout 裡加上追蹤碼，十分鐘就搞定。兩套工具可以並存，不會衝突。
我們之前寫過一篇用 Claude Code 串接 Cloudflare Web Analytics API，甚至能讓 Claude Code 直接幫你查流量數據，不用打開瀏覽器，問一句話就知道這週有多少人看過你的文章。
Google Search Console：搜尋引擎怎麼看你
GA4 告訴你「有沒有人來」，Google Search Console（簡稱 GSC）告訴你「搜尋引擎怎麼看你的網站」。兩個工具的角色不同：
- GA4：記錄訪客的行為（來了幾個人、看了什麼、待多久）
- GSC：記錄搜尋引擎的行為（你的網站在搜尋結果裡出現幾次、排第幾名、有沒有技術問題）
驗證網站擁有權
到 Google Search Console 登入，點「新增資源」，選「網址前置字元」，輸入你的網站網址。
Google 會要求你驗證這個網站是你的。最簡單的方式是選「HTML 標記」驗證——它會給你一段 meta 標籤，長得像這樣：
<meta name="google-site-verification" content="一串亂碼">複製這段標籤，跟 Claude Code 說：
幫我在部落格的 HTML head 裡加上這段 Google 驗證碼：
<meta name="google-site-verification" content="你的驗證碼">推到 GitHub，等 Cloudflare 部署完成之後，回到 Search Console 點「驗證」。通過之後，Google 就知道這個網站是你的了。
提交 Sitemap
驗證完成後，點左邊選單的「Sitemap」，在「新增 Sitemap」的欄位裡填入：
你的網址/sitemap-index.xml按下提交。
提交成功後，你會在「已提交的 Sitemap」看到狀態顯示「成功」，還有 Google 探索到的網頁數量。這就是我們前面設定 sitemap 的回報——一份現成的目錄，直接交給 Google。
看懂 GSC 的基本數據
提交 sitemap 之後，需要等幾天讓 Google 收錄你的頁面。之後打開 Search Console，你最常看的會是「成效」報表，裡面有四個關鍵數字：
曝光次數 — 你的網站出現在搜尋結果裡的次數。就算沒有人點，只要出現了就算一次曝光。
點擊次數 — 有多少人實際從搜尋結果點進你的網站。
平均排名 — 你的文章在搜尋結果裡平均排在第幾位。
點閱率（CTR） — 點擊次數 ÷ 曝光次數。如果你的文章出現了 100 次但只有 2 個人點，CTR 就是 2%。
剛開始這些數字都會很低，甚至是零。一個新網站要被 Google 收錄，通常需要幾天到幾週的時間，這是正常的。重要的是你已經把門打開了——Google 知道你在這裡，只是需要時間來認識你。
GSC 還有一個很有用的功能：「涵蓋範圍」報表。它會告訴你 Google 成功收錄了幾頁、有沒有哪些頁面出了問題。如果看到紅色的錯誤，把錯誤訊息貼給 Claude Code，它通常能幫你判斷問題出在哪裡。
到目前為止你完成了什麼？
讓我們回顧一下整個系列。從第一篇的概念介紹到現在，你已經：
- 搞懂 Astro、Git、Cloudflare 的角色
- 用 Claude Code 安裝了 Astro，建好部落格專案
- 把網站部署到 Cloudflare Workers，全世界都能看到
- 設定了 SEO 的 meta 標籤、sitemap、Open Graph
- 開啟了 Cloudflare Web Analytics，能追蹤訪客數據
- 串接了 Search Console，能看到搜尋引擎的收錄狀況
你現在有的不只是一個網站，而是一個「能被找到、能被追蹤」的網站。搜尋引擎知道你在這裡，社群分享有漂亮的預覽，你也能隨時查看有多少人在看你寫的東西。
接下來就是持續寫。SEO 不是設定完就結束的事——Google 看的是你有沒有持續產出有價值的內容。每多一篇文章，就多一個被搜尋到的機會。你只要專注在寫好每一篇文章，其他的交給你已經設定好的這些工具。
常見問題
部落格 SEO 設定完之後多久會有效果？
Google 收錄一個新網站通常需要幾天到幾週。收錄之後，文章要累積到一定的數量和品質，搜尋排名才會慢慢上升。大部分部落格在持續更新三到六個月後會開始看到明顯的搜尋流量。SEO 是長期的事，不會今天設定明天就有排名。
Sitemap 需要每次手動更新嗎？
不需要。我們安裝的 @astrojs/sitemap 套件會在每次部署時自動產生最新的 sitemap。你新增一篇文章，推到 GitHub，Cloudflare 自動部署之後，sitemap 裡就會包含新文章的網址。Google 會定期來檢查你的 sitemap，自動發現新頁面。
Cloudflare Web Analytics 和 Search Console 有什麼差別？
Web Analytics 看的是「訪客在你的網站上做了什麼」——有幾個人來、看了哪些頁面、從哪裡來。Search Console 看的是「你的網站在搜尋引擎裡的表現」——出現在搜尋結果幾次、排名第幾、有沒有被正確收錄。兩個工具角度不同，建議都開。
Open Graph 圖片有什麼建議的尺寸？
Facebook 和 LINE 建議的 OG 圖片尺寸是 1200 x 630 像素，比例大約是 1.91:1。如果你的文章沒有配圖，可以準備一張通用的預設圖片（例如你的部落格 logo 加上背景色），跟 Claude Code 說「幫我設定一張預設的 OG 圖片」，它會幫你處理。