SEO优化指南

# 1. 元数据优化 (5分钟)
vim app/layout.tsx  # 全局SEO配置
vim app/page.tsx    # 首页SEO设置

# 2. 结构化数据 (5分钟)  
vim app/sitemap.ts  # 自动sitemap生成
vim app/robots.txt  # 搜索引擎指引

# 3. 性能优化 (5分钟)
bun add @next/bundle-analyzer
# 检查包大小优化

投入: 1周开发时间 + 长期内容维护  
产出: 每月1000+有机访问 + 10-50个高质量用户注册
年化ROI: 500%-1000%（比付费广告高10倍）

爬取页面 → 解析内容 → 评估质量 → 计算排名 → 展示结果

// 自动生成最佳SEO结构
export const metadata: Metadata = {
  title: "页面标题",
  description: "页面描述",
  openGraph: { /* 自动社交分享 */ },
  robots: { /* 爬虫指令 */ },
}

// 服务端渲染确保内容完整
export default async function Page() {
  const data = await fetchData() // 服务端获取数据
  return <div>{data.content}</div> // 搜索引擎看到完整内容
}

1. 内容质量 (40%) - 原创、有价值、解决问题
2. 技术SEO (30%) - 页面速度、移动友好、结构化数据  
3. 用户体验 (20%) - 停留时间、跳出率、点击率
4. 权威性 (10%) - 外链、域名年龄、品牌知名度

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    template: '%s | 你的产品名',
    default: '你的产品名 - 解决什么问题的一句话描述',
  },
  description: '详细描述你的产品价值，包含核心关键词，控制在150-160字符',
  keywords: ['关键词1', '关键词2', '关键词3'],
  authors: [{ name: '你的名字', url: 'https://yoursite.com' }],
  creator: '你的产品名',
  publisher: '你的公司名',
  
  // Open Graph (社交分享)
  openGraph: {
    type: 'website',
    locale: 'zh_CN',
    url: 'https://yoursite.com',
    title: '你的产品名',
    description: '社交分享描述',
    siteName: '你的产品名',
    images: [
      {
        url: '/og-image.jpg',
        width: 1200,
        height: 630,
        alt: '产品展示图',
      },
    ],
  },
  
  // Twitter Cards
  twitter: {
    card: 'summary_large_image',
    site: '@你的推特',
    creator: '@你的推特',
  },
  
  // Robots
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  
  // 验证码
  verification: {
    google: 'your-google-verification-code',
    yandex: 'your-yandex-verification-code',
  },
}

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

interface Props {
  params: { slug: string }
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await getPost(params.slug)
  
  return {
    title: post.title,
    description: post.excerpt,
    
    // 动态生成关键词
    keywords: [
      ...post.tags,
      '你的产品关键词',
      '行业关键词',
    ],
    
    // 文章特定的Open Graph
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.publishedAt,
      modifiedTime: post.updatedAt,
      authors: [post.author.name],
      images: [
        {
          url: post.featuredImage,
          alt: post.title,
        },
      ],
    },
    
    // 结构化数据
    other: {
      'article:author': post.author.name,
      'article:published_time': post.publishedAt,
      'article:modified_time': post.updatedAt,
      'article:section': post.category,
      'article:tag': post.tags.join(','),
    },
  }
}

// app/sitemap.ts
import { MetadataRoute } from 'next'
import { allPosts } from 'content-collections'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://yoursite.com'
  
  // 静态页面
  const staticPages: MetadataRoute.Sitemap = [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: `${baseUrl}/pricing`,
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.9,
    },
    {
      url: `${baseUrl}/docs`,
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.7,
    },
  ]
  
  // 动态内容页面
  const blogPages: MetadataRoute.Sitemap = allPosts.map((post) => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt || post.publishedAt),
    changeFrequency: 'monthly',
    priority: 0.6,
  }))
  
  // 产品页面
  const productPages: MetadataRoute.Sitemap = await getProducts().then(
    (products) =>
      products.map((product) => ({
        url: `${baseUrl}/products/${product.slug}`,
        lastModified: new Date(product.updatedAt),
        changeFrequency: 'weekly',
        priority: 0.8,
      }))
  )
  
  return [...staticPages, ...blogPages, ...productPages]
}

