Setting up open graph images for social media platforms

Hi there, I keep failing setting up the right og:image for my website. I did everything I could, like prerendering and I added the meta tag my head of the html file. LinkedIn keeps displaying a default image when I create a post and Facebook doesn’t display an image at all. Can you please help with this? What I do wrong?
Thank you very much in advance!

Greetings,
Daan

Hi @DaanR39

Certainly can try to help. Can you provide the URL for the site in question? If you are deploying from git, are you able to share the repository?

Hi Coel, thank you for responding! It’s about the site with url https://www.podcast-tailor.nl/
I’m indeed deploying from Github: GitHub - DaanR37/podcast-tailor

Thanks in advance.

Greetings,
Daan

This is the warning Facebook for Developers gives me after fetching my website’s URL.

This is the meta tag

<meta property="og:image" content="https://podcast-tailor.nl/Logo-Podcast-Tailor.png">

This is fine.

What the major part of the problem is, is that podcast-tailor.nl is inaccessible, while www.podcast-tailor.nl is. This will come down to how you have configured your site custom domain and domain in Netlify DNS. You are missing the record for the former.

You should see something like this in your custom domain settings


(note both bare/apex and www subdomain are configured.)

And in the Domains section you should see something like this


(note both bare/apex and subdomain are configured.)

Check over Netlify DNS documentation and [Support Guide] DNS Quick Start - How to set up DNS to correct any issues you have here.

Hi Coel, thanks a lot! This really helped me. I have managed to setup the Netlify DNS for my Apex domain.

Only side note: when I use the LinkedIn Developer tool, Post Inspector, to inspect it, it wil display the right preview image I’ve set in my og:image tag. However, when I create a post on LinkedIn, it gives me back an old og image which I uploaded yesterday. Is this a matter of time and should I wait till DNS routing did has done it’s job?

On the other hand, when I use the Facebook Developer tool to inspect the url, I also get this old image back. But, in the overview (see screen print) the right url is displayed after og:image. That’s a weird contradiction.


when you go to that url in the previous screen print i’ve just shared, you will see the right image. But it in the same result it gives back the white and older version of the og:image (which is not part of the html anymore).

It is possible LinkedIn and Facebook have that image cached, or it is cached somewhere along the route to your site, and is not getting pulled directly from your site. This is only a guess. I used the Twitter validator and the correct image shows.