Siegfried, deploy!

Debugging Open Graph Images on Social Media

August 17, 2023 Bleech
Siegfried, deploy!
Debugging Open Graph Images on Social Media
Show Notes Transcript Chapter Markers

Ever wondered why the wrong images pop up when you share your posts on social media? There's an easy fix! Learn how to use tools like LinkedIn's post inspector to reset the social network's cache and ensure the newest image and information get displayed.

Highlights
00:00 Finding Link Debuggers to Fix Open Graph Images
00:28 LinkedIn Post Inspector
01:36 Facebook Sharing Debugger
03:15 Twitter's Card Validator (removed?!)
03:55 Previewing Social Media Posts with OpenTags.io

Links
- LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/
- Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
- Twitter Card Validator: https://cards-dev.twitter.com/validator
- OpenTags.io Preview Tool: https://opentags.io/

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

Dominik:

Hey, Steffen. How do you fix the wrong open graph images on social media?

Steffen:

Hey, Dominik. That's pretty easy. You use something that I like to call a link debugger. So just Google for something like LinkedIn link debugger. And then all these social networks have their different tools and they like to call them differently. But we have, for example, for LinkedIn, the post inspector. And there, you simply add the link of the post that you shared on from your website to a social media network. And then it will show you that open graph metadata like the title and the image And typically with that, the cache of the social network also gets reset and the newest image and news information will be shown on that network. Some of these tools might have actual buttons for that, but you'll find out on that tool. Why is this important? Why why is this an issue? Well, because typically those social networks cash hard all that information that they received the first time that a link of your website is shared on their social network. And that happens for each individual link for each individual page or post. And then you need to simply manually refresh that page on that website. Let's also have a look at the link debugging. Facebook, you will have to be logged in there. But then it works just like in the same way. You simply copy and paste the link. Oh, that one didn't work. This one wasn't this post wasn't actually shared on Facebook yet. Okay. So that's interesting. Let's try another one. We're not that active on Facebook. This is the biggest reveal and obviously no one reading alphas as well. Let me try a more general one. Let me try our home page. Did anyone share that? Yes. And we got a little warm warning. Yeah. Yeah. What is that? Oh, they want us to add their Facebook app ID Yeah. No. That

Dominik:

We don't

Steffen:

have it. We don't have it. And

Dominik:

here it says I mean, it's in German, so we have to translate maybe. So there's, like, annoyed scrape in which means like that you should scrape again. So in in Facebook, it doesn't directly invalidate the cache. But you'll have to do this manually. Right?

Steffen:

Yeah. But if we show it

Dominik:

when it was scrapped and they will actually update it from time to time. So, I mean, every social network probably handles that differently because there's a lot of like URLs probably shared on each network. And refetching the images as always, like, also take some resources. And, yeah, that's why sometimes they are not ever refreshed and sometimes just regularly. But this way, you can do it manually usually and update it whenever you know that something has changed.

Steffen:

Alright. Great. Yeah. Oh, and look when I just found out, Twitter seemed to have removed their card value data. What's going on there? Might need to investigate on that. Did Elon do something? No. That was ahead of his time. Was it? Okay. And one more one more trick, one more tool. If you want to see how your post will look on social media, then there is a great tool and it's called open tags. Io. And there you can copy and paste your link. And it will give you a preview for multiple networks and even for the Google search. And then you can control first before you post it every on band. Before, like, you have to check it in each link debugging tool on each network. You can check it here and see if you like it also because the format of those images can be different, so it's it can get cropped differently on different networks. So yeah, that's it.

Dominik:

Awesome. Thanks. Especially the last one's really helpful. Not for removing, but for debugging, right, and for testing tools. So this is Really awesome.

Steffen:

Yeah. Nice job. You're welcome.

Finding Link Debuggers to Fix Open Graph Images
LinkedIn Post Inspector
Facebook Sharing Debugger
Twitter's Card Validator (removed?!)
Previewing Social Media Posts with OpenTags.io