如何为React+MDX网站各页面动态配置OG链接预览信息？

在Next.js App Router中，子路由段的metadata会自动覆盖上层布局的对应配置，你无需修改主layout.jsx就能实现单个博客页面的独立社交预览。以下是具体实现步骤：

1. 为MDX博客添加Frontmatter字段 #

首先在你的博客MDX文件（如src/app/Blog/BlogTitle/page.mdx）顶部添加元数据信息：

---
title: "我的第一篇博客"
description: "这是一篇关于React与MDX开发的技术博客"
ogImage: "/images/blog-preview-1.png"
---

# 我的第一篇博客
这里是博客正文内容...

2. 在博客路由页导出专属Metadata #

方法一：直接在MDX文件中导出Metadata #

如果你的项目已配置@next/mdx支持，可以直接在MDX文件中导出metadata，利用Frontmatter数据生成配置：

---
title: "我的第一篇博客"
description: "这是一篇关于React与MDX开发的技术博客"
ogImage: "/images/blog-preview-1.png"
---

export const metadata = {
  title: frontmatter.title,
  openGraph: {
    title: frontmatter.title,
    description: frontmatter.description,
    url: "https://example.com/Blog/BlogTitle",
    type: "article",
    images: [
      {
        url: frontmatter.ogImage,
        width: 800,
        height: 600,
        alt: `${frontmatter.title} 的预览图`,
      },
    ],
  },
};

# 我的第一篇博客
博客正文内容...

方法二：使用generateMetadata函数（更灵活） #

如果需要动态读取MDX内容，可在博客文件夹下创建page.jsx，通过函数生成元数据：

import { getMDXComponent } from 'next-mdx-remote/rsc'
import fs from 'fs'
import path from 'path'

// 生成当前博客的专属元数据
export async function generateMetadata() {
  const filePath = path.join(process.cwd(), 'src/app/Blog/BlogTitle/page.mdx')
  const content = fs.readFileSync(filePath, 'utf8')

  // 提取Frontmatter
  const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---/)
  if (!frontmatterMatch) {
    return {
      title: '无标题博客',
      openGraph: {
        title: '无标题博客',
        description: '暂无描述',
        images: [{ url: '/images/default-preview.png' }]
      }
    }
  }

  const frontmatter = frontmatterMatch[1]
  const frontmatterObj = Object.fromEntries(
    frontmatter.split('\n').map(line => {
      const [key, value] = line.split(': ').map(s => s.trim())
      return [key, value.replace(/^"|"$/g, '')]
    })
  )

  return {
    title: frontmatterObj.title,
    openGraph: {
      title: frontmatterObj.title,
      description: frontmatterObj.description,
      url: `https://example.com/Blog/BlogTitle`,
      type: 'article',
      images: [{
        url: frontmatterObj.ogImage,
        width: 800,
        height: 600,
        alt: `${frontmatterObj.title} 的预览图`
      }]
    }
  }
}

// 渲染MDX内容
export default async function BlogPost() {
  const filePath = path.join(process.cwd(), 'src/app/Blog/BlogTitle/page.mdx')
  const content = fs.readFileSync(filePath, 'utf8')
  const MDXComponent = await getMDXComponent(content)
  return <MDXComponent />
}

3. 批量优化：使用动态路由管理所有博客 #

如果你的博客数量较多，建议将单个博客文件夹改为动态路由[slug]，统一处理所有博客：

src
└── app
    └── Blog
        └── [slug]
            └── page.jsx

在[slug]/page.jsx中通过params获取当前博客的slug，动态读取对应MDX文件：

import { getMDXComponent } from 'next-mdx-remote/rsc'
import fs from 'fs'
import path from 'path'

export async function generateMetadata({ params }) {
  const { slug } = params
  const filePath = path.join(process.cwd(), `src/app/Blog/${slug}/page.mdx`)
  
  if (!fs.existsSync(filePath)) {
    return { title: '博客不存在' }
  }

  const content = fs.readFileSync(filePath, 'utf8')
  const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---/)
  if (!frontmatterMatch) {
    return {
      title: '无标题博客',
      openGraph: {
        title: '无标题博客',
        description: '暂无描述',
        images: [{ url: '/images/default-preview.png' }]
      }
    }
  }

  const frontmatter = frontmatterMatch[1]
  const frontmatterObj = Object.fromEntries(
    frontmatter.split('\n').map(line => {
      const [key, value] = line.split(': ').map(s => s.trim())
      return [key, value.replace(/^"|"$/g, '')]
    })
  )

  return {
    title: frontmatterObj.title,
    openGraph: {
      title: frontmatterObj.title,
      description: frontmatterObj.description,
      url: `https://example.com/Blog/${slug}`,
      type: 'article',
      images: [{
        url: frontmatterObj.ogImage,
        width: 800,
        height: 600,
        alt: `${frontmatterObj.title} 的预览图`
      }]
    }
  }
}

export default async function BlogPost({ params }) {
  const { slug } = params
  const filePath = path.join(process.cwd(), `src/app/Blog/${slug}/page.mdx`)
  const content = fs.readFileSync(filePath, 'utf8')
  const MDXComponent = await getMDXComponent(content)
  return <MDXComponent />
}

4. 排查未生效的常见问题 #

• MDX配置问题：确保已安装@next/mdx并在next.config.js中配置启用MDX支持；
• 缓存问题：社交平台会缓存链接预览，部署后需使用对应平台的调试工具刷新缓存；
• 路径问题：预览图需放在public文件夹下，路径使用根路径（如/images/xxx.png）；
• 字段覆盖规则：子路由的metadata会与主布局合并，相同字段会被子路由的配置覆盖。

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