Open graph image is wrong

🆘 Support
1

Hi, we’ve been facing some issues regarding linking our website and getting a random link preview image, instead of the one in the SEO preferences.

image (11)
image (11)1170×468 48.8 KB

Screenshot 2024-12-20 at 2.30.29 PM
Screenshot 2024-12-20 at 2.30.29 PM1702×894 41.5 KB

I’m not sure if this is the correct place to set this image or not. Would appreciate your help. Thank you!

2

Hey @mohamed.elshazly,

Can you please check the following:

  • Does that particular post/page have its own SEO image set?
  • Is the frontend query for that post/page asking for it?
  • Is it passing it to the opengraph metadata?
  • Is it getting the correct fallback image?

If you can share some website code with us, including the page that’s rendering the opengraph and also the query being used, we can take a look with you. Knowing which record that corresponds to inside Dato would also help.

Feel free to email support@datocms.com if you don’t want to share it publicly. Thank you!

3

Hey @roger.

  • The page does indeed have its SEO settings, with a social image assigned to it
  • Actually, I have an SEO fragment in the code that only asks for title and description, not image, could this be the issue?
 fragment SeoFragment on SeoField {
			title
			description 
}
  • I pass the title and description to a meta tag
     <title>{data?.title}</title>
 <meta name="description" content={data?.description} />
 </svelte:head>
  • Apparently not, but I’m sure it used to get the correct image before, maybe I’m wrong.

Do you think that this could be the issue?

Would doing it like this solve it? :

<svelte:head>
	<title>{data?.title}</title>
	<meta name="description" content={data?.description} />
	<meta property="og:image" content={data?.image?.url} />
</svelte:head>

Thanks in advance!

4

Hi @mohamed.elshazly,

Yes, if you add the SEO image to the query like:

query MyQuery {
  exampleModel {
    seo {
      title
      description
      image {
        responsiveImage {
          src
        }
      }
    }
  }
}

You should get back something like:

{
  "data": {
    "exampleModel": {
      "seo": {
        "title": null,
        "description": null,
        "image": {
          "responsiveImage": {
            "src": "https://www.datocms-assets.com/148466/1734975171-example2.png"
          }
        }
      }
    }
  }
}

And then you can use SeoField.image.responsiveImage.src to get the record-specific SEO image.

Does that work?

5

No actually. I did just that.

  1. got the image from the SEO record.
  2. Put it in a meta tag with property ‘og:image’ and the image src

But when I paste the website url in a linkedin comment or something, I still get the wrong image.

The SEO setting of that page, the landing page, has a social card image attached and everything, but I still get a different image instead.

6

@mohamed.elshazly,

Could you please email (support@datocms.com) or DM me a link to your website and the record in question, ideally with the source code of that page? I can’t tell what is happening from your description alone :frowning:

Normally if you query the field and attach it to your meta tag, it should just work. Maybe there’s some caching glitch or code issue, hard to say, but I’d be happy to take a closer look?