Next.js SEO 检查器

审核您的 Next.js 站点的 SSR、渲染、元数据和可爬行性问题。 7 个类别的 20 多项检查。

#1 Next.js SEO 问题

过度使用“使用客户端”指令会导致内容仅在浏览器中呈现。搜索引擎和 AI 爬虫（ChatGPT、Claude、Perplexity）可能会看到空的 HTML shell，而不是您的内容。

  • 检测 SSR 与 CSR 问题
  • 检查元数据可用性
  • 分析核心网络生命

最适合 Next.js 网站，但可以分析任何网站

常见问题解答

这个工具检查什么？

该工具执行 7 个类别的 20 多项 SEO 检查：

  • 渲染和 SSR: 检测空 HTML shell、仅客户端渲染、水合作用问题
  • 元数据和 Head: 标题、描述、开放图谱、规范、视口
  • 表现: 核心 Web Vitals（FCP、LCP、TTFB）、渲染阻塞资源
  • 图片: 替代文本、下一个/图像使用、延迟加载
  • 结构化数据: JSON-LD 模式标记验证
  • 爬行性: 机器人元、内部链接、hreflang
  • 语义HTML: 标题、地标、ARIA 属性

为什么 SSR/SSG 对于 SEO 很重要？

搜索引擎和人工智能爬虫最初只能看到来自服务器的原始 HTML。如果您的内容仅通过 JavaScript（客户端）呈现，爬虫可能会看到一个空页面。服务器端渲染 (SSR) 或静态站点生成 (SSG) 可确保您的内容位于初始 HTML 响应中。

什么是“空 HTML Shell”问题？

当您的 Next.js 应用程序返回最少的 HTML 并且内容完全通过 JavaScript 加载时，就会发生这种情况。常见原因：

  • 过度使用“使用客户端”指令
  • 不使用 getServerSideProps 或 getStaticProps
  • 仅在 useEffect 挂钩中获取数据

如何解决渲染问题？

为了确保内容可供爬虫使用：

  • 页面路由器: 使用 getServerSideProps 或 getStaticProps
  • 应用路由器: 默认将组件保留为服务器组件，仅在需要时添加“使用客户端”
  • 数据获取: 获取服务器端关键数据，未使用效果
  • 元数据: 使用 next/head 或元数据 API