企业级官网全栈(React·Next.js·Tailwind·Axios·Headless UI·RHF·i18n)实战教程-第六章：Metadata 与 SEO（企业级优化）-优快云博客

第六章：Metadata 与 SEO（企业级优化）

前面我们已经完成了登录、权限等核心能力，现在开始进入前端最容易忽视，但真实生产非常重要的部分：SEO 与元信息管理。

Next.js 13+ 在 App Router 时代彻底重构了 Metadata 体系，和老的 next/head 不同，它是类型安全、SSR 友好、自动合并的元信息方案。

你将学会：

内容	目标
`metadata` 静态/动态写法	为所有页面提供 SEO 信息
多语言 SEO（自动 `href-lang`）	你的项目支持 zh/en i18n
Open Graph / Twitter Meta	分享时生成带封面预览卡片
结构化数据（JSON-LD）	提升搜索权重（企业站必须）
自定义动态标题覆盖	产品、新闻、文章详情页必备
robots / sitemap 自动生成	全站 SEO 关键配置

1.全局 Metadata 设定

📂 src/app/layout.tsx

export const metadata = {
  title: {
    default: 'Enterprise Platform',
    template: '%s | Enterprise',
  },
  description: '企业级管理平台，支持多语言、权限系统与现代前端架构。',
  keywords: ['Enterprise', 'Management', 'SaaS', 'B2B'],
  creator: 'Enterprise Inc.',
  generator: 'Next.js',
  metadataBase: new URL('https://example.com'),
  openGraph: {
    title: 'Enterprise Platform',
    description: '现代企业管理平台解决方案',
    url: 'https://example.com',
    siteName: 'Enterprise',
    images: ['/og-default.png'],
    locale: 'zh_CN',
    type: 'website',
  },
} satisfies import('next').Metadata;

✔ satisfies Metadata = 类型安全
✔ OpenGraph 结构带分享卡片
✔ template 允许动态替换标题

2.多语言 SEO：自动注入 `<link href-lang>`

App Router 自带：

export const generateStaticParams = () => locales.map(locale => ({ locale }))

我们增强 metadata 输出语言版本。

📁 src/app/[locale]/layout.tsx

import type { Metadata } from 'next'
import { locales } from '@/lib/i18n/config'

export async function generateMetadata({ params }: { params: { locale: string } }): Promise<Metadata> {
  const { locale } = params

  return {
    alternates: {
      canonical: `/${locale}`,
      languages: Object.fromEntries(
        locales.map((lng) => [lng, `/${lng}`])
      )
    }
  }
}

搜索引擎会知道这页面有多个语言版本（排名会提升）

3.页面级 SEO（产品详情 / 新闻详情特别重要）

📁 src/app/[locale]/products/[id]/page.tsx

import type { Metadata } from 'next'
import { getProductDetail } from '@/services/product.service'

export async function generateMetadata({ params }: { params: { id: string, locale: string }}): Promise<Metadata> {
  const product = await getProductDetail(params.id)

  return {
    title: product.name,
    description: product.summary,
    openGraph: {
      title: product.name,
      description: product.summary,
      images: product.cover ? [product.cover] : ['/og-default.png']
    }
  }
}

export default function ProductDetailPage() { /* ... */ }

✔ SEO 自动按内容生成，不用手写
✔ 微信/Slack 分享时出现真实封面

4.JSON-LD 结构化数据（权重增强）

📁 src/app/[locale]/products/[id]/page.tsx

export default async function ProductDetailPage({ params }: Props) {
  const product = await getProductDetail(params.id)

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Product",
            name: product.name,
            image: product.cover,
            description: product.summary,
            brand: "Enterprise"
          })
        }}
      />
      {/* 页面渲染 */}
    </>
  )
}

在搜索引擎搜索中会出现更详细的展示

5.设置 robots 与 sitemap（SEO 关键）

📁 src/app/robots.ts

import type { MetadataRoute } from 'next'

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

📁 src/app/sitemap.ts

import type { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    { url: 'https://example.com', lastModified: new Date() },
    { url: 'https://example.com/zh', lastModified: new Date() },
    { url: 'https://example.com/en', lastModified: new Date() },
  ]
}

6.你需要掌握的实践 Checklist

项	是否完成
Global Metadata（logo、品牌、默认标题）	⬜
多语言 `alternate`	⬜
动态页面 SEO `generateMetadata`	⬜
OpenGraph 分享卡片	⬜
JSON-LD 结构化数据	⬜
robots + sitemap	⬜