通过 PLP SSR 优化电子商务 SEO

Source: Dev.to

问题 – “Hydration Guard” 陷阱

• 症状： view-source 显示 PLP 上 0 个商品链接。
• 页面使用了同步守卫，例如 if (!isClient) return null;，导致不执行 JavaScript 的爬虫无法渲染任何标记。

解决方案 – 技术深度解析

1. 移除 Hydration 阻断

识别并消除只在客户端生效的守卫，这些守卫会阻止服务器渲染。改为在服务器和客户端都能运行的逻辑，确保初始 HTML 始终包含商品网格。

2. 服务器端数据获取

在服务器上获取商品与在浏览器中不同。我们重写了数据层，使其：

• 在 SSR 阶段拉取商品数据。
• 将 Strapi 的分类数据对齐至 Klevu 搜索引擎的需求。

3. 搜索类型逻辑

从特定词搜索切换为 CATNAV（分类导航）并使用通配符查询。这样可以保证整个目录对爬虫可发现。

4. 语义化链接

• 用合适的 “ 标签替换 “加载更多” 按钮，指向下一页结果。
• 用户仍然享受快速的 JavaScript 体验，而爬虫则获得清晰的导航路径。

5. 分类树注入

在 SSR HTML 中注入顶层分类导航组件，在每个 PLP 上生成 10+ 个高价值内部链接。这丰富了站点的链接图谱，提升了爬行深度。

6. 爬虫模拟与审计

# 模拟一次不执行 JavaScript 的爬虫请求
curl -A "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" \
     -H "Accept: text/html" \
     -L https://www.example.com/plp/category/shoes

响应中包含完整的商品标记，确认爬虫现在能够索引该页面。

隐藏的 SEO 杀手：为何客户端 Hydration Guard 正在拖累你的排名

SSR 不仅是性能特性，更是 SEO 必需。通过确保商品网格、面包屑和导航在 首字节 中就已呈现，你为搜索引擎提供了它们需要的“地图”，从而有效索引站点。

关键要点

• 移除仅在客户端渲染的守卫。
• 在 SSR 期间输出关键标记（商品、链接、面包屑）。
• 使用语义化的 “ 元素实现分页和分类导航。
• 使用爬虫模拟工具（如 curl、wget）验证 HTML 中是否包含预期内容。

实施这些改动后，原本不可见的 PLP 变成了可完整索引的资产，显著提升了自然流量和可见度。