Next.js 13.4动态路由元数据分享及SEO工具检测不显示求助

问题现象 #

• 已发布站点的动态路由页面（如post/[slug]）分享至社交媒体，或使用SEO工具检测时，元数据无法正常显示
• 通过Lighthouse或谷歌开发者工具审查元素时，元数据正常存在
• 静态页面的标题、OG图片等元数据均能正常工作

环境信息 #

• Next.js版本：13.4.5（计划升级新版本排查是否为bug）
• 示例页面：https://anudeepsambaraju.com/post/opinion-ai-chatgpt

相关代码 #

post/[slug]页面代码 #

async function getPost(slug) {
  const url = config.apiUrl;
  const apiKey = config.apiKey;
  const res = await fetch(`${url}/blog/post/${slug}?api_key=${apiKey}`, {
    next: { revalidate: 3600 },
  });
  if (!res.ok) {
    throw new Error("Failed to fetch the data");
  }
  return await res.json();
}

export async function generateMetadata({ params }) {
  const slug = params.slug;
  const post = await getPost(slug);
  return {
    title: post.postData.title,
    description: post.postData.seoDescription,
    alternates: {
      canonical: `post/${post.postData.slug}`,
    },
    openGraph: {
      title: post.postData.title,
      description: post.postData.seoDescription,
      url: `post/${post.postData.slug}`,
      siteName: "",
      images: [
        {
          url: `${post.postData.seoImage}`,
          width: 300,
          height: 50,
          alt: "Blog Post",
        },
      ],
    },
  };
}

layout.js代码 #

export const metadata = {
  metadataBase: new URL('https://anudeepsambaraju.com'),
  title: {
    default: "xxxx",
    template: '%s | Anudeep Sambaraju',
  },
  description: {
    default: `xxxxx`,
  },
  alternates: {
    canonical: `/`,
  },
  openGraph: {
    title: 'xxxxx',
    url: `/`,
    siteName: 'xxxx',
  },
  creator: 'xxxx',
  publisher: 'xxxx',
  authors: [{ name: 'xxxx' }],
} 

排查与修复方案 #

1. 修正URL路径格式 #

社交媒体爬虫和SEO工具要求元数据中的URL为绝对路径，当前动态路由里的canonical和openGraph.url使用相对路径，可能导致解析异常。修改为绝对路径（可结合metadataBase自动拼接）：

export async function generateMetadata({ params }) {
  const slug = params.slug;
  const post = await getPost(slug);
  const postFullPath = `/post/${post.postData.slug}`;
  
  return {
    title: post.postData.title,
    description: post.postData.seoDescription,
    alternates: {
      canonical: postFullPath,
    },
    openGraph: {
      title: post.postData.title,
      description: post.postData.seoDescription,
      url: postFullPath,
      siteName: "Anudeep Sambaraju", // 补充完整站点名称，不能为空
      images: [
        {
          url: `${post.postData.seoImage}`, // 确保此URL为绝对路径，若为相对路径需拼接metadataBase
          width: 1200, // 调整为OG图片推荐尺寸（至少1200x630）
          height: 630,
          alt: post.postData.title, // 使用文章标题作为替代文本，提升语义化
        },
      ],
    },
  };
}

2. 确保SEO图片路径正确 #

检查post.postData.seoImage返回的是否为绝对路径，若为相对路径，需拼接站点基准URL：

url: `https://anudeepsambaraju.com${post.postData.seoImage}`

3. 启用静态预渲染 #

如果动态路由页面未开启静态生成，爬虫可能无法正确抓取服务器端渲染的元数据。添加generateStaticParams函数预渲染所有动态页面：

export async function generateStaticParams() {
  // 从API获取所有文章的slug列表
  const res = await fetch(`${config.apiUrl}/blog/posts?api_key=${config.apiKey}`);
  const posts = await res.json();
  
  return posts.map(post => ({
    slug: post.postData.slug,
  }));
}

4. 升级Next.js版本 #

鉴于你怀疑是版本bug，建议尽快升级到最新稳定版，后续版本可能修复了元数据生成的相关问题。

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