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

[mkotsollaris (Menelaos Kotsollaris)]

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: How to Use Keyword Research for Effective Content Creation

<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.

[pawlean (Pauline P. Narvas)]

Hi @mkotsollaris!

Welcome to the Vercel Community

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

[mkotsollaris (Menelaos Kotsollaris)]

hey @pawlean

This is what my code looks like:

---
title: 'How to Use Keyword Research for Effective Content Creation'
author: 'Fernando'
date: 'July 18, 2024'
description: "A Case Study for generating ideas around \"Android Studio\""
thumbnailUrl: "/images/blog_assets/android_studio.png"
tags: ['Keyword Research', 'analysis','SERP API', 'PAA', 'SERP tracking' ]
canonical: "https://www.kwrds.ai/blog/keyword-research-case-study"
images:
  - url: '/blog_assets/android_studio.png'
    width: 800
    height: 600
    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.

[pawlean (Pauline P. Narvas)]

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?

[mkotsollaris (Menelaos Kotsollaris)]

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 @pawlean !

[pawlean (Pauline P. Narvas)]

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

[leerob]

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.

[mkotsollaris (Menelaos Kotsollaris)]

Sure thing @leerob , here’s my code:

export async function generateMetadata({ params }) {
  let post = await getBlogData(`${params.slug}.mdx`)
  if (!post) {
    return
  }

  const { frontMatter: { title, date, author, thumbnailUrl, description, canonical, images } } = post;
 

  return {
    title,
    description,
    alternates: {
      canonical,
    },
    openGraph: {
      title,
      description,
      type: 'article',
      publishedTime: date,
      url: `https://www.kwrds.ai/blog/${params.slug}`,
      images: [
        {
          url: `${thumbnailUrl}`,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title,
      description,
      images: [`${thumbnailUrl}`],
    },
  }
}

where thumbnailUrl et.al. are loaded via mdx:

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

---

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

export async function generateMetadata({ params }) {
  let post = await getBlogData(`${params.slug}.mdx`)
  if (!post) {
    return
  }

  const { frontMatter: { title, date, author, thumbnailUrl, description, canonical, images } } = post;
 

  return {
    title,
    description,
    alternates: {
      canonical,
    },
    openGraph: {
      title,
      description,
      type: 'article',
      publishedTime: date,
      url: `https://www.kwrds.ai/blog/${params.slug}`,
      images: [
        {
          url: `https://www.kwrds.ai/${thumbnailUrl}`,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title,
      description,
      images: [`https://www.kwrds.ai/${thumbnailUrl}`],
    },
  }
}

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