PricingLoginStart free
React Academy · 课时

App Router 中的元数据 API 与 SEO

导出静态和动态元数据对象，以设置页面标题、描述和 OG 标签。

第 4 / 4 课13 个步骤

App Router 中的元数据 API 与 SEO 是 CoddyKit 上的免费 React Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

元数据为何重要

良好的元数据（标题、描述、OG 标签）可以提升 SEO 排名和社交分享预览效果。Next.js App Router 提供类型安全的 Metadata API，可在服务器端生成 <head> 标签。

静态元数据导出

从任意 page.tsx 或 layout.tsx 中导出 metadata 对象，即可为该片段设置静态标签。

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My App',
  description: 'The best app ever built',
  keywords: ['react', 'nextjs', 'typescript'],
};

export default function Page() { return <main>Hello</main>; }

标题模板

在布局中使用 title.template，这样子页面就能自动获得格式统一的标题，无需重复写入网站名称。

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    template: '%s | My App',
    default: 'My App',
  },
};

// app/about/page.tsx
export const metadata: Metadata = {
  title: 'About', // renders as "About | My App"
};

使用 generateMetadata 的动态元数据

对于需要根据数据生成标签的路由，请导出异步 generateMetadata 函数——它会接收 params 和父级元数据。

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const product = await getProduct(params.id);
  return {
    title: product.name,
    description: product.summary,
    openGraph: {
      title: product.name,
      images: [product.imageUrl],
    },
  };
}

Open Graph 标签

openGraph 键会为 Facebook、LinkedIn 和 Slack 上的社交分享设置 OG 标签。

export const metadata: Metadata = {
  openGraph: {
    title: 'My Product',
    description: 'Buy now!',
    url: 'https://example.com/product',
    siteName: 'My App',
    images: [{ url: 'https://example.com/og.png', width: 1200, height: 630 }],
    type: 'website',
    locale: 'en_US',
  },
};

Twitter 卡片标签

twitter 键会设置 Twitter 专用的卡片元数据，以便在推文中显示丰富的预览。

twitter: {
  card: 'summary_large_image',
  title: 'My Product',
  description: 'Buy now!',
  images: ['https://example.com/twitter.png'],
  creator: '@myhandle',
},

机器人规则与规范链接

使用 robots 控制爬取，并设置规范 URL，以避免因重复内容受到处罚。

export const metadata: Metadata = {
  robots: { index: true, follow: true, googleBot: { index: true } },
  alternates: { canonical: 'https://example.com/products' },
};

网站图标与图标

将图标文件放入 app/，并使用保留名称（icon.png、apple-icon.png、favicon.ico），或者在 metadata.icons 中声明它们。

// Convention: place app/icon.png → auto-detected as favicon

// Or declare explicitly:
export const metadata: Metadata = {
  icons: {
    icon: '/icon.png',
    apple: '/apple-icon.png',
    shortcut: '/shortcut-icon.png',
  },
};

使用 ImageResponse 生成 OG 图像

在 route.ts 中使用来自 next/og 的 ImageResponse，即可将 JSX 渲染为 PNG 并生成动态 OG 图像。

// app/og/route.ts
import { ImageResponse } from 'next/og';

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Default';
  return new ImageResponse(
    <div style={{ fontSize: 48, background: '#fff', width: '100%', height: '100%' }}>
      {title}
    </div>,
    { width: 1200, height: 630 }
  );
}

结构化数据（JSON-LD）

在页面的 JSX 中注入 <script> 标签，即可添加 JSON-LD 结构化数据——它不属于 Metadata API，但可以与其配合使用。

export default function ProductPage({ product }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    price: product.price,
  };
  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <h1>{product.name}</h1>
    </>
  );
}

验证元数据

使用浏览器 DevTools（Network 标签页、查看 HTML 源代码）或 opengraph.xyz 等工具，验证元数据是否正确渲染在服务器 HTML 中。

快速检查

哪个 Next.js Metadata API 功能可以让子页面继承并自定义共享的标题后缀，例如“关于 | 我的应用”？

在交互式课程中回答

回顾

导出 metadata 设置静态标签，或使用 generateMetadata() 设置动态标签。在布局中使用 title.template，以便以 DRY 方式生成标题；设置 openGraph 和 twitter 以生成社交分享预览；并在路由处理器中使用 ImageResponse 提供动态 OG 图像。

免费开始

用 AI 导师学习 React — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
88
课程
324
免费开始学习查看完整课程

常见问题解答

「App Router 中的元数据 API 与 SEO」课时是免费的吗？

是的 — 「App Router 中的元数据 API 与 SEO」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「App Router 中的元数据 API 与 SEO」这节课中我会学到什么？

导出静态和动态元数据对象，以设置页面标题、描述和 OG 标签。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「App Router 中的元数据 API 与 SEO」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. App Router 文件约定
  2. Next.js 中的服务器组件与客户端组件
  3. 动态路由与路由组
  4. App Router 中的元数据 API 与 SEO
← 返回 React Academy