Next.js动态OG元标签页面分享时图片不显示问题排查

核心问题 #

社交平台的分享爬虫只会抓取静态HTML内容，不会执行客户端的React代码（比如useEffect）。你当前是在客户端异步获取数据后才更新Head里的元标签，爬虫爬取页面时这些动态内容还未生成，因此无法识别到og:image。

具体解决步骤 #

1. 切换到服务器端生成元标签 #

根据你使用的Next.js路由方案选择对应实现方式：

• App Router（Next.js 13+）：使用generateMetadata在服务器端获取数据并生成元标签，示例代码：

// app/cointoss/[id]/page.tsx
import { Metadata } from 'next';

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  // 服务器端调用API获取数据
  const poolData = await fetch(`https://你的API地址/pools/${params.id}`).then(res => res.json());
  
  return {
    openGraph: {
      title: poolData.title,
      images: [poolData.imageUrl],
    },
  };
}

export default function CoinTossPage({ params }) {
  // 页面组件逻辑
  return <div>...</div>;
}

• Pages Router：使用getServerSideProps（SSR）或getStaticProps（SSG）在服务器端预取数据，再传递给组件渲染元标签：

// pages/cointoss/[id].tsx
import Head from 'next/head';

export default function CoinTossPage({ poolData }) {
  return (
    <>
      <Head>
        <meta property="og:title" content={poolData.title} />
        <meta property="og:image" content={poolData.imageUrl} />
      </Head>
      {/* 页面内容 */}
    </>
  );
}

// SSR模式示例
export async function getServerSideProps(context) {
  const { id } = context.params;
  const poolData = await fetch(`https://你的API地址/pools/${id}`).then(res => res.json());
  
  return {
    props: { poolData },
  };
}

2. 检查og:image的格式要求 #

• 必须使用绝对URL（带https://前缀），不能用相对路径；
• 图片尺寸需符合平台规范（比如Facebook要求至少1200×630像素）；
• 图片资源不能设置防盗链，要确保爬虫能直接访问到。

3. 验证抓取结果 #

用平台官方工具测试元标签是否被正确抓取：

• Facebook分享调试器
• Twitter卡片验证器
  这些工具会模拟爬虫行为，能直观看到抓取到的内容，快速定位问题。

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