Next.js动态OG Meta标签源码可见但无法预览的求助

在Next.js 12.2.0的产品页场景中，通过getServerSideProps从服务端获取产品数据，目标是基于这些数据设置动态OG Meta标签，当前已实现的getServerSideProps代码如下：

export const getServerSideProps = wrapper.getServerSideProps(
    store => async (context) => {

        const response = await fetch(url, {
            method: 'GET',
        });
        const data = await response.json();

        return {
            props: {
                host: context.req.headers.host,
                product: data.product
            }
        }
    }
)

已尝试三种方案，但均存在问题：

方案1：直接在产品页组件的<Head>中插入动态标签 #

问题：即使静态内容也未显示在页面源码中。

对应的组件代码：

const Product = ({product}) => {
    return (
        product ?
            <>
                <Head>
                    <title>{product.title}</title>
                    <meta name="description"
                          content={product.description}/>
                    <meta property="og:title" content={product.title}/>
                    <meta property="og:type" content="video.movie"/>
                    <meta property="og:url" content={`${props.host}/products/${product.slug}`}/>
                    <meta property="og:description" content={product.description}/>
                    <meta property="og:image" content={product.thumbnail}/>
                </Head>
                <Course/>
            </> : null
    );
};

方案2：在_document.js的<Head>中插入静态标签 #

问题：仅能设置静态内容，无法实现动态化，但静态标签可正常显示在页面源码并被Facebook预览识别。

对应的_document.js代码：

return (
    <Html lang="en">
        <Head>
            {/*<meta property="og:image" content="https://static.onlinevideobooks.com/abed1e5658b3ad23c38c22646968e4f2/files/media/images/2022/04/5b0645b9-ab03-4233-b5f3-86b092d4062b/conversions/cad47d2beb9143eab3d65ea4a75b0b0e-1280x720.webp" />*/}

            {/*<title>your keyword rich title of the website and/or webpage</title>*/}
            <meta name="description"
                  content="description of your website/webpage, make sure you use keywords!"/>
            <meta property="og:title" content="short title of your website/webpage"/>
            <meta property="og:type" content="video.movie"/>
            <meta property="og:url" content="https://example.com/"/>
            <meta property="og:description" content="description of your website/webpage"/>
            <meta property="og:image"
                  content="https://example.com/image"/>
        </Head>
    </Html>
);

方案3：在_app.js中插入标签 #

问题：静态和动态标签均显示在页面源码中，但动态内容无法被Facebook调试工具或Open Graph工具识别预览。

正确解决方案 #

1. 修复产品页组件的<Head>使用错误

• 确保正确导入Next.js官方的Head组件：import Head from 'next/head'
• 修正组件参数取值错误：组件接收的是host和product props，而非props.host
• 避免直接返回null，添加加载状态提升体验，同时确保服务端渲染时始终输出HTML结构

修正后的产品页组件代码：

import Head from 'next/head';

const Product = ({ product, host }) => {
  // 处理产品数据未加载的情况
  if (!product) {
    return <div>加载中...</div>;
  }

  // 拼接完整的产品URL（包含协议）
  const productFullUrl = `${host}/products/${product.slug}`;

  return (
    <>
      <Head>
        <title>{product.title}</title>
        <meta name="description" content={product.description} />
        <meta property="og:title" content={product.title} />
        <meta property="og:type" content="video.movie" />
        <meta property="og:url" content={productFullUrl} />
        <meta property="og:description" content={product.description} />
        <meta property="og:image" content={product.thumbnail} />
        {/* 可选：添加Twitter卡片标签优化社交预览 */}
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <Course />
    </>
  );
};

2. 完善getServerSideProps的错误处理与数据返回

• 处理Fetch请求的异常情况，避免返回无效的product数据
• 自动识别协议（HTTP/HTTPS），确保host拼接成完整的可访问URL

修正后的getServerSideProps代码：

export const getServerSideProps = wrapper.getServerSideProps(
  (store) => async (context) => {
    try {
      const response = await fetch(url, { method: 'GET' });
      // 检查请求是否成功
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      const data = await response.json();

      // 根据请求头判断协议（适配反向代理场景）
      const protocol = context.req.headers['x-forwarded-proto'] || 'http';
      const fullHost = `${protocol}://${context.req.headers.host}`;

      return {
        props: {
          host: fullHost,
          product: data.product || null,
        },
      };
    } catch (error) {
      console.error('获取产品数据出错：', error);
      // 异常情况下返回默认props，避免页面崩溃
      return {
        props: {
          host: `${context.req.headers['x-forwarded-proto'] || 'http'}://${context.req.headers.host}`,
          product: null,
        },
      };
    }
  }
);

3. 验证与调试要点

• 访问页面后右键查看页面源码，确认OG Meta标签是否已正确渲染在<head>中
• 如果社交预览工具仍无法识别：
  • 检查OG图片是否符合规范：尺寸至少1200x630px，格式为JPG/PNG，文件大小不超过8MB
  • 确保页面URL可被公开爬取（工具需要能访问到页面内容）
  • 在预览工具中触发重新抓取操作，清除工具缓存

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