Next.js 13中Next-seo元数据覆盖失效，社交分享显示默认值

社交平台的链接爬虫只会抓取页面初始HTML内容，不会执行客户端JavaScript代码。你当前的配置中，DefaultSeo的默认OG标签会先被渲染到初始HTML里，而页面的NextSeo是客户端挂载后才动态替换标签，爬虫无法获取到后续更新的内容，因此分享预览始终显示默认值。

方案1：确保NextSeo在服务端渲染时注入动态元标签 #

1. 在页面的getServerSideProps中传递完整SEO数据
   在/pages/myPage的getServerSideProps里，组装好完整的SEO配置并传递给页面组件：

   export async function getServerSideProps(context) {
     // 原有获取countryDetails的逻辑
     const countryDetails = await fetchCountryDetails(context.params.id);
   
     // 组装完整的SEO配置
     const pageSeoConfig = {
       title: `${countryDetails.name}`,
       description: `关于${countryDetails.name}的详细信息`,
       openGraph: {
         url: `${process.env.NEXT_PUBLIC_URL}${context.resolvedUrl}`,
         title: `${countryDetails.name}`,
         description: `关于${countryDetails.name}的详细信息`,
         images: [
           {
             url: countryDetails.images[0].file || OG_TAG_IMAGE,
             width: 1200,
             height: 630,
             alt: `${countryDetails.name}封面图`
           }
         ],
         type: 'website',
         locale: 'en_IE'
       }
     };
   
     return {
       props: {
         countryDetails,
         pageSeoConfig
       }
     };
   }
   

2. 在页面组件中完整覆盖NextSeo字段
   明确设置所有需要的SEO属性，避免默认值残留：

   import { NextSeo } from 'next-seo';
   
   export default function MyPage({ countryDetails, pageSeoConfig }) {
     return (
       <>
         <NextSeo
           title={pageSeoConfig.title}
           description={pageSeoConfig.description}
           openGraph={pageSeoConfig.openGraph}
         />
         {/* 页面其他内容 */}
       </>
     );
   }
   

3. 验证服务端渲染结果
   禁用JavaScript后刷新页面，或用curl命令抓取页面HTML，确认<head>里的OG标签已经是动态生成的内容，而非默认值。

方案2：改用Next.js官方next/head直接生成元标签 #

如果NextSeo的服务端渲染仍有问题，可直接使用next/head在服务端注入元标签，更可控：

import Head from 'next/head';

export default function MyPage({ countryDetails, pageSeoConfig }) {
  return (
    <>
      <Head>
        <title>{pageSeoConfig.title}</title>
        <meta name="description" content={pageSeoConfig.description} />
        {/* Open Graph标签 */}
        <meta property="og:title" content={pageSeoConfig.openGraph.title} />
        <meta property="og:description" content={pageSeoConfig.openGraph.description} />
        <meta property="og:url" content={pageSeoConfig.openGraph.url} />
        <meta property="og:type" content={pageSeoConfig.openGraph.type} />
        <meta property="og:image" content={pageSeoConfig.openGraph.images[0].url} />
        <meta property="og:image:width" content={pageSeoConfig.openGraph.images[0].width} />
        <meta property="og:image:height" content={pageSeoConfig.openGraph.images[0].height} />
        <meta property="og:image:alt" content={pageSeoConfig.openGraph.images[0].alt} />
        {/* Twitter标签 */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={pageSeoConfig.title} />
        <meta name="twitter:description" content={pageSeoConfig.description} />
        <meta name="twitter:image" content={pageSeoConfig.openGraph.images[0].url} />
      </Head>
      {/* 页面其他内容 */}
    </>
  );
}

额外注意事项 #

• 清理社交平台缓存：若之前已分享过链接，平台可能缓存了旧的默认值，需使用对应平台的链接调试工具刷新缓存。
• 规范OG图片：确保OG图片符合平台要求（建议1200x630像素，JPG/PNG格式），避免因图片不规范导致预览异常。
• 修复_app.tsx语法错误：你的_app.tsx中favicon.png的链接多了一个闭合大括号，需修正为：href: ${process.env.NEXT_PUBLIC_URL}/favicon.png``。

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