CODEWITHSUNDEEP
javascriptreactjsnext.jsvercel
xmigas
xmigas

Reputation: 131

og:image on next 14 site hosted on vercel needs an auth to display

I have deployed a Next.js 14 site on Vercel. I've put opengraph-image.png inside my app folder, next to layout.tsx. When I check the meta tag in I see this:

<meta property="og:image" content="https://ns-website-6pnvd8ili-marek-migas-projects.vercel.app/opengraph-image-12o0cb.png?aadba26415c4ff29">

When I try to open that link: https://ns-website-6pnvd8ili-marek-migas-projects.vercel.app/opengraph-image-12o0cb.png?aadba26415c4ff29 it wants me to login to Vercel. I guess that's the reason why I can't see that og:image ever. Do you know why it needs to auth?

Upvotes: 0

Views: 952

Answers (2)

Jason
Jason

Reputation: 450

You should set a metadataBase URL in your Layout to avoid Vercel picking a default (which seems to be one of your preview URLs)

The following example would host your metadata assets (like your OG Image) at https://acme.com;

// /app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://acme.com'),
}

References:

Upvotes: 3

faytodot
faytodot

Reputation: 37

I'm unsure why authentication is required for accessing the og:image, but to remove this requirement.

Go to Vercel dashboard settings > Deployment Protection > Vercel Authentication > Disabled

Upvotes: 2

Related Questions