Og:image does not have DNS' URL but rather internal deployment URL

Hi,

I was doing an SEO check, and realized that the og:image of my website, deployed with Vercel, somehow has the internal URL rather than the DNS URL.

Check this URL out: https://www.kwrds.ai/blog/keyword-research-case-study

WhatsApp Image 2024-07-19 at 10.45.58

1<meta property="og:image" content="https://keywords-91nt273jo-menelaos-kotsollaris-projects.vercel.app/images/blog_assets/android_studio.png">

It seems like a bug, unless I am missing something.

Vercel Alum

Hi !

Welcome to the Vercel Community 😃

Just to confirm - what does your code look like for your og:image?

hey

This is what my code looks like:

1---2title: 'How to Use Keyword Research for Effective Content Creation'3author: 'Fernando'4date: 'July 18, 2024'5description: "A Case Study for generating ideas around \"Android Studio\""6thumbnailUrl: "/images/blog_assets/android_studio.png"7tags: ['Keyword Research', 'analysis','SERP API', 'PAA', 'SERP tracking' ]8canonical: "https://www.kwrds.ai/blog/keyword-research-case-study"9images:10  - url: '/blog_assets/android_studio.png'11    width: 80012    height: 60013    alt: 'How to Use Keyword Research for Effective Content Creation'

This is mdx that renders the blog. I think I know what's happening. Because I haven't default domain URL, ie https://kwrds.ai/blog/keyword-research-case-study but I got /blog/keyword-research-case-study, the server loads the URL of the last deployment hash, rather than the actual DNS entry.

So a fix from my end would be to hardcode the domain hostname so that it points to the right URL, but I feel this should be fixed so by default everything points to DNS.

Vercel Alum

Thanks for getting back to me!

So a fix from my end would be to hardcode the domain hostname

This is a solid workaround for now, but you're right it doesn't seem like it should be default behaviour. That does seem like a bug.

Out of interest, in your previous deployments, did you see the same issue? Did it take the other internal URLs? Or is it just the latest one?

Yeah, I checked and it seems that this hypothesis is right. I have pushed a fix on my end to point to my hostname for canonical etc, so it's all good for now!

Thank you for your help !

Vercel Alum

I’ve shared this internally anyway, but it’s good to know that there is a workaround for now. Thank you for your patience! 😁

Vercel Alum

Could you share the code that reads your MDX frontmatter? It sounds like you have a relative path from your blog, but curious to see the code that constructs that into the Metadata API for Next.js.

Accepted answer

Sure thing , here's my code:

1export async function generateMetadata({ params }) {2  let post = await getBlogData(`${params.slug}.mdx`)3  if (!post) {4    return5  }67  const { frontMatter: { title, date, author, thumbnailUrl, description, canonical, images } } = post;8 910  return {11    title,12    description,13    alternates: {14      canonical,15    },16    openGraph: {17      title,18      description,19      type: 'article',20      publishedTime: date,21      url: `https://www.kwrds.ai/blog/${params.slug}`,22      images: [23        {24          url: `${thumbnailUrl}`,25        },26      ],27    },28    twitter: {29      card: 'summary_large_image',30      title,31      description,32      images: [`${thumbnailUrl}`],33    },34  }35}

where thumbnailUrl et.al. are loaded via mdx:

1---2title: 'How to Use Keyword Research for Effective Content Creation'3author: 'Fernando'4date: 'July 18, 2024'5description: "A Case Study for generating ideas around \"Android Studio\""6thumbnailUrl: "images/blog_assets/android_studio.png"7tags: ['Keyword Research', 'analysis','SERP API', 'PAA', 'SERP tracking' ]8canonical: "https://www.kwrds.ai/blog/keyword-research-case-study"9images:10  - url: '/blog_assets/android_studio.png'11    width: 80012    height: 60013    alt: 'How to Use Keyword Research for Effective Content Creation'1415---

The current fix is to hardcode the thumbnailUrl to contain the hostname ie:

1export async function generateMetadata({ params }) {2  let post = await getBlogData(`${params.slug}.mdx`)3  if (!post) {4    return5  }67  const { frontMatter: { title, date, author, thumbnailUrl, description, canonical, images } } = post;8 910  return {11    title,12    description,13    alternates: {14      canonical,15    },16    openGraph: {17      title,18      description,19      type: 'article',20      publishedTime: date,21      url: `https://www.kwrds.ai/blog/${params.slug}`,22      images: [23        {24          url: `https://www.kwrds.ai/${thumbnailUrl}`,25        },26      ],27    },28    twitter: {29      card: 'summary_large_image',30      title,31      description,32      images: [`https://www.kwrds.ai/${thumbnailUrl}`],33    },34  }35}

Without hostname at the front, it will point to the internal deployment hash with Vercel origin.

This topic is closed. It no longer accepts new replies.

Sure thing , here's my code:

1export async function generateMetadata({ params }) {2  let post = await getBlogData(`${params.slug}.mdx`)3  if (!post) {4    return5  }67  const { frontMatter: { title, date, author, thumbnailUrl, description, canonical, images } } = post;8 910  return {11    title,12    description,13    alternates: {14      canonical,15    },16    openGraph: {17      title,18      description,19      type: 'article',20      publishedTime: date,21      url: `https://www.kwrds.ai/blog/${params.slug}`,22      images: [23        {24          url: `${thumbnailUrl}`,25        },26      ],27    },28    twitter: {29      card: 'summary_large_image',30      title,31      description,32      images: [`${thumbnailUrl}`],33    },34  }35}

where thumbnailUrl et.al. are loaded via mdx:

1---2title: 'How to Use Keyword Research for Effective Content Creation'3author: 'Fernando'4date: 'July 18, 2024'5description: "A Case Study for generating ideas around \"Android Studio\""6thumbnailUrl: "images/blog_assets/android_studio.png"7tags: ['Keyword Research', 'analysis','SERP API', 'PAA', 'SERP tracking' ]8canonical: "https://www.kwrds.ai/blog/keyword-research-case-study"9images:10  - url: '/blog_assets/android_studio.png'11    width: 80012    height: 60013    alt: 'How to Use Keyword Research for Effective Content Creation'1415---

The current fix is to hardcode the thumbnailUrl to contain the hostname ie:

1export async function generateMetadata({ params }) {2  let post = await getBlogData(`${params.slug}.mdx`)3  if (!post) {4    return5  }67  const { frontMatter: { title, date, author, thumbnailUrl, description, canonical, images } } = post;8 910  return {11    title,12    description,13    alternates: {14      canonical,15    },16    openGraph: {17      title,18      description,19      type: 'article',20      publishedTime: date,21      url: `https://www.kwrds.ai/blog/${params.slug}`,22      images: [23        {24          url: `https://www.kwrds.ai/${thumbnailUrl}`,25        },26      ],27    },28    twitter: {29      card: 'summary_large_image',30      title,31      description,32      images: [`https://www.kwrds.ai/${thumbnailUrl}`],33    },34  }35}

Without hostname at the front, it will point to the internal deployment hash with Vercel origin.