// app/robots.ts
import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://yoursite.com'
  
  return {
    rules: [
      {
        userAgent: '*',
        allow: ['/'],
        disallow: [
          '/admin/',
          '/api/',
          '/private/',
          '/_next/',
          '/temp/',
        ],
      },
      {
        userAgent: 'GPTBot', // 禁止AI爬虫
        disallow: ['/'],
      },
    ],
    sitemap: `${baseUrl}/sitemap.xml`,
    host: baseUrl,
  }
}

// components/seo/StructuredData.tsx
interface StructuredDataProps {
  type: 'WebSite' | 'Article' | 'Product' | 'Organization'
  data: any
}

export function StructuredData({ type, data }: StructuredDataProps) {
  const generateWebSiteSchema = () => ({
    '@context': 'https://schema.org',
    '@type': 'WebSite',
    name: data.name,
    url: data.url,
    description: data.description,
    potentialAction: {
      '@type': 'SearchAction',
      target: {
        '@type': 'EntryPoint',
        urlTemplate: `${data.url}/search?q={search_term_string}`,
      },
      'query-input': 'required name=search_term_string',
    },
  })

  const generateArticleSchema = () => ({
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: data.title,
    description: data.description,
    image: data.image,
    author: {
      '@type': 'Person',
      name: data.author.name,
      url: data.author.url,
    },
    publisher: {
      '@type': 'Organization',
      name: data.publisher.name,
      logo: {
        '@type': 'ImageObject',
        url: data.publisher.logo,
      },
    },
    datePublished: data.publishedAt,
    dateModified: data.updatedAt,
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': data.url,
    },
  })

  const generateProductSchema = () => ({
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: data.name,
    description: data.description,
    image: data.images,
    sku: data.sku,
    brand: {
      '@type': 'Brand',
      name: data.brand,
    },
    offers: {
      '@type': 'Offer',
      price: data.price,
      priceCurrency: data.currency,
      availability: 'https://schema.org/InStock',
      seller: {
        '@type': 'Organization',
        name: data.seller,
      },
    },
  })

  const generateOrganizationSchema = () => ({
    '@context': 'https://schema.org',
    '@type': 'Organization',
    name: data.name,
    url: data.url,
    logo: data.logo,
    description: data.description,
    contactPoint: {
      '@type': 'ContactPoint',
      telephone: data.phoneNumber,
      contactType: 'customer service',
    },
    sameAs: data.socialLinks,
  })

  const getSchema = () => {
    switch (type) {
      case 'WebSite':
        return generateWebSiteSchema()
      case 'Article':
        return generateArticleSchema()
      case 'Product':
        return generateProductSchema()
      case 'Organization':
        return generateOrganizationSchema()
      default:
        return null
    }
  }

  const schema = getSchema()

  if (!schema) return null

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  )
}

// 使用示例
<StructuredData
  type="Article"
  data={{
    title: "如何使用AI写作工具提高效率",
    description: "详细指南...",
    author: { name: "作者名", url: "/author/xxx" },
    publishedAt: "2024-01-01",
    updatedAt: "2024-01-02",
    image: "/article-image.jpg",
    url: "/blog/ai-writing-guide"
  }}
/>

// next.config.ts
const nextConfig = {
  // 图片优化
  images: {
    formats: ['image/webp', 'image/avif'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
  
  // 压缩优化
  compress: true,
  
  // 实验性功能
  experimental: {
    optimizeCss: true,
    optimizePackageImports: ['lucide-react', '@radix-ui/react-icons'],
  },
  
  // 打包分析
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        fs: false,
        net: false,
        tls: false,
      }
    }
    return config
  },
}

module.exports = nextConfig

// components/OptimizedImage.tsx
import Image from 'next/image'

interface OptimizedImageProps {
  src: string
  alt: string
  width: number
  height: number
  priority?: boolean
  className?: string
}

