SSR Inspector

代码木鱼

概述
SSR Inspector — 适用于任何网站的服务器端渲染和 SEO 审核

准确查看 Googlebot 和其他抓取工具可以在您的网页上看到和不能看到的内容。 SSR Inspector 在您的实时浏览器 DOM 和服务器提供的原始 HTML 以及来自 GSC URL 检查或丰富结果测试的 Google 渲染 HTML 之间运行 3 路比较。该扩展程序突出显示了 Google 在页面上缺少的确切内容。

如果 Google 看不到您的内容，它就无法在搜索中对其进行排名，也无法在生成搜索引擎的 AI 答案中引用它。 SSR Inspector 在几秒钟内即可发现这些间隙。

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
这是给谁的
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

• SEO 专家审核大量使用 JavaScript 的网站
• 开发人员调试服务器端渲染和水合作用问题
• 技术 SEO 顾问为客户运行 SSR 审核
• 营销团队验证 Googlebot 是否可以读取其内容
• 任何从事 GEO 和 AEO（生成引擎优化）工作且需要检查 LLM 爬虫可见性的人

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
这解决了什么问题
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

现代网站构建为单页应用程序和 JavaScript 渲染应用程序通常在客户端渲染内容。您的用户可以在浏览器中正确地看到该页面。 Googlebot 可能会看到一个空壳。

服务器端渲染与客户端渲染的争论很重要，因为每个主要的搜索和人工智能爬虫在爬行期间都对 JavaScript 执行有限制。如果您的 SSR 设置不起作用，则仅在 JS 运行后出现的内容可能对搜索引擎完全不可见。这包括初始油漆后呈现的产品列表。它包括客户端脚本获取的价格。它包括异步加载的审阅小部件。它包括通过 API 填充的常见问题解答。它包括由 JavaScript 帮助程序注入的模式标记。

此扩展检测到的常见 SSR 和渲染问题：
• 客户端呈现的内容永远不会进入 Google 呈现的 HTML
• 服务器 HTML 和客户端渲染的 DOM 之间的水合作用不匹配
• 缺少 Google 无法看到的 H1 和 H2 标题
• 架构标记 (JSON-LD) 存在于您的浏览器中，但不存在于 Google 的视图中
• 您的实时页面和 Google 抓取版本之间的规范 URL 漂移
• 由 JavaScript 添加但爬虫会错过的内部链接
• 无法为机器人呈现的财产列表或产品卡
• 检查加载太晚而无法为搜索引擎建立索引的小部件
• 动态渲染与服务器端渲染的差异
• 用动态内容应对服务器端渲染问题
• 当水合作用破裂时，框架级 SSR 差距会损害 SEO
• 移动与桌面内容对等问题损害了移动优先索引

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
工作原理 — 三向渲染比较
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

SSR Inspector 会比较任何 URL 的三个 HTML 快照：

1. RAW HTML — 服务器在执行任何 JavaScript 之前发送的 HTML。这是一个简单的爬虫首先看到的。 SSR Inspector 使用您选择的用户代理获取此信息。

2. LIVE DOM — 所有 JavaScript 运行后浏览器完全渲染的 HTML。这就是您的人类用户所看到的。

3. GOOGLE-RENDERED HTML — 由 Google 的 Web 渲染服务生成的 HTML。您可以从 Google Search Console URL 检查（查看已爬网页面 → HTML 选项卡）或丰富结果测试（查看渲染的 HTML）中粘贴此内容。

该扩展程序对这三个快照进行详细的比较，并向您显示：

✓ Google 渲染的 HTML 中可见的内容（绿色轮廓）
✗ Google 视图中缺少浏览器中的内容（红色轮廓）
⚡ Google 成功渲染的 JavaScript 添加内容（蓝色轮廓）
⚠ Google 渲染器丢弃的原始 HTML 内容（黄色轮廓）
就像 Chrome DevTools 检查模式一样，每个差异都直接在页面上概述。单击侧面板中的任意项目即可在页面上滚动到该项目并闪烁突出显示。

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
主要特点
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

