Next.js 独立开发教程（十六）：为页面添加元数据（Adding Metadata）-EW帮帮网

import Head from "next/head";

export default function HomePage() {
  return (
    <>
      <Head>
        <title>我的 Next.js 网站</title>
        <meta name="description" content="这是一个使用 Next.js 构建的网站" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <main>
        <h1>欢迎来到我的网站</h1>
      </main>
    </>
  );
}

说明：

<title>：定义页面标题。
<meta name="description">：简要描述页面内容，通常显示在搜索引擎结果中。
<meta name="viewport">：优化页面在移动设备上的显示。

3.2 添加 Open Graph 元数据

Open Graph 标签用于控制社交媒体的分享体验，包括标题、描述和图片。

示例：添加 Open Graph 标签

<Head>
  <meta property="og:title" content="我的 Next.js 网站" />
  <meta property="og:description" content="这是一个使用 Next.js 构建的网站" />
  <meta property="og:image" content="https://example.com/og-image.jpg" />
  <meta property="og:url" content="https://example.com" />
</Head>

3.3 添加 Twitter 卡片元数据

如果需要优化页面在 Twitter 上的分享效果，可以添加 Twitter Card 元数据。

示例：Twitter Card

<Head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="我的 Next.js 网站" />
  <meta name="twitter:description" content="这是一个使用 Next.js 构建的网站" />
  <meta name="twitter:image" content="https://example.com/twitter-image.jpg" />
</Head>

4. 动态元数据

4.1 基于页面内容动态生成元数据

Next.js 的动态路由和数据获取功能使得动态生成元数据变得非常容易。以下示例展示如何根据页面内容动态设置元数据。

示例：动态标题和描述

import Head from "next/head";

export async function getServerSideProps(context) {
  const { slug } = context.params;
  const post = await fetch(`https://example.com/api/posts/${slug}`).then(res =>
    res.json()
  );

  return { props: { post } };
}

export default function PostPage({ post }) {
  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.excerpt} />
      </Head>
      <main>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </main>
    </>
  );
}

说明：

`getServerSideProps` 获取动态内容。
`Head` 组件使用内容填充动态元数据。

4.2 使用 `app` 目录的 `metadata` 配置

在 Next.js 的 `app` 目录（用于构建新的文件夹路由结构）中，可以通过 `metadata` 属性为页面设置元数据。

示例：`metadata` 配置

export const metadata = {
  title: "我的 Next.js 网站",
  description: "这是一个使用 Next.js 构建的网站",
  openGraph: {
    title: "我的 Next.js 网站",
    description: "这是一个使用 Next.js 构建的网站",
    url: "https://example.com",
    images: [
      {
        url: "https://example.com/og-image.jpg",
        width: 800,
        height: 600,
        alt: "示例图片",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "我的 Next.js 网站",
    description: "这是一个使用 Next.js 构建的网站",
    images: ["https://example.com/twitter-image.jpg"],
  },
};

5. 优化元数据的最佳实践

5.1 保持元数据简洁明了

标题长度：控制在 50-60 个字符之间。
描述长度：控制在 150-160 个字符之间，确保在搜索结果中完整显示。

5.2 使用一致的分享内容

为 Open Graph 和 Twitter 元数据使用相同的标题、描述和图片，以提供一致的社交分享体验。

5.3 为每个页面提供唯一的元数据

避免重复的元数据，确保每个页面的元数据反映其独特内容。

5.4 定期测试和优化

使用工具（如 [Google Search Console](https://search.google.com/search-console/) 和 [Lighthouse](https://developers.google.com/web/tools/lighthouse/)）测试元数据效果，并持续优化。

6. 总结

元数据是现代 Web 开发的重要组成部分，影响搜索引擎索引、用户体验和社交媒体分享效果。在 Next.js 中，通过 `next/head` 和动态数据功能，开发者可以高效地管理页面元数据，并实现深度优化。

通过合理设计和管理元数据，您的 Next.js 应用可以更容易地吸引目标用户，提高搜索排名，并提升整体品牌影响力。希望本教程能帮助您掌握元数据的最佳实践，为您的项目带来更多成功！

Next.js 独立开发教程（十六）：为页面添加元数据（Adding Metadata）

系列文章目录

前言

1. 什么是元数据？

2. 在 Next.js 中管理元数据的工具

3. 使用 `next/head` 添加元数据

3.1 添加基本的 SEO 元数据