Next.js中Open Graph标签的正确放置位置及动态配置方案

Pages Router（Next.js 12及以下） #

直接在页面组件中使用next/head组件，结合数据获取方法动态生成OG标签，不要在_document.js中处理页面专属的动态内容：

1. 在文章详情页（比如pages/posts/[slug].js）中，先通过getStaticProps或getServerSideProps获取对应文章的数据：

export async function getStaticProps({ params }) {
  // 从数据库/API拉取对应slug的文章数据
  const post = await fetchPostBySlug(params.slug);
  return { props: { post } };
}

2. 在组件内用Head包裹动态生成的meta标签：

import Head from 'next/head';

export default function PostPage({ post }) {
  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta property="og:title" content={post.title} />
        <meta property="og:image" content={post.coverImageUrl} />
        <meta property="og:description" content={post.excerpt} />
        <meta property="og:url" content={`https://your-domain.com/posts/${post.slug}`} />
      </Head>
      {/* 文章内容渲染区域 */}
    </>
  );
}

App Router（Next.js 13+） #

推荐使用官方的Metadata API，在页面组件中导出generateMetadata函数动态生成OG标签：

在app/posts/[slug]/page.js中：

export async function generateMetadata({ params }) {
  // 获取对应slug的文章数据
  const post = await fetchPostBySlug(params.slug);
  return {
    title: post.title,
    openGraph: {
      title: post.title,
      images: [post.coverImageUrl],
      description: post.excerpt,
      url: `https://your-domain.com/posts/${params.slug}`,
    },
  };
}

export default function PostPage({ params }) {
  // 文章内容渲染逻辑
}

也可以继续使用next/head组件兼容旧代码，但Metadata API是官方推荐的标准方案。

关键注意事项 #

• OG图片必须使用绝对URL，社交平台无法抓取相对路径的资源
• 测试时可以直接查看页面源码，或用社交平台的调试工具验证标签是否正确渲染
• 全局通用的OG标签（比如og:site_name）可以放在_document.js（Pages Router）或根layout.js（App Router）中，页面专属的动态标签必须在对应页面组件中处理

内容的提问来源于stack exchange，提问作者Arpi Antonyan