巧用 Cloudflare Workers，在子目录而非子域名上托管博客，提升 SEO 效果！

引言在本指南中将学习如何在子目录例如 example.com/blog而非子域名例如 blog.example.com上托管博客且每个步骤都经过测试和验证。为何在子目录上托管在子目录上托管博客可提高 SEO 效果并提升用户体验。很多文章宣扬其好处但详细设置步骤指南较少。在子目录上托管博客主要好处是提升 SEO观点大致如下在子目录上托管对 SEO 更有利能整合网站权威性和排名能力谷歌表示不会将子域名视为独立实体经验数据表明子目录在搜索排名上优于子域名想最大限度发挥 SEO 效果在子目录上托管是明智之选。个人经历显示将博客从子域名迁移到子目录几周后自然流量和搜索引擎排名显著提升期间未发布新内容和推广博客。为何不在子目录上托管设置过程更为复杂许多博客平台和 CMS 为子域名设计配置为在子目录上工作可能棘手。个人发现设置耗时之前将博客从子域名迁移到子目录后觉得为 taikohub.com 操作不值得花时间。在子目录上托管博客的步骤假设现有两个站点example.com 和 blog.example.com想将博客托管在 example.com/blog 而非 blog.example.com。博客是托管在 Vercel 上的 Next.js 应用主站点是托管在 Render 上的静态站点。虽以 Vercel 和 Render 为例但其他托管提供商步骤几乎相同可在 Cloudflare 仪表板和文本编辑器完成。重要提示Cloudflare 常更改仪表板用户界面和路由若步骤与看到的不一致可用仪表板搜索功能找相关部分。步骤 1为主站点设置 DNS 记录为主站点example.com设置 DNS 记录若不使用 Render按托管提供商等效步骤操作可在其文档找说明。打开 Cloudflare 仪表板点击进入域名选 SSL/TLS选概述点击“配置”接着选“自定义 SSL/TLS”选“完全”通过点击侧边栏“DNS”选“DNS 记录”进入页面后点击“添加记录”添加 DNS 记录将 my-site.onrender.com 替换为主站点服务 URL有其他应用程序也可添加“代理状态”设为“代理”不添加通配符记录。步骤 2为博客设置 DNS 记录确保博客可通过子域名例如 blog.example.com访问为博客添加 DNS 记录将 cname.vercel-dns.com 替换为博客托管提供商提供的 CNAME 目标。步骤 3配置 Next.js 博客确保静态资源的正确路由确保 Next.js 博客路由器指向 / 而非 /blog无包含 /blog 的路由。编辑 next.config.js 或 next.config.mjs 文件在配置中添加 basePath: /blog。步骤 4添加 Cloudflare Worker打开 Cloudflare 仪表板点击“Workers Pages”点击“创建”点击“创建 Worker”为便于说明选“以 Hello World! 开始”生产应用建议用 Git命名为 blog-worker 后点击“部署”。将代码替换为指定内容根据需要更改 URL保存更改点击版本 ID 哈希点击“应用”部署更改进入 Worker 仪表板点击“部署”在“版本历史记录”下找到最新版本点击“…”点击“部署”。步骤 5将 Next.js 站点与 Cloudflare Worker 连接在 Cloudflare 仪表板侧边栏选“Worker 路由”点击“添加路由”为博客内容添加路由路由为 example.com/blog*Worker 为 blog-worker为静态资源添加路由路由为 example.com/blog/_next/static*Worker 为 blog-worker。若能通过 example.com/blog 访问博客即成功。在 Next.js 应用中配置搜索引擎 robots.txt成功在子目录上托管博客后要确保搜索引擎不索引子域名避免因重复内容导致 SEO 问题。更新 next.config.js 或 next.config.mjs 文件同时更新 Cloudflare Worker。步骤 6验证子域名未被索引打开应用部署 URL打开浏览器开发者工具网络选项卡检查是否存在“X-Robots-Tag”头若不存在说明 Next.js 应用已正确配置为不被索引。步骤 7验证子目录已被索引访问 Google URL 检查工具输入子目录 URL例如 example.com/blog确认显示已被索引。