Next.js SEO — TDK + OG

metadata API

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

export const metadata: Metadata = {
  title: '商品详情',
  description: '最新款 iPhone 手机',
  keywords: ['手机', 'iPhone', '数码'],
  openGraph: {
    title: '商品详情',
    description: '最新款 iPhone',
    images: ['https://example.com/og-image.png'],
  },
}

动态 metadata

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.id)
  return { title: post.title, description: post.excerpt }
}

• TDK = Title + Description + Keywords（HTML meta 标签）
• OG = Open Graph（分享到微信/Twitter 时的卡片预览）