编辑“︁Next.js Open Graph协议”︁（章节）

== 在Next.js中实现 ==
Next.js提供了两种方式配置OG元标签：

=== 方法1：使用<code>next/head</code> ===
在页面组件中直接添加<code>Head</code>组件：

<syntaxhighlight lang="javascript">
import Head from 'next/head'

export default function HomePage() {
  return (
    <>
      <Head>
        <title>页面标题</title>
        <meta property="og:title" content="Next.js教程" />
        <meta property="og:description" content="深入学习Next.js开发" />
        <meta property="og:image" content="/images/preview.png" />
        <meta property="og:url" content="https://example.com/nextjs" />
        <meta property="og:type" content="website" />
      </Head>
      {/* 页面内容 */}
    </>
  )
}
</syntaxhighlight>

=== 方法2：使用<code>next-seo</code>库 ===
对于更复杂的SEO需求，推荐使用专门的库：

<syntaxhighlight lang="javascript">
import { NextSeo } from 'next-seo'

export default function ProductPage() {
  return (
    <>
      <NextSeo
        openGraph={{
          title: '产品页面',
          description: '我们的最新产品',
          images: [
            {
              url: '/product-image.jpg',
              width: 800,
              height: 600,
              alt: '产品图片',
            },
          ],
          site_name: 'ExampleSite',
        }}
      />
      {/* 页面内容 */}
    </>
  )
}
</syntaxhighlight>