技术研究 | Node 动态 SEO 实践

我们将一个 Vue3 + Vite 单页应用（SPA）改造为实时可抓取站点的实践过程。核心做法是引入 Node SEO 服务，对首页、列表页、新闻详情页进行服务端动态 HTML 输出，同时保留前端 SPA 的交互能力。我们还补充了标准 Sitemap、News Sitemap、RSS Feed 等搜索引擎友好能力，并完成了 Nginx + Supervisor 的生产部署方案。实践结果表明：在不全

摘要我们将一个 Vue3 + Vite 单页应用（SPA）改造为实时可抓取站点。核心做法是引入 Node SEO 服务，对首页、列表页、新闻详情页进行服务端动态 HTML 输出，同时保留前端 SPA 的交互能力。我们还补充了标准 Sitemap、News Sitemap、RSS Feed 等搜索引擎友好能力，并完成了 Nginx + Supervisor 的生产部署方案。实践结果表明：在不全站重构 Nuxt 的前提下，能够显著提升页面可抓取性与内容时效性。 1. 背景与问题项目初始形态为纯 SPA，主要问题如下： 1. 首屏返回的 HTML 为空壳（<div id="app" </div ），正文由浏览器执行 JS 后再渲染。 2. 新闻数据实时更新，但静态 dist 上传后内容很快过期。 3. 动态详情页虽有前端 title 更新，但对爬虫首抓意义有限。 4. 缺少完善的站点发现机制（Sitemap 字段不足、无 News Sitemap/RSS）。这导致“用户可见”和“爬虫可见”之间存在明显断层。 2. 目标本次改造目标： 1. 不进行全站 Nuxt 重构。 2. 保持现有 Vue SPA 交互体验。 3. 让首个响应 HTML 直接包含可抓取正文与 SEO 元信息。 4. 提供实时更新的 sitemap 家族能力。 5. 支持稳定生产部署与可运维重启。 3. 总体方案采用 SSR lite（按路由动态输出 HTML）： 1. Node SEO 服务接管核心 SEO 路由。 2. 这些路由在服务端实时请求后端 API，并拼装 HTML。 3. 浏览器拿到“已含正文 + meta + JSON LD”的首包。 4. 前端再进行 hydration，保持原有 SPA 交互。 3.1 路由接管范围 1. 首页：/ 2. 列表页：/news、/members、/papers、/projects 3. 详情页：/news/:id、/page/:id 4. SEO资源：/sitemap.xml、/sitemap news.xml、/news feed.xml、/robots.txt 4. 关键实现 4.1 服务端首包渲染 Node 层在返回 HTML 前，完成： 1. title/description/canonical/og/twitter 注入。 2. JSON LD 结构化数据注入（新闻页为 NewsArticle，首页/列表页为 Organization、CollectionPage、ItemList 等）。 3. 页面正文注入（至少包含 h1 与可抓取列表/正文段落）。 4.2 API 实时拉取与数据时效对接后端 API（新闻、成员、论文、项目、站点基础信息）后实时生成页面，避免“构建快照过期”。 4.3 Sitemap 体系增强新增三类能力： 1. sitemap.xml：标准字段 loc + lastmod + changefreq + priority。 2. sitemap news.xml：新闻标题、发布时间、可选图片。 3. news feed.xml：RSS（标题、摘要、发布时间）。额外策略： 1. 自动纳入 navBar.customLink 中站内独立页面。 2. 过滤外链、mailto、资源文件路径，避免脏链接进入 sitemap。 4.4 “页面仍会二次请求 API”问题说明这是 hydration 正常行为，不代表 SEO 失败。 SEO 关键在于：首个返回 HTML 是否已包含正文和 SEO 元信息。 5. 部署方案 5.1 构建策略本项目保留两个构建命令： 1. npm run build:client：仅 vite build。 2. npm run build：vite build + seo prerender（静态预渲染链路）。在 Node 动态 SEO 架构下，生产推荐： 5.2 Nginx 路由策略原则： 1. SEO 路由转发 Node SEO 服务。 2. /api 直接转发后端。 3. 其余路径走 dist 静态。 5.3 Supervisor 运维要点实践中发现：使用 Supervisor 托管 npm run serve:seo 容易出现子进程残留。改为直接托管 Node 可显著降低重启失败概率： 6. 验证方法与结果 6.1 验证方法 6.2 结果 1. 详情页首包已包含标题、摘要、正文、结构化数据。 2. 首页与列表页首包可抓取内容已就位。 3. Sitemap 字段完整，且支持新闻专用索引与 RSS。 4. 导航栏独立页面可自动纳入主 sitemap。对于实时内容站点，Node 动态 SEO 服务是介于纯静态预渲染与全站 Nuxt SSR 之间的高性价比方案。