► 移动与桌面奇偶校验
默认情况下，Google 会对您网页的移动版本建立索引。仅提供给桌面爬虫的内容对于排名是不可见的。每当您使用 Googlebot 用户代理进行审核时，SSR Inspector 都会运行自动奇偶校验。该扩展获取移动和桌面版本并显示每个差异。专用的奇偶校验选项卡显示仅在桌面上的内容（移动优先索引风险）以及仅在移动设备上的内容以及可能会失去丰富结果资格的内容。

► 用户代理切换器
使用多个爬虫用户代理测试您的页面。自移动优先索引上线以来，Google 的移动抓取工具已成为默认设置。该下拉列表还包括 Google 的桌面抓取工具以供比较。 Bing 的搜索引擎机器人可用于跨引擎检查。包含来自主要 AI 助手的 LLM 爬虫，因此您可以验证您的内容是否可用于生成搜索引用。您还可以粘贴任何自定义用户代理字符串。此功能对于验证所有主要爬虫是否可以访问您的内容以及检测隐藏行为至关重要。

► 自动打开侧面板
单击“运行审核”，详细的审核面板会自动在您的页面旁边打开。审计贯穿每个阶段，实时显示进展情况。没有两步“单击打开面板”工作流程。

► 详细的侧面板审核
九个选项卡涵盖了每个 SEO 关键领域：
• 概述——结论和关键统计数据一目了然
• 内容 — Google 视图中缺少文本，点击定位
• Meta & Canonical — 标题和描述以及规范和机器人标签的比较
• 标题 — 每个 H1 和 H2 都有可见性状态
• 架构 — 在每个源中检测到的 JSON-LD 类型
• 链接 — Google 可以看到和看不到的内部链接
• 移动/桌面奇偶校验 — 移动优先索引审核
• 标记 — 按严重性排序的优先问题
• 操作方法/常见问题解答 — 内置教程和词汇指南

► 点击定位
单击面板中的任何标记元素，SSR Inspector 会自动聚焦页面。扩展滚动到该元素并在其上方发出一个弹跳箭头。不再需要通过 DOM 进行搜索。

► 一键丰富结果测试
内置按钮会使用您当前的页面网址预先填充 Google 的丰富搜索结果测试，因此您无需复制粘贴。每次审核可节省三次点击。

► 适用于任何 JavaScript 框架
适用于任何 JavaScript 框架或静态站点生成器。 SSR Inspector 读取渲染的 DOM 输出。底层框架并不重要——任何在浏览器中生成 HTML 的内容都是可审核的。

► 智能匹配引擎
智能地处理动态值。每分钟变化的财产计数不会触发误报。日期和时间戳在比较之前进行标准化。即使内容在爬网之间稍微改写，子字符串包含和模糊单词重叠回退也可以使标志保持有意义。

► 隐私第一
所有审核处理都在您的浏览器本地进行。不会将 URL 或 HTML 或审核结果发送到任何外部服务器。粘贴的 HTML 仅存储在本地浏览器存储中。

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
常见的 SSR 审计用例
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

• 验证 Next.js 页面上的 React 服务器端渲染
• 使用 Angular Universal 审核 Angular 服务器端渲染
• 检查 Vue.js 服务器端渲染设置以进行 SEO
• 验证预渲染是否适用于 SPA
• 查找客户端 React 应用程序中的水合不匹配
• 比较动态渲染与服务器端渲染结果
• 跨不同框架调试服务器端渲染的 SEO
• 测量服务器端渲染和客户端渲染之间的内容可见性差异
• 测试边缘渲染或 CDN 预渲染是否与 Googlebot 的视图匹配
• 审核LLM爬虫可见性以生成搜索引用
• 在移动优先索引对您的排名造成影响之前，捕获移动内容与桌面内容的偏差

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
为什么服务器端渲染对于 SEO 很重要
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

服务器端渲染 (SSR) 意味着 HTML 在到达浏览器之前已在服务器上完全组装。客户端渲染 (CSR) 意味着服务器发送一个大部分为空的 shell，浏览器使用 JavaScript 组装页面。

Google 的抓取工具可以执行 JavaScript，但存在现实限制。有预算超时。有资源上限。有一个两波抓取过程，其中呈现的内容与初始 HTML 分开处理。复杂的 CSR 页面通常包含对于渲染器来说太晚到达的内容。其他主要的搜索和人工智能爬虫有更严格的 JavaScript 处理。这就是为什么 LLM 优先的 SEO 越来越需要适当的 SSR 或静态生成。

