如何在NextJS中正确配置og系列meta标签并使其正常生效？

你遇到的问题根因是OG标签仅在客户端通过JS注入，未出现在服务端返回的初始HTML中，绝大多数搜索引擎、社交平台爬虫都不会执行JS，所以无法识别到这些标签，可根据你使用的NextJS路由模式选择对应解法：

如果你用的是Pages Router（pages目录结构） #

• 确保next/head导出的<Head>组件直接写在页面组件的渲染返回值中，不要包裹在useEffect、window存在性判断这类仅客户端执行的逻辑里
• 不要将<Head>组件放在通过next/dynamic导入且设置了ssr: false的组件内部，这类组件仅在客户端渲染，内部的Head也不会被服务端处理
• 如果OG标签的内容需要异步获取，使用getStaticProps（静态生成场景）或getServerSideProps（动态服务端渲染场景）提前获取数据，通过props传递给页面组件后直接在<Head>中渲染，示例如下：

// pages/[slug].js
import Head from 'next/head'

export default function Post({ postData }) {
  return (
    <>
      <Head>
        <meta property="og:title" content={postData.title} />
        <meta property="og:description" content={postData.excerpt} />
        <meta property="og:image" content={postData.coverUrl} />
      </Head>
      {/* 页面其余内容 */}
    </>
  )
}

// 静态生成场景用这个方法拿数据
export async function getStaticProps(context) {
  const postData = await fetchPost(context.params.slug)
  return { props: { postData } }
}

// 动态实时渲染场景用这个方法拿数据
export async function getServerSideProps(context) {
  const postData = await fetchPost(context.params.slug)
  return { props: { postData } }
}

如果你用的是App Router（app目录结构） #

App Router下不要继续使用next/head的Head组件，改用官方原生的元数据方案，元数据会直接注入到服务端返回的初始HTML中：

• 静态元数据场景：直接导出metadata常量即可
• 动态元数据场景：导出generateMetadata异步函数，拉取数据后返回对应的元数据对象，示例如下：

// app/post/[slug]/page.js
// 不要加'use client'指令，用默认的服务端组件即可
export async function generateMetadata({ params }) {
  const postData = await fetchPost(params.slug)
  return {
    title: postData.title,
    description: postData.excerpt,
    openGraph: {
      title: postData.title,
      description: postData.excerpt,
      images: [postData.coverUrl],
    },
  }
}

export default function PostPage({ params }) {
  // 页面内容逻辑
}

验证方法 #

修改完成后右键页面点击「查看网页源代码」，直接搜索og:前缀的属性，能搜到对应标签就说明服务端已经正确返回，爬虫可以正常识别。

内容的提问来源于stack exchange，提问作者Manav Bokinala