在本指南中，您將學習如何將部落格架設在子目錄（例如 example.com/blog）而非子網域（例如 blog.example.com）。這裡的每一步都經過測試並確認可行。

將部落格架設在子目錄可以提升 SEO 表現並增強使用者體驗。

雖然有許多文章宣傳使用子目錄優於子網域的好處，但很少有資源提供實際操作的逐步指南。

將部落格架設在子目錄的主要好處是提升 SEO。

市面上有許多相關文章，但它們大致都說明：

將部落格架設在子目錄對 SEO 更有利，因為它能整合網站的權威性與排名能力。

Google 曾表示他們不會將子網域視為獨立實體。

儘管 Google 如此說明，實證數據顯示子目錄在搜尋排名上優於子網域。

如果您想最大化 SEO 效果，選擇子目錄架設是最佳方案。

若想了解更多，可參考 ButterCMS 的文章：Blog Subdomain or Subdirectory? Hint: One is 40% Better。

我個人的經驗也相似。當我將部落格從子網域移至子目錄後，幾週內就明顯看到自然流量與搜尋排名提升。期間我沒有發布新內容，也沒有推廣部落格。

設定過程較為複雜。許多部落格平台與 CMS 預設設計為子網域運作，配置成子目錄較為棘手。

我個人發現設定過程相當耗時，必須仔細遵循指示。過去曾將部落格從子網域改為子目錄，對 taikohub.com 來說，這樣的時間投入難以合理化。

如果您仍認為值得，請繼續閱讀。

假設您的部落格（blog.example.com）是使用 Next.js 並部署在 Vercel，而主網站（example.com）是靜態網站並部署在 Render。

雖然此處以 Vercel 和 Render 為例，其他主機服務商的步驟幾乎相同。您不需對主機服務商做任何設定，所有操作皆可在 Cloudflare 控制台及文字編輯器中完成。

重要提示：Cloudflare 常更新其控制台介面與路徑，若您發現本文步驟與您看到的不同，請使用控制台的搜尋功能尋找相關區塊。

首先，為主網站（example.com）設定 DNS 紀錄。若您未使用 Render，請依照您主機服務商的文件完成相應設定。

進入 Cloudflare 控制台，點選您的網域，接著進入 SSL/TLS，再點 Overview，然後點「Configure」。

接著選擇「Custom SSL/TLS」並設定為「Full」。

在側邊欄點選「DNS」，再點「DNS Records」，然後點「Add Record」。

新增以下 DNS 紀錄。將 my-site.onrender.com 替換為您主網站的服務 URL。若您有其他應用程式（如 API），也可一併新增。請確保「Proxy status」設定為「Proxied」。切勿新增萬用字元紀錄（例如 *.example.com）。

確保您的部落格已可透過子網域（例如 blog.example.com）存取。

為部落格新增另一筆 DNS 紀錄。將 cname.vercel-dns.com 替換為您的部落格主機商提供的 CNAME 目標。

確保您的 Next.js 部落格路由指向 /，而非 /blog。您不應有任何包含 /blog 的路由。請編輯 next.config.js 或 next.config.mjs，並在設定中加入 basePath: "/blog"。

前往 Cloudflare 控制台，點選「Workers & Pages」，點「Create」後選「Create Worker」。

本文示範選擇最簡單的「Start with Hello World!」選項。正式應用可考慮使用 Git。將此 Worker 命名為 blog-worker，然後點「Deploy」。

接著將程式碼替換為以下內容：

依需求更改 URL。儲存時點擊版本 ID（例如 b30983e0），再點「Apply」。

要部署變更，前往 Worker 控制台，點「Deployments」，在「Version History」中點「...」再選「Deploy」最新版本。

在 Cloudflare 控制台側邊欄點「Worker Routes」，點「Add Route」。

新增以下部落格內容路由：

再新增靜態資源路由：

現在您應該可以透過 example.com/blog 訪問您的部落格。若成功，恭喜您已成功利用 Cloudflare Workers 將部落格架設於子目錄。

成功架設後，請確保搜尋引擎不會索引子網域，因為部落格已在子目錄被索引。若兩者皆被索引，可能會因重複內容導致 SEO 問題。

更新您的 next.config.js 或 next.config.mjs。

打開您的應用部署 URL，可能類似 https://vercel.com/my-projects-30d8ek3n/my-blog/d934nfid9823sbsNgoMnOOnsiKxn。

開啟瀏覽器開發者工具的 Network 分頁。

檢查是否存在「X-Robots-Tag」標頭。若無，表示您的 Next.js 應用已正確設定為不被索引。

輸入您的子目錄 URL（例如 example.com/blog）以確認設定。