帮助您的 SPA 被发现
Source: Dev.to
我构建了一个让我自豪的东西。却没有人能找到它。
构建产品是最容易的部分。
我花了几个月时间打造一个开发者工具——一个真正能解决实际问题的产品。我把它上线了。它运行良好。我真的为此感到骄傲。
然后我在 Google 上搜索了自己的网站。
首页出现了——但几乎不可见。其他页面呢？全都看不见。我的文档页、模板页、定价页——Google 根本不知道它们的存在。当我在 LinkedIn 和 Twitter 上分享链接时，每个页面显示的都是同一个通用预览卡。Slack、Discord——也是同样的情况。
我们都听过“建好它，它们就会来”。即使你心里明白这并不是运作方式，仍然有一部分你会期待它。你打造了很棒的东西，部署它，然后等着人们偶然发现你的天才。但他们并不会。
让人们看到你的作品是没有人提醒你的最难问题。对我来说，根本原因竟然是如此尴尬地简单。
每个 SPA 开发者都会遇到的问题
- 你的应用只发布一个
index.html。一个<script>标签。一个<script>标签。 - 你站点上的每个路由（
/docs、/pricing、/about等）向搜索引擎和社交平台提供完全相同的元数据。 - 你有 10 个页面。Google 只看到一个。LinkedIn 只看到一个。Twitter 只看到一个。Slack 只看到一个。
- 不运行 JavaScript 的爬虫只能看到一个空的
<div>。
我打开 Google Search Console，看到 25 个页面资源中有 21 个根本无法加载——来自外部 CDN 的字体，Google 的爬虫无法访问。我的站点基本上对帮助人们发现内容的系统来说是不可见的。
我为了解决它所构建的内容
我编写了一个 Cloudflare Worker，像反向代理一样位于你的 SPA 前端。你的应用保持不变，托管方式也不变。Worker 只拦截请求并修复搜索引擎和社交平台看到的内容。
它的功能
- 每个页面都有自己的标题、描述、Open Graph 标签、Twitter 卡片和规范 URL。将你的
/pricing页面分享到 Slack 时，预览实际显示 “Pricing” —— 而不是首页标题。 - 当搜索引擎爬虫或社交预览机器人访问（Googlebot、Bingbot、LinkedIn、Twitter、Slack、Discord、AI 机器人——覆盖 35+）时，它们会收到完整渲染的 HTML，包含真实内容，而不是空的
<div>。 - 普通访客仍然得到与你之前完全相同的 SPA。对你的应用零改动，对性能零影响。
它不做的事
- 不需要你更改框架。
- 不需要 SSR 或构建插件。
- 不会触碰你现有的代码。
- 不在乎你的应用托管在哪里——Netlify、Vercel、Cloudflare Pages、S3，或任何地方。
它只是一份文件，几分钟即可部署。并且可以在任何托管平台上为任何 SPA 工作。
您将获得
- 在 Google 中有 11 页中的 10 页被收录。
- 从结构化数据检测到 FAQ 丰富结果。
- 每个页面在 LinkedIn、Twitter、Slack 和 Discord 上都有自己的社交预览。
- 外部资源失败从 25 次中的 21 次降至几乎为零。
- 所有页面已提交并在 Bing 上爬取。
整个过程大约增加 5 毫秒 的延迟。对于不需要 SEO 的路由（例如您的仪表板），worker 直接代理转发，零开销。
您可以通过 AI 提示进行设置
我已将整个设置打包成一个 AI 提示。将其粘贴到 Claude Code、Cursor、Windsurf 或您使用的任何 AI 编辑器中。它会询问您几个问题——您的域名、路由、每个页面的标题和描述——然后构建所有内容：
- Worker。
- 预渲染脚本。
- 网站地图。
robots.txt。- 结构化数据。
- 部署和 Search Console 提交步骤。
无需了解 HTMLRewriter、Playwright 或 JSON‑LD。提示会处理技术细节；您只需回答有关应用的问题。
以下是 AI 提示：
(为简洁起见省略提示)
为什么我要分享这个
因为我知道还有其他开发者已经做了很好的东西，却不知道为什么没有人发现它。单页应用（SPA）的 SEO 问题并不明显，除非你去检查——而到那时，你已经失去了数月的潜在流量。
如果你构建了单页应用，请立即查看 Google Search Console。看看有多少页面实际上被索引了。看看你的社交预览是什么样的。你可能会感到惊讶。
然后修复它。只需要几分钟，而不是几天。