Debugging Open Graph Images on Social Media

WEBVTT
00:00:00.160 --> 00:00:00.900
Hey, Steffen.
00:00:00.900 --> 00:00:05.057
How do you fix the wrong open graph images on social media?
00:00:07.756 --> 00:00:08.535
Hey, Dominik.
00:00:08.535 --> 00:00:10.154
That's pretty easy.
00:00:10.154 --> 00:00:13.553
You use something that I like to call a link debugger.
00:00:13.553 --> 00:00:18.789
So just Google for something like LinkedIn link debugger.
00:00:18.789 --> 00:00:26.216
And then all these social networks have their different tools and they like to call them differently.
00:00:26.216 --> 00:00:30.733
But we have, for example, for LinkedIn, the post inspector.
00:00:30.733 --> 00:00:42.466
And there, you simply add the link of the post that you shared on from your website to a social media network.
00:00:42.466 --> 00:01:02.643
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.
00:01:02.643 --> 00:01:07.521
Some of these tools might have actual buttons for that, but you'll find out on that tool.
00:01:07.521 --> 00:01:09.579
Why is this important?
00:01:09.579 --> 00:01:11.099
Why why is this an issue?
00:01:11.099 --> 00:01:24.090
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.
00:01:24.090 --> 00:01:30.257
And that happens for each individual link for each individual page or post.
00:01:30.257 --> 00:01:35.563
And then you need to simply manually refresh that page on that website.
00:01:35.563 --> 00:01:39.682
Let's also have a look at the link debugging.
00:01:39.682 --> 00:01:47.367
Facebook, you will have to be logged in there.
00:01:47.367 --> 00:01:52.082
But then it works just like in the same way.
00:01:52.082 --> 00:01:55.001
You simply copy and paste the link.
00:01:55.001 --> 00:02:00.379
Oh, that one didn't work.
00:02:00.379 --> 00:02:05.025
This one wasn't this post wasn't actually shared on Facebook yet.
00:02:05.025 --> 00:02:05.424
Okay.
00:02:05.424 --> 00:02:06.563
So that's interesting.
00:02:06.563 --> 00:02:08.123
Let's try another one.
00:02:08.123 --> 00:02:09.923
We're not that active on Facebook.
00:02:09.923 --> 00:02:14.520
This is the biggest reveal and obviously no one reading alphas as well.
00:02:14.520 --> 00:02:17.558
Let me try a more general one.
00:02:17.558 --> 00:02:20.417
Let me try our home page.
00:02:20.417 --> 00:02:22.536
Did anyone share that?
00:02:22.536 --> 00:02:23.096
Yes.
00:02:23.096 --> 00:02:27.913
And we got a little warm warning.
00:02:27.913 --> 00:02:28.073
Yeah.
00:02:28.073 --> 00:02:28.573
Yeah.
00:02:28.573 --> 00:02:29.611
What is that?
00:02:29.611 --> 00:02:33.550
Oh, they want us to add their Facebook app ID Yeah.
00:02:33.550 --> 00:02:34.729
No.
00:02:34.729 --> 00:02:34.848
That
00:02:34.968 --> 00:02:35.329
We don't
00:02:35.329 --> 00:02:36.028
have it.
00:02:36.028 --> 00:02:36.848
We don't have it.
00:02:36.848 --> 00:02:37.008
And
00:02:37.008 --> 00:02:39.687
here it says I mean, it's in German, so we have to translate maybe.
00:02:39.687 --> 00:02:43.774
So there's, like, annoyed scrape in which means like that you should scrape again.
00:02:43.774 --> 00:02:48.872
So in in Facebook, it doesn't directly invalidate the cache.
00:02:48.872 --> 00:02:51.218
But you'll have to do this manually.
00:02:51.218 --> 00:02:51.859
Right?
00:02:52.117 --> 00:02:52.277
Yeah.
00:02:52.277 --> 00:02:53.478
But if we show it
00:02:53.478 --> 00:02:57.276
when it was scrapped and they will actually update it from time to time.
00:02:57.276 --> 00:03:06.631
So, I mean, every social network probably handles that differently because there's a lot of like URLs probably shared on each network.
00:03:06.631 --> 00:03:13.326
And refetching the images as always, like, also take some resources.
00:03:13.326 --> 00:03:20.782
And, yeah, that's why sometimes they are not ever refreshed and sometimes just regularly.
00:03:20.782 --> 00:03:29.078
But this way, you can do it manually usually and update it whenever you know that something has changed.
00:03:30.217 --> 00:03:30.717
Alright.
00:03:30.717 --> 00:03:31.336
Great.
00:03:31.336 --> 00:03:31.836
Yeah.
00:03:31.836 --> 00:03:36.992
Oh, and look when I just found out, Twitter seemed to have removed their card value data.
00:03:36.992 --> 00:03:38.391
What's going on there?
00:03:38.391 --> 00:03:42.408
Might need to investigate on that.
00:03:42.408 --> 00:03:44.328
Did Elon do something?
00:03:44.328 --> 00:03:44.546
No.
00:03:44.546 --> 00:03:45.667
That was ahead of his time.
00:03:45.667 --> 00:03:46.406
Was it?
00:03:46.406 --> 00:03:49.394
Okay.
00:03:49.394 --> 00:03:54.331
And one more one more trick, one more tool.
00:03:54.331 --> 00:04:05.644
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.
00:04:05.644 --> 00:04:06.324
Io.
00:04:06.324 --> 00:04:10.122
And there you can copy and paste your link.
00:04:10.122 --> 00:04:18.115
And it will give you a preview for multiple networks and even for the Google search.
00:04:18.115 --> 00:04:21.853
And then you can control first before you post it every on band.
00:04:21.853 --> 00:04:27.160
Before, like, you have to check it in each link debugging tool on each network.
00:04:27.160 --> 00:04:38.793
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.
00:04:38.793 --> 00:04:40.831
So yeah, that's it.
00:04:41.259 --> 00:04:41.740
Awesome.
00:04:41.740 --> 00:04:42.059
Thanks.
00:04:42.059 --> 00:04:43.918
Especially the last one's really helpful.
00:04:43.918 --> 00:04:47.497
Not for removing, but for debugging, right, and for testing tools.
00:04:47.497 --> 00:04:49.305
So this is Really awesome.
00:04:49.305 --> 00:04:49.704
Yeah.
00:04:49.704 --> 00:04:50.444
Nice job.
00:04:50.444 --> 00:04:51.324
You're welcome.