客户端和服务器端渲染之间的差异直接影响爬虫的首次有意义绘制的时间。它会影响是否检测到架构标记。它会影响是否遵循内部链接。它会影响您的标题和标题以及元标记是否被正确读取。它会影响您的网页是否有资格获得丰富的结果。它会影响您的内容是否被生成搜索引擎引用。

SSR Inspector 使这些看不见的差异变得可见。

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
快速启动
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

1. 安装 SSR Inspector 并将其固定到工具栏
2. 打开您要审核的任意页面
3. 使用简单选项获取 Google 渲染的 HTML（在弹出窗口中单击“打开此 URL 的丰富结果测试”→ 等待 Google 测试 → 单击“查看渲染的 HTML”→ 复制）或使用 GSC URL 检查 → 查看已爬网页面 → HTML 选项卡
4. 单击 SSR Inspector 图标并粘贴 HTML，然后单击“运行 3 向审核”
5. 审核面板自动打开。查看页面上的彩色轮廓或浏览面板中的详细选项卡。

总时间：每页不到两分钟。

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
有何不同
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

大多数 SEO 工具仅检查原始 HTML 服务器响应。像 Screaming Frog 和 Sitebulb 这样的渲染爬虫可以执行 JavaScript，但不能与 Google 的特定渲染器生成的内容进行比较。

SSR Inspector 是围绕一个关键事实构建的：Google 渲染的 HTML 是 SEO 的基本事实。别的都无所谓。如果您的内容不在该 HTML 中，则不会排名。

通过让您粘贴 Google 实际渲染的 HTML（而不是模拟它），SSR Inspector 可以为您提供准确而快速的比较。它适用于任何没有 API 密钥的页面。它的工作方式没有速率限制。而且无需猜测即可工作。

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
技术细节
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

• Manifest V3 现代 Chrome 扩展架构
• 使用 declarativeNetRequest 进行用户代理重写
• 检测 JSON-LD 架构和 Open Graph 标签以及 Twitter 卡元数据以及 hreflang 和规范标签
• 通过去除 UTM 参数和尾部斜杠来标准化 href 比较
• 对嵌套 DOM 段进行重复数据删除，以实现准确的内容差异
• 智能标题匹配逻辑处理动态计数和日期漂移
• 基于推送的面板更新，无需轮询和即时渲染
• 将审核结果导出为 JSON 以进行报告

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
常见问题解答
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

问：这适用于我的 JavaScript 框架吗？
答：是的 - SSR Inspector 可与任何框架或静态站点生成器配合使用，因为它读取渲染的 DOM 输出而不是源代码。如果您的框架在浏览器中生成 HTML，则扩展程序可以对其进行审核。

问：为什么我需要手动粘贴 Google 渲染的 HTML？
答：GSC URL 检查 API 和富媒体搜索结果测试都不会以编程方式公开呈现的 HTML。从 Google 自己的工具粘贴真实 HTML 比模拟渲染器更准确。

问：这会将我的数据发送到任何地方吗？
答：不会。所有处理均在本地进行。没有数据离开您的浏览器。该扩展程序不会收集任何个人身份信息。

问：我可以审核登录后的页面吗？
答：可以，只要 Google 也可以抓取它们。该扩展程序会读取您当前的浏览器会话。

问：这能检测到隐形吗？
答：是的。在 Googlebot UA 和 Chrome UA 之间切换，以比较机器人和用户看到的内容。

问：这会取代 Screaming Frog 或 Sitebulb 吗？
答：不，这些工具用于站点范围内的爬行。 SSR Inspector 用于深度页面级 SSR 审核。

问：移动/桌面奇偶校验是否适用于所有站点？
答：只要站点对移动和桌面用户代理的响应不同，它就会起作用。如果两个 UA 收到相同的 HTML，奇偶校验选项卡将显示“奇偶校验正常”——这是理想状态。

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
支持与反馈
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

发现错误或有功能想法？电子邮件 devendra@sermonks.com

为 SEO 社区精心打造。
由 Devendra Saini 在印度开发。

SSR Inspector 1.6.0.crx	.crx	1.6.0	62.79KiB	支持
SSR Inspector 1.6.0.zip	.zip	1.6.0	62.79KiB	不支持