JavaScript SEO：确保搜索引擎能够渲染你的内容

现代 Web 应用越来越依赖 JavaScript 来渲染内容，这给搜索引擎爬虫带来了巨大的挑战。尽管 Google 已经改进了它的 JavaScript 渲染能力，但许多网站仍然因为内容无法被搜索爬虫访问而损失了自然流量的可见度。

Google 如何处理 JavaScript

Google 采用两阶段的方式来处理 JavaScript。第一阶段是初次抓取，此时 Googlebot 下载 HTML 并将 URL 排入待渲染队列。第二阶段是渲染，此时 Google 会处理 JavaScript，以执行并渲染页面内容。第二阶段可能在初次抓取之后被延迟数小时、数天甚至数周。这种延迟意味着，依赖 JavaScript 的内容可能无法像服务端渲染的 HTML 内容那样被快速索引。

常见的 JavaScript SEO 问题

内容不在初始 HTML 响应中：当标题、正文文本和链接等关键内容只有在 JavaScript 执行后才出现时，Google 在初次抓取期间可能看不到这些内容。客户端路由与导航：使用客户端路由的单页应用（Single Page Applications）可能会生成搜索引擎无法通过常规链接跟踪发现的页面。由 JavaScript 设置的 Meta 标签：通过 JavaScript 动态设置的标题标签和 meta 描述，可能在初次抓取期间不会被看到。懒加载内容：只有当用户滚动或交互时才加载的内容，可能永远不会被搜索引擎看到。

JavaScript SEO 的解决方案

服务端渲染（SSR）

SSR 会向用户和爬虫同时提供完整渲染好的 HTML。诸如面向 React 的 Next.js、面向 Vue 的 Nuxt.js 以及 Angular Universal 等框架都支持 SSR。这是 JavaScript SEO 最可靠的解决方案，因为它彻底消除了渲染延迟。

静态站点生成（SSG）

对于不经常变化的内容，在构建时预渲染页面可以兼得两者之优。现代框架支持混合方案，即一部分页面采用静态生成，另一部分则采用服务端渲染。

动态渲染（Dynamic Rendering）

动态渲染向爬虫提供预渲染的 HTML，同时向用户提供 JavaScript 版本。当 SSR 或 SSG 不可行时，这是一个推荐的备选方案。诸如 Rendertron 和 Puppeteer 之类的工具可以实现动态渲染。

JavaScript SEO 检查清单

• 关键内容出现在初始 HTML 响应中
• 标题和 meta 描述位于静态 HTML 中
• 所有页面都拥有唯一且可抓取的 URL
• 内部链接使用带 href 属性的标准锚点标签
• 图片在初始 HTML 中带有 src 属性
• 结构化数据位于静态 HTML 或 JSON-LD 中
• Robots.txt 没有屏蔽渲染所需的 JavaScript 文件

结论

对于现代网站而言，JavaScript SEO 不再是可有可无的选项。最可靠的做法是服务端渲染或静态生成，并将动态渲染作为那些无法立即实施 SSR 的网站的备选方案。