Next.js分享链接至社交媒体时Meta标题和描述失效求助

我在Next.js项目中使用next-seo组件动态设置页面Meta标题和描述，数据从API获取，配置代码如下：

<NextSeo
  title={title}
  description={description}
  canonical={`${siteSettings.author.websiteUrl}${path}`}
  openGraph={{
    url: `${siteSettings.author.websiteUrl}/${path}`,
    title,
    description,
    images: [
      {
        url: '/assets/images/logo.png',
        width: 800,
        height: 600,
        alt: 'İstanbulfood',
      },
      {
        url: '/assets/images/logo.png',
        width: 900,
        height: 800,
        alt: 'İstanbulfood',
      },
    ],
  }}
/>

但将网站链接（https://istanbulfood.be/）分享至Discord或其他社交媒体时，标题和描述无法正常显示。

可能的原因及修复方案 #

1. 确保动态数据在服务端渲染阶段获取 #

社交平台的爬虫不会执行客户端JavaScript，如果在客户端组件里通过useEffect等方式获取API数据，爬虫无法拿到动态生成的Meta信息。

修复方式：
使用Next.js的getServerSideProps（SSR）或者getStaticProps（SSG）在服务端预获取数据，将title、description等数据传递给页面组件，再传给NextSeo。示例（SSR）：

// 页面组件
export async function getServerSideProps(context) {
  // 服务端调用API获取数据
  const res = await fetch('你的API地址');
  const data = await res.json();
  
  // 获取站点配置
  const siteSettings = await fetch('你的站点配置API地址').then(res => res.json());
  
  return {
    props: {
      title: data.title,
      description: data.description,
      path: context.resolvedUrl,
      siteSettings
    }
  };
}

export default function Page({ title, description, path, siteSettings }) {
  return (
    <>
      <NextSeo
        title={title}
        description={description}
        canonical={`${siteSettings.author.websiteUrl}${path}`}
        openGraph={{
          url: `${siteSettings.author.websiteUrl}${path}`,
          title,
          description,
          images: [
            {
              url: `${siteSettings.author.websiteUrl}/assets/images/logo.png`,
              width: 800,
              height: 600,
              alt: 'İstanbulfood',
            }
          ],
        }}
      />
      {/* 页面内容 */}
    </>
  );
}

2. 修正Open Graph的URL和图片路径问题 #

• URL格式错误：代码中openGraph.url拼接了/${path}，如果path本身以/开头，会导致URL出现重复斜杠（比如https://istanbulfood.be//），爬虫无法识别正确的页面地址。需和canonical保持一致的拼接方式：${siteSettings.author.websiteUrl}${path}。
• 图片相对路径问题：社交平台需要图片的绝对URL，相对路径/assets/images/logo.png可能被爬虫解析异常，建议拼接完整域名。

修复后代码片段：

<NextSeo
  title={title}
  description={description}
  canonical={`${siteSettings.author.websiteUrl}${path}`}
  openGraph={{
    url: `${siteSettings.author.websiteUrl}${path}`, // 和canonical格式统一
    title,
    description,
    images: [
      {
        url: `${siteSettings.author.websiteUrl}/assets/images/logo.png`, // 绝对URL
        width: 800,
        height: 600,
        alt: 'İstanbulfood',
      },
      {
        url: `${siteSettings.author.websiteUrl}/assets/images/logo.png`,
        width: 900,
        height: 800,
        alt: 'İstanbulfood',
      },
    ],
  }}
/>

3. 强制刷新社交平台缓存 #

社交平台会缓存页面的Meta信息，即使修复了代码，旧缓存可能依然生效。可以通过以下方式刷新：

• Discord：将链接发送到私人频道，右键点击链接选择"复制链接预览"，触发重新抓取。
• 其他平台使用各自的官方链接验证工具强制刷新缓存。

4. 验证Meta标签是否正确输出 #

部署修复后的代码后，通过浏览器"查看页面源代码"功能，确认<head>标签中是否正确生成og:title、og:description、og:url等Open Graph标签。如果标签不存在或内容错误，说明数据传递或渲染逻辑有问题。

内容的提问来源于stack exchange，提问作者İsmail Can Karataş