菜鸟教程

JavaScript SEO

现代网站经常使用 React、Vue、Svelte、Next.js、Nuxt 或自研 SSG。Google 可以处理许多 JavaScript 页面，但这并不表示所有客户端渲染内容都天然适合搜索。

关键问题

JavaScript SEO 主要回答三个问题：

  1. 重要内容是否能被搜索系统看到？
  2. 重要链接是否能被搜索系统发现？
  3. 标题、描述、canonical、结构化数据是否在最终页面中正确存在？

如果这些信息只能在用户点击、登录、滚动很久或接口失败后才出现，搜索表现就可能不稳定。

CSR、SSR 与 SSG

渲染方式 SEO 特点
CSR 首屏 HTML 较少，依赖浏览器执行 JavaScript 后生成内容
SSR 服务端返回完整 HTML，适合需要稳定收录的页面
SSG 构建期生成 HTML，适合文档、博客、教程、营销页
ISR/增量生成 在静态性能和更新频率之间折中

对内容型页面来说，SSR 或 SSG 通常更稳。客户端岛、评论、收藏、筛选等交互可以在静态正文基础上按需增强。

链接写法

搜索系统发现链接时，最可靠的是普通 HTML 链接：

html 
<a href="/google-search-central/03-crawling-indexing">抓取与索引</a>

避免把重要导航只写成：

html 
<button onclick="location.href='/pricing'">查看价格</button>

按钮适合触发动作，链接适合导航到 URL。重要页面应能通过 <a href> 被发现。

元数据生成

对于 Vue、React 或自研 SSG，确认最终 HTML 中存在：

html 
<title>页面标题</title>
<meta name="description" content="页面摘要" />
<link rel="canonical" href="https://example.com/page" />

如果元数据只在客户端路由切换后生成，搜索系统看到的初始 HTML 可能不完整。对于文档站和内容站，最好在服务端渲染或构建阶段注入 SEO 信息。

异步数据

很多 SEO 问题来自异步接口：

  • 页面 HTML 已返回，但正文要等接口加载。
  • 接口对 Googlebot 返回错误或空数据。
  • 骨架屏被索引，真实内容没有进入最终渲染。
  • 分页和筛选只改变前端状态，没有可访问 URL。

解决思路：

  • 重要页面的主体内容尽量进入服务端或构建期 HTML。
  • 给每个可索引状态提供稳定 URL。
  • 确保接口无需登录、不会阻止 Googlebot、失败时有清晰降级。
  • 用网址检查工具测试实时页面，而不只看本地开发环境。

检查方法

  • 查看页面源代码，确认基础 HTML 和元数据。
  • 使用浏览器禁用 JavaScript，观察是否仍有主要内容。
  • 用 Search Console 网址检查查看 Google 看到的页面状态。
  • 观察服务器日志，确认 Googlebot 请求的资源是否成功。
  • 对关键模板做构建后 HTML 快照检查。

参考资料