Next.js 建站 SEO 优化完全指南：与 WordPress 的深度对比

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

export const metadata: Metadata = {
  title: {
    default: '我的网站',
    template: '%s | 我的网站',
  },
  description: '这是网站的默认描述',
  keywords: ['Next.js', 'SEO', '建站'],
  authors: [{ name: '作者名' }],
  openGraph: {
    title: '我的网站',
    description: 'OG 描述',
    url: 'https://example.com',
    siteName: '我的网站',
    images: [{ url: '/og-image.jpg', width: 1200, height: 630 }],
    locale: 'zh_CN',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: '我的网站',
    description: 'Twitter 描述',
    images: ['/twitter-image.jpg'],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: { index: true, follow: true },
  },
  alternates: {
    canonical: 'https://example.com',
  },
}

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await fetchPost(params.slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `https://example.com/blog/${params.slug}` },
    openGraph: {
      title: post.title,
      images: [post.coverImage],
    },
  }
}

// ISR 示例：每 60 秒重新生成
export const revalidate = 60

// SSG：预生成所有路径
export async function generateStaticParams() {
  const posts = await fetchAllPosts()
  return posts.map(post => ({ slug: post.slug }))
}

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

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await fetchAllPosts()
  const postEntries = posts.map(post => ({
    url: `https://example.com/blog/${post.slug}`,
    lastModified: post.updatedAt,
    changeFrequency: 'weekly' as const,
    priority: 0.8,
  }))

  return [
    { url: 'https://example.com', lastModified: new Date(), priority: 1 },
    { url: 'https://example.com/about', priority: 0.6 },
    ...postEntries,
  ]
}

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

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      { userAgent: '*', allow: '/', disallow: ['/api/', '/admin/'] },
    ],
    sitemap: 'https://example.com/sitemap.xml',
  }
}

// components/JsonLd.tsx
export function ArticleJsonLd({ post }: { post: Post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    description: post.description,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: { '@type': 'Person', name: post.author },
    image: post.coverImage,
  }
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  )
}

// 关键图片使用 priority，预加载首屏资源
<Image src="/hero.jpg" alt="Hero" priority sizes="100vw" />

// 始终为图片指定宽高，避免布局抖动
<Image src="/photo.jpg" alt="" width={800} height={600} />

import Image from 'next/image'
import { Inter } from 'next/font/google'

// 自动优化字体：零布局偏移、内联 CSS
const inter = Inter({ subsets: ['latin'], display: 'swap' })

// 图片自动转 WebP/AVIF，响应式处理
<Image
  src="/cover.jpg"
  alt="封面图"
  fill
  sizes="(max-width: 768px) 100vw, 50vw"
  placeholder="blur"
/>

// next.config.js
module.exports = {
  i18n: {
    locales: ['zh', 'en'],
    defaultLocale: 'zh',
  },
}

// 在 Metadata 中声明语言替代页
alternates: {
  languages: {
    'zh': 'https://example.com/zh/blog/post',
    'en': 'https://example.com/en/blog/post',
  },
}

WordPress 后台（内容管理）
        ↓ REST API / GraphQL (WPGraphQL)
Next.js 前端（SSG 渲染 + SEO 优化）
        ↓
CDN 静态托管（极速访问）