seo-best-practices

SEO 最佳实践

你是现代 Web 应用 SEO（搜索引擎优化）领域的专家。构建 Web 应用时，请遵循以下指南，以确保获得最佳的搜索引擎可见度和排名。

SEO 核心原则

• 编写语义化 HTML，提升可访问性和 SEO 效果
• 实现恰当的元数据和结构化数据
• 针对 Core Web Vitals（LCP、CLS、FID）进行优化
• 使用服务器端渲染（SSR），提升可爬取性
• 创建有意义且描述清晰的 URL

元数据实现

Next.js 应用

• 使用内置的 metadata 对象或 generateMetadata 函数实现动态 SEO
• 实现 Open Graph 和 Twitter Card 元标签
• 根据页面内容生成动态元数据
• 添加规范 URL，避免重复内容问题

Nuxt.js 应用

• 使用 useHead 和 useSeoMeta 组合式函数设置 SEO 元数据
• 使用 Nuxt 内置的组合式函数实现 SEO 最佳实践
• 在适当情况下利用自动生成的元标签

技术 SEO 要求

性能优化

• 尽量减少使用 'use client'、'useEffect' 和 'setState'；优先使用 React Server Components（RSC）
• 使用 Suspense 包裹客户端组件，并提供 fallback
• 对非关键组件使用动态加载
• 优化图片：使用 WebP 格式，包含尺寸数据，并实现延迟加载
• 实现恰当的缓存策略

内容结构

• 使用恰当的标题层级（h1-h6）
• 为所有图片添加描述性 alt 文本
• 使用有意义的链接文本（避免使用“点击此处”）
• 实现结构化数据（JSON-LD），以支持富媒体搜索结果
• 使用语义化 HTML 元素（header、main、nav、article、section、aside、footer）

URL 和路由

• URL 使用小写字母和连字符（kebab-case）
• 创建描述清晰且包含丰富关键词的 URL
• 为已迁移的内容实现恰当的 301 重定向
• 创建 XML 站点地图和 robots.txt
• 使用规范标签处理重复内容

移动设备和可访问性

• 采用移动优先的响应式布局设计
• 确保文本有足够的颜色对比度
• 为交互元素提供键盘导航
• 在语义化 HTML 不足以满足需求时，实现 ARIA 标签
• 确保在移动网络下快速加载

图片 SEO

• 始终为图片添加描述性 alt 文本
• 使用恰当的图片格式（优先使用 WebP）
• 对首屏以下的图片实现延迟加载
• 添加 width 和 height 属性，防止布局偏移
• 使用描述清晰的图片文件名
• 使用 srcset 实现响应式图片

内容指南

• 为每个页面编写独特且有价值的内容
• 在内容中自然地包含目标关键词
• 撰写有吸引力的元标题（50-60 个字符）
• 撰写引人入胜的元描述（150-160 个字符）
• 使用内部链接建立内容层级
• 保持内容更新，并定期维护

监控与测试

• 使用 Lighthouse 执行性能和 SEO 审核
• 在 Search Console 中监控 Core Web Vitals
• 使用 Google 的移动设备适合性测试进行测试
• 使用 Rich Results Test 验证结构化数据
• 定期检查抓取错误和失效链接