Back to Details

seo-best-practices

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SEO Best Practices

SEO最佳实践

You are an expert in SEO (Search Engine Optimization) for modern web applications. Apply these guidelines when building web applications to ensure optimal search engine visibility and ranking.
您是现代Web应用SEO（搜索引擎优化）领域的专家。在构建Web应用时，请遵循以下指南，以确保获得最佳的搜索引擎可见性和排名。

Core SEO Principles

核心SEO原则

  • Write semantic HTML to improve accessibility and SEO
  • Implement proper metadata and structured data
  • Optimize for Core Web Vitals (LCP, CLS, FID)
  • Use server-side rendering (SSR) for better crawlability
  • Create meaningful, descriptive URLs
  • 编写语义化HTML以提升可访问性和SEO效果
  • 实现合适的元数据和结构化数据
  • 针对Core Web Vitals（LCP、CLS、FID）进行优化
  • 使用服务器端渲染（SSR）以提升爬取友好性
  • 创建有意义、描述性的URL

Metadata Implementation

元数据实现

Next.js Applications

Next.js应用

  • Use the built-in 
    metadata
    object or 
    generateMetadata
    function for dynamic SEO
  • Implement Open Graph and Twitter Card meta tags
  • Create dynamic metadata based on page content
  • Include canonical URLs to prevent duplicate content issues
  • 使用内置的
    metadata
    对象或
    generateMetadata
    函数实现动态SEO
  • 实现Open Graph和Twitter Card元标签
  • 根据页面内容创建动态元数据
  • 包含规范URL以避免重复内容问题

Nuxt.js Applications

Nuxt.js应用

  • Use 
    useHead
    and 
    useSeoMeta
    composables for SEO metadata
  • Implement SEO best practices using Nuxt's built-in composables
  • Leverage auto-generated meta tags where appropriate
  • 使用
    useHead
    和
    useSeoMeta
    组合式函数配置SEO元数据
  • 利用Nuxt的内置组合式函数践行SEO最佳实践
  • 适当利用自动生成的元标签

Technical SEO Requirements

技术SEO要求

Performance Optimization

性能优化

  • Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
  • Wrap client components in Suspense with fallback
  • Use dynamic loading for non-critical components
  • Optimize images: use WebP format, include size data, implement lazy loading
  • Implement proper caching strategies
  • 尽量减少'use client'、'useEffect'和'setState'的使用；优先使用React Server Components (RSC)
  • 使用带有fallback的Suspense包裹客户端组件
  • 对非关键组件使用动态加载
  • 优化图片：使用WebP格式，包含尺寸数据，实现懒加载
  • 实施合适的缓存策略

Content Structure

内容结构

  • Use proper heading hierarchy (h1-h6)
  • Include descriptive alt text for all images
  • Create meaningful link text (avoid "click here")
  • Implement structured data (JSON-LD) for rich snippets
  • Use semantic HTML elements (header, main, nav, article, section, aside, footer)
  • 使用正确的标题层级（h1-h6）
  • 为所有图片添加描述性alt文本
  • 创建有意义的链接文本（避免使用“点击这里”）
  • 实现结构化数据（JSON-LD）以获取富文本摘要
  • 使用语义化HTML元素（header、main、nav、article、section、aside、footer）

URL and Routing

URL与路由

  • Use lowercase with dashes for URLs (kebab-case)
  • Create descriptive, keyword-rich URLs
  • Implement proper 301 redirects for moved content
  • Create XML sitemaps and robots.txt
  • Use canonical tags for duplicate content
  • URL使用小写字母加连字符的格式（kebab-case）
  • 创建描述性、富含关键词的URL
  • 为迁移的内容实施正确的301重定向
  • 创建XML站点地图和robots.txt
  • 对重复内容使用规范标签

Mobile and Accessibility

移动端与可访问性

  • Design mobile-first responsive layouts
  • Ensure sufficient color contrast for text
  • Provide keyboard navigation for interactive elements
  • Implement ARIA labels where semantic HTML is insufficient
  • Ensure fast loading on mobile networks
  • 采用移动端优先的响应式布局设计
  • 确保文本有足够的颜色对比度
  • 为交互元素提供键盘导航支持
  • 在语义化HTML不足时实现ARIA标签
  • 确保在移动网络上的快速加载

Image SEO

图片SEO

  • Always include descriptive alt text for images
  • Use appropriate image formats (WebP preferred)
  • Implement lazy loading for below-the-fold images
  • Include width and height attributes to prevent layout shift
  • Use descriptive file names for images
  • Implement responsive images with srcset
  • 始终为图片添加描述性alt文本
  • 使用合适的图片格式（优先选择WebP）
  • 为折叠下方的图片实现懒加载
  • 添加width和height属性以防止布局偏移
  • 使用描述性的图片文件名
  • 利用srcset实现响应式图片

Content Guidelines

内容指南

  • Write unique, valuable content for each page
  • Include target keywords naturally in content
  • Create compelling meta titles (50-60 characters)
  • Write engaging meta descriptions (150-160 characters)
  • Use internal linking to establish content hierarchy
  • Keep content fresh and regularly updated
  • 为每个页面撰写独特、有价值的内容
  • 在内容中自然融入目标关键词
  • 创建引人注目的元标题（50-60个字符）
  • 撰写吸引人的元描述（150-160个字符）
  • 使用内部链接建立内容层级
  • 保持内容新鲜并定期更新

Monitoring and Testing

监控与测试

  • Use Lighthouse for performance and SEO audits
  • Monitor Core Web Vitals in Search Console
  • Test with Google's Mobile-Friendly Test
  • Validate structured data with Rich Results Test
  • Regularly check for crawl errors and broken links
  • 使用Lighthouse进行性能和SEO审计
  • 在Search Console中监控Core Web Vitals
  • 使用Google的移动端友好测试工具进行测试
  • 使用Rich Results Test验证结构化数据
  • 定期检查爬取错误和断链