一位开发者分享了他基于 React 19 和 Vite 构建的静态站点 devtools.abect.com 的 SEO 优化经历。该站点提供 49 个浏览器端开发者工具，构建时静态预渲染，无后端。三个月内，28 天窗口的点击量从 3 次增至 664 次，展示量从约 1,600 增至 21,400，平均排名从 61.3 提升至 23。
有效的做法：
• 每个工具独立页面而非分类聚合页
• 构建时预渲染完整 HTML
• 每页 5,000-12,000 字符真实内容
• 全站 JSON-LD 结构化数据
• 针对具体痛点撰写标题描述。有趣的是，最初为图片转换而建的站点，最终流量主力却是后来顺手添加的文本转换工具，JSX to HTML 页面贡献了 491 次点击
更关键的是对构建产物的审计发现了五个长期存在的 bug：JSON-LD 全部渲染在 body 而非 head；字符串替换注入 HTML 时 $& 模式导致整页损坏；React.lazy 在 renderToString 下会输出加载占位符，若按路由拆分将毁掉全部 SEO；登录页返回 404 导致死链和 hydration 不匹配；vercel.json 混用 legacy routes 导致安全头配置完全失效。
修复后，作者编写脚本对 dist/ 目录的真实 HTML 做断言检查，首次运行 14 个失败项中仅 2 个是真实问题。最终线上验证 55 个页面全部 HTTP 200，261 个 JSON-LD 块有效且在 head 中，6 个安全头全部生效。
核心经验：预渲染是工具站最高杠杆的 SEO 决策；审计构建产物而非源码；用实验验证框架假设；永远不要用字符串替换注入渲染标记。增长缓慢但扎实，三个月从 3 次点击到 664 次，没有技巧，只有大量不起眼的工作在复利。
#开发者 #工具 #SEO #React #SSG #JSONLD #Vite #前端
@DevToolboxHub