企业官网建设流程全解析

。而无 JavaScript 渲染意味着：页面 HTML 本身就包含标题、描述、价格、图片等全部核心内容，脚本只是锦上添花。

Enterprise Commerce 的做法是给不同页面分配不同的渲染策略，让每个页面都以"最利于 SEO 的方式"输出：

页面类型	全称	渲染策略	SEO 效果
HP	首页	SSG / ISR	静态输出，秒开
CLP	分类落地页	SSG / ISR	静态输出，含 CMS 内容
PLP	商品列表页	ISR + 动态	主分类静态，筛选页动态
PDP	商品详情页	SSG + ISR	畅销品静态，长尾按需生成

这张表格直接对应项目文档中的前端架构渲染策略矩阵，也是电商 SEO 的经典范式：SEO 可索引的 URL 用静态，长尾交互用动态。

商品详情页如何实现"无 JS 也能渲染"

商品详情页（PDP）是转化率最高的页面，也是最需要 SEO 的页面。在 商品详情页源码/product/[slug]/page.tsx#L41-L58) 中，你会看到三个关键配置：

• export const revalidate = 86400：ISR 增量静态再生成，每 24 小时刷新一次
• export const dynamic = "force-static"：强制静态化输出
• export function generateStaticParams()：构建时预生成热门商品页面

这意味着：用户访问商品页时，浏览器拿到的就是完整的 HTML——商品名、价格、描述、FAQ 全部在首次加载时可见，无需任何脚本执行。项目还贴心地把"首屏以上内容"全部放在服务端渲染，配合 ProductImages 与图片懒加载，进一步降低页面体积。

结构化数据（JSON-LD）：让搜索结果更丰富

无 JavaScript 渲染解决"能被抓取"，结构化数据则解决"抓取得漂亮"。在 商品元数据文件/product/[slug]/metadata.ts#L38-L67) 中，项目为每个商品生成了完整的 schema.org Product JSON-LD：

• 商品名称、描述、图片、品牌
• 价格、币种、库存状态
• 30 天退货政策

这些结构化数据让商品有机会以富媒体卡片（价格、评分、库存）形式出现在搜索结果页，显著提升点击率。同时，generateMetadata/product/[slug]/metadata.ts#L14-L36) 还自动生成 Title、Description、Keywords 与 Canonical 链接，避免参数化 URL 造成重复内容。

用 Bloom Filter 处理海量重定向

电商网站迁移或促销结束后，会产生大量旧链接，重定向处理不当会严重浪费爬虫预算。Enterprise Commerce 的解决方案非常巧妙：在 middleware.ts 中使用布隆过滤器（Bloom Filter）预先判断"该路径是否存在重定向"，命中后才调用重定向 API。

为什么不用普通查询？因为数以万计的重定向规则如果逐个匹配，中间件会拖慢每一次请求；而 Bloom Filter 以极小的内存和 O(1) 时间完成"是否存在"的预判，把重定向查询的负担降到最低。相关数据存储在 bloom-filter.json，由 generate-bloom-filter.ts 脚本生成。对爬虫而言，这意味着 301/302 响应更快、更准确，抓取效率大幅提升。

动态生成 Sitemap：精准控制抓取优先级

Sitemap 是引导爬虫预算的"路线图"。在 sitemap.ts 中，项目从 Algolia 直接拉取商品与分类数据，动态生成站点地图：

• 首页与法律页面：priority: 1，每日更新
• 商品页与分类页：priority: 0.5，按月更新，并带上lastModified
• 搜索分页：priority: 0.5，低频更新

通过调整 priority 与 changeFrequency，你可以明确告诉搜索引擎"先抓这里、少抓那里"，把有限的爬虫预算集中到高转化页面。分类页的落地页图片（如电子产品分类）也可以像下面这样在页面中直接引用，强化主题相关性：

图片优化：别让图片拖垮爬虫与用户体验

图片在电商页面中占比最大，也是爬虫预算的隐形杀手。在 next.config.mjs 中可以看到精心调优的图片配置：

• 统一输出 WebP 格式，体积更小、加载更快
• 精细化尺寸档位（16~1536px），按设备输出最合适的图片
• minimumCacheTTL设为约一年，命中 CDN 缓存的图片几乎零成本

配合next/image的自动优化，商品图、分类图、Banner 图都能以最优体积呈现，既提升 Core Web Vitals，也让爬虫抓取图片资源时更省预算。

分类页与列表页：把静态留给爬虫，把动态留给用户

分类落地页（CLP）承担着"向搜索引擎展示分类内容"的重任。在 CLP 页面源码/category/clp/[slug]/page.tsx) 中，页面以revalidate = 86400的 ISR 方式输出静态 HTML，商品展示区则按需加载——这样首屏内容始终对爬虫可见。

而商品列表页（PLP）的筛选、排序、分页则走查询参数驱动的动态渲染，配合 middleware.ts 中的路由重写，将/category/xxx?page=2优雅地映射为可缓存的 URL 结构。静态与动态的边界划分，正是爬虫预算优化的精髓所在。

总结：一套可复制的电商 SEO 心法

通过 Enterprise Commerce 的实践，我们可以提炼出电商 SEO 的四个黄金法则：

1. 能静态就静态：核心页面服务端渲染，让爬虫"无 JS 可读"
2. 预算分级管理：用 Sitemap 优先级与渲染策略，把抓取额度留给高价值页面
3. 善用结构化数据：JSON-LD 让商品以富媒体形式出现在搜索结果
4. 中间层加速：Bloom Filter 重定向 + Algolia 秒级检索，降低全站延迟

如果你正在构建大型电商网站，不妨克隆这个开源项目（仓库地址：https://gitcode.com/gh_mirrors/en/enterprise-commerce）亲手体验它的完整实现。对照 middleware.ts、sitemap.ts 与 商品页/product/[slug]/page.tsx) 三处核心代码，你就能快速搭建起一套兼顾爬虫预算优化与无 JavaScript 渲染的企业级商城 SEO 体系。🚀

【免费下载链接】enterprise-commerce⚡ Next.js enterprise-grade storefront for high-performance e-commerce with Shopify backend and Algolia middle layer with excellent browsing journey项目地址: https://gitcode.com/gh_mirrors/en/enterprise-commerce