Open Graph not working properly on Facebook & Twitter

[richstone (Rich Steinmetz)]

Hey there!

I have updated my Open Graph settings last week, and it doesn’t work with dynamic pages properly.

I have several blog posts and on Facebook it behaves differently for at least 3 blog posts:

Shows the expected picture:
https://fullstack.coach/post/how-to-get-your-first-software-developer-job-without-prior-professional-experience

For all the other posts a picture of the author of the post for some reason🤷:
https://fullstack.coach/post/how-to-build-a-web-app-prepare-the-fight

Sometimes I don’t see a picture in the preview at all…

Twitter doesn’t show any Open Graph information at all.
(I tried to read myself through the webflow docs & forum on open graph but I can’t figure out what the expected behavior for Twitter is or how to get it to work with webflow, Facebook should definitely work though…)

I tried different things, like other browser or cleaning the cache, but nothing helps so far.

Thanks in advance!

Preview Link

By the way, here on the forum it displays the correct pictures but sharing it on telegram gives me the correct preview picture for the first post and no picture for the second… It’s really confusing.

[richstone (Rich Steinmetz)]

Hey folks,

anyone any thoughts on this or should I post it anywhere else where I can get help with that? It’s quite an annoying issue…

[Fonsume]

Facebook does not like SVGs. I get this error:

Provided og:image URL, https://uploads-ssl.webflow.com/5ea830d684c5067b65e3cef4/5ed226b3646819cb33121a32_At%20work-pana.svg does not have a supported extension.

PS: Both FB and Twitter has url decoders you can use to troubleshoot stuff like this. Super useful!

Also, by default Facebook uses one “share” to actually find out what image to use, meaning it won’t have an image (all shares after that will). To get around this, simply put this in your header:

<meta property="og:type" content="website" />
<meta property="og:image:width" content="IMAGE WIDTH" />
<meta property="og:image:height" content="IMAGE HEIGHT" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Twitter-handle">
<meta name="twitter:title" content="TITLE">
<meta name="twitter:description" content="DESCRIPTION">
<meta name="twitter:image" content="IMAGE URL">

[richstone (Rich Steinmetz)]

wow, this is incredibly helpful, thank you so much!

[richstone (Rich Steinmetz)]

This is how it should work for a dynamic blog page, right?

Although right now I only get title, description and image of an older configuration, that I tried first:

(it was all hardcoded, without any variables)

Maybe it needs to update first

@Fonsume
May I ask you which tool exactly you are using to check for errors, I haven’t really found anything useful so far…

Also, I’m not sure how the proposed og settings would add a default image to opengraph, since we only specify an url for the twitter card…

[Fonsume]

Yep, that looks correct.

Facebook url debugger is here: Sharing Debugger - Facebook for Developers
Twitter url debugger (or “card validator”) is here: https://cards-dev.twitter.com/validator

You probably need to use those and make it scrape the new info from your urls. They store the info from the first “share”.

The OG image url setting is already in Webflow (a bit furter up in the settings window you posted) and should be populated there, no need to have it two places.

[richstone (Rich Steinmetz)]

thank you so much one more time!

It’s a bit weird that webflow doesn’t have more thorough information on that!

I still had issues with the LinkedIn image previews, though. I found their inspector as well:

Post Inspector

And tried to load my links there. After that, it seems to work now.

It seems like running the thing in the respective inspector already clears their cache.

[richstone (Rich Steinmetz)]

now I’m wondering, if I have to run the inspectors on all the sharing platforms

and also, how to make it right from the beginning the next time