用途:把 Next.js 页面改造成符合 SEO 规范的页面,覆盖全局配置与单页优化,并兼顾无障碍。
主要能力:
- 全局设置(每项目一次):检查 src/app/layout.tsx 根元数据(title 模板、description、metadataBase、openGraph、twitter);创建 src/app/sitemap.ts、src/app/robots.ts、src/app/manifest.ts;检查 src/app/icon.png、src/app/apple-icon.png;配置 OpenGraph 图片(静态 src/app/opengraph-image.png,1200x630px,或动态 opengraph-image.tsx);在 layout 的 body 中加入 JSON-LD 结构化数据。
- 单页优化:若页面以 'use client' 开头,将客户端逻辑移到 src/features/<feature>/components/,页面改为服务端组件;导出页面级 metadata;审查语义化 HTML(main、带 id 的 section、article、标题层级);图片使用 Image 组件并带 alt、width、height。
- 无障碍:交互元素加 ARIA 标签、正确设置 html lang、支持键盘导航。
- 验证:运行 pnpm build 与 pnpm dev,访问 /sitemap.xml 和 /robots.txt;按清单核对根元数据、sitemap.ts、robots.ts、manifest.ts、图标、OpenGraph 图片、JSON-LD、页面元数据、语义化 HTML、构建通过。
适用场景:SEO 优化请求、页面发布到生产前、涉及元数据或搜索可见性的任务、无障碍审计。
限制:资料未提供具体收费、价格、平台支持范围与效果数据;示例中的域名、站点名等需替换为实际值。