export function OptimizedImage({
  src,
  alt,
  width,
  height,
  priority = false,
  className,
}: OptimizedImageProps) {
  return (
    <Image
      src={src}
      alt={alt}
      width={width}
      height={height}
      priority={priority}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyydwyznngkKO5xTxJGWMsOSJTFmHdT3FPNDcJ5WxuZ2WNp5Y2GGcUkuJt5t4/jU/h2LVl48jgDa+ioKGhgAUIhQdWNaK1vgHLYfMpPMSC8+kCa8EeMDBAK2BvXPcY74Fhz9Nf/2Q=="
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      className={className}
      style={{
        width: '100%',
        height: 'auto',
      }}
    />
  )
}

// app/layout.tsx
import { Inter, JetBrains_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
  preload: true,
  fallback: ['system-ui', 'arial'],
})

const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  display: 'swap', 
  variable: '--font-jetbrains-mono',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh" className={`${inter.variable} ${jetbrainsMono.variable}`}>
      <body className="font-sans">{children}</body>
    </html>
  )
}

// tools/keyword-research.ts
interface KeywordData {
  keyword: string
  searchVolume: number
  difficulty: number
  intent: 'informational' | 'commercial' | 'transactional'
}

export const primaryKeywords: KeywordData[] = [
  {
    keyword: 'AI写作工具',
    searchVolume: 5000,
    difficulty: 45,
    intent: 'commercial',
  },
  {
    keyword: '自动写作软件',
    searchVolume: 2000,
    difficulty: 35,
    intent: 'commercial',
  },
  {
    keyword: '如何提高写作效率',
    searchVolume: 8000,
    difficulty: 25,
    intent: 'informational',
  },
]

// 内容规划
export const contentStrategy = {
  主要页面: {
    '首页': ['AI写作工具', '智能写作助手'],
    '产品页': ['自动写作软件', 'AI文案生成'],
    '定价页': ['AI写作工具价格', '写作软件费用'],
  },
  博客内容: {
    '教程类': ['如何使用AI写作', '写作技巧指南'],
    '对比类': ['AI写作工具对比', '最好的写作软件'],
    '案例类': ['AI写作成功案例', '用户故事分享'],
  },
}

---
title: "如何用AI写作工具提高写作效率10倍【2024完整指南】"
description: "详细教程：从选择AI写作工具到掌握高级技巧，让你的写作效率提升10倍。包含实战案例和工具推荐。"
publishedAt: "2024-01-15"
updatedAt: "2024-01-20"
category: "教程"
tags: ["AI写作", "写作技巧", "效率提升"]
author: "专家姓名"
---

# 如何用AI写作工具提高写作效率10倍【2024完整指南】

## 为什么AI写作工具能提升效率？

**核心价值**：
- 🚀 **速度提升**: 写作速度提高5-10倍
- 💡 **创意激发**: AI提供无限创意灵感  
- ✍️ **质量保证**: 自动优化语法和表达

## 选择AI写作工具的3个标准

### 1. 功能完整性
- 支持多种文体（文章、邮件、社交媒体）
- 提供模板和框架
- 具备编辑和优化功能

### 2. 易用性
```typescript
// 理想的API调用示例
const result = await aiWriter.generate({
  type: 'blog_post',
  topic: 'AI写作工具',
  tone: 'professional',
  length: 1000
})

## 🔧 技术SEO监控

### 1. 性能监控设置

**Core Web Vitals监控**:
```typescript
// components/analytics/WebVitals.tsx
'use client'

import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
  useReportWebVitals((metric) => {
    // 发送到分析服务
    const body = JSON.stringify(metric)
    
    // 可以发送到Google Analytics
    if ('gtag' in window) {
      window.gtag('event', metric.name, {
        event_category: 'Web Vitals',
        value: Math.round(metric.value),
        event_label: metric.id,
        non_interaction: true,
      })
    }
    
    // 发送到自定义分析
    fetch('/api/analytics/web-vitals', {
      method: 'POST',
      body,
      headers: { 'Content-Type': 'application/json' },
    }).catch(console.error)
  })

  return null
}

// scripts/seo-audit.ts
import { allDocs } from 'content-collections'

interface SEOIssue {
  page: string
  issue: string
  severity: 'error' | 'warning' | 'info'
}

export async function auditSEO(): Promise<SEOIssue[]> {
  const issues: SEOIssue[] = []
  
  for (const doc of allDocs) {
    // 检查标题长度
    if (!doc.title || doc.title.length < 30) {
      issues.push({
        page: doc.url,
        issue: '标题过短（建议30-60字符）',
        severity: 'warning',
      })
    }
    
    if (doc.title && doc.title.length > 60) {
      issues.push({
        page: doc.url,
        issue: '标题过长（建议30-60字符）',
        severity: 'warning',
      })
    }
    
    // 检查描述长度
    if (!doc.description || doc.description.length < 120) {
      issues.push({
        page: doc.url,
        issue: '描述过短（建议120-160字符）',
        severity: 'error',
      })
    }
    
    // 检查关键词密度
    if (doc.content && doc.title) {
      const keywordDensity = calculateKeywordDensity(doc.content, doc.title)
      if (keywordDensity < 0.5) {
        issues.push({
          page: doc.url,
          issue: '关键词密度过低',
          severity: 'info',
        })
      }
    }
  }
  
  return issues
}

function calculateKeywordDensity(content: string, keyword: string): number {
  const words = content.toLowerCase().split(/\s+/)
  const keywordCount = words.filter(word => 
    word.includes(keyword.toLowerCase())
  ).length
  
  return (keywordCount / words.length) * 100
}

# 1. 检查robots.txt
curl https://yoursite.com/robots.txt

# 2. 验证sitemap
curl https://yoursite.com/sitemap.xml

# 3. 手动提交到Google Search Console
# 访问 https://search.google.com/search-console

// 1. 图片优化
<Image
  src="/hero.jpg"
  alt="产品展示"
  width={800}
  height={600}
  priority // 首屏图片
  sizes="(max-width: 768px) 100vw, 50vw"
/>

// 2. 字体优化
const inter = Inter({
  subsets: ['latin'],
  display: 'swap', // 关键：避免字体闪烁
})

// 3. 代码分割
const LazyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <div>Loading...</div>,
})

// 规范化URL
export const metadata: Metadata = {
  alternates: {
    canonical: 'https://yoursite.com/canonical-url',
  },
}

// 处理分页内容
export function generateMetadata({ searchParams }: {
  searchParams: { page?: string }
}): Metadata {
  const page = Number(searchParams.page) || 1
  
  return {
    title: page > 1 ? `文章列表 - 第${page}页` : '文章列表',
    robots: {
      index: page === 1, // 只索引第一页
      follow: true,
    },
  }
}

// lib/analytics.ts
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID

export const gtag = (...args: any[]) => {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag(...args)
  }
}

export const trackPageview = (url: string) => {
  gtag('config', GA_TRACKING_ID, {
    page_path: url,
  })
}

export const trackEvent = (action: string, category: string, label?: string, value?: number) => {
  gtag('event', action, {
    event_category: category,
    event_label: label,
    value,
  })
}

// 使用示例
trackEvent('click', 'CTA', 'hero-button')
trackEvent('conversion', 'signup', 'free-trial')

// lib/search-console.ts
import { google } from 'googleapis'

export async function getSearchData(startDate: string, endDate: string) {
  const auth = new google.auth.GoogleAuth({
    credentials: {
      client_email: process.env.GOOGLE_CLIENT_EMAIL,
      private_key: process.env.GOOGLE_PRIVATE_KEY,
    },
    scopes: ['https://www.googleapis.com/auth/webmasters.readonly'],
  })

  const searchconsole = google.searchconsole({ version: 'v1', auth })

  const response = await searchconsole.searchanalytics.query({
    siteUrl: 'https://yoursite.com',
    requestBody: {
      startDate,
      endDate,
      dimensions: ['query', 'page'],
      rowLimit: 1000,
    },
  })

  return response.data
}