Vercel部署的Next.js 14站点og:image需登录授权才能显示

核心原因 #

你遇到的需要登录Vercel才能访问OG图片的问题，主要来自两个方面：

1. 私有项目预览部署的权限限制
   你的部署链接属于Vercel的预览部署（从链接格式marek-migas-projects.vercel.app可判断），若你的Vercel项目设为私有，预览部署默认会开启访问控制——仅登录Vercel且属于该项目成员的用户才能访问部署内的所有资源，包括这张OG图片。外部服务（比如社交平台的爬虫）没有登录权限，自然无法加载图片。

2. Vercel资产处理的权限继承
   你看到的链接里的-12o0cb.png后缀和查询参数，是Vercel对静态资源做的哈希缓存优化，但优化后的资源会继承整个部署的权限设置，因此静态资源也会被限制访问。

解决步骤 #

• 切换到生产部署：如果是正式上线需求，部署到Vercel的生产环境，私有项目的生产部署默认是公开可访问的，不会要求登录授权。
• 调整预览部署的访问控制：若需要预览部署也能公开访问，进入Vercel项目的「Settings」→「Deployment Protection」，关闭预览部署的访问控制；若需部分限制，可设置IP白名单，但注意密码保护仍会导致爬虫无法获取图片。
• 确认静态资源路径：确保opengraph-image.png没有被同名路由覆盖（比如app目录下没有opengraph-image/page.tsx这类文件），也可尝试将图片移至项目根目录的public文件夹下，直接通过/opengraph-image.png引用，避免Next.js路由规则的干扰。

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