Next.js App Router部署后OG图片无法显示问题求助

你的核心问题是metadata配置中未显式指定OpenGraph及Twitter卡片的图片路径，结合你的代码和场景，按以下步骤排查修复：

• 补全OpenGraph图片配置
  Next.js不会自动关联app目录下的opengraph-image.png，必须在metadata的openGraph对象中显式声明图片路径：

  export const metadata = {
    title,
    description,
    openGraph: {
      title,
      description,
      images: '/opengraph-image.png', // 依赖已配置的metadataBase自动拼接完整URL
    },
    // 其他配置...
  };
  

• 补全Twitter卡片图片配置
  你设置了summary_large_image类型的Twitter卡片，但未指定图片，需同步添加images字段：

  twitter: {
    title,
    description,
    card: "summary_large_image",
    creator: "@me",
    images: '/opengraph-image.png',
  },
  

• 验证图片可访问性
  部署后直接在浏览器访问https://urlgoeshere/opengraph-image.png，如果无法打开：

  • 确认opengraph-image.png确实放在app目录的根层级
  • 检查部署流程是否遗漏静态资源上传，或清理CDN/浏览器缓存后重新部署

• 确认metadata生效
  用浏览器开发者工具查看页面meta标签，确认存在<meta property="og:image" content="https://urlgoeshere/opengraph-image.png">和<meta name="twitter:image" content="https://urlgoeshere/opengraph-image.png">，如果没有，检查当前的OGLayout是否是app目录下的根布局文件（即app/layout.js）。

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