We often see people asking why Facebook is sharing the wrong image from blog posts and pages. It's commonly caused by one of three things:
- Lack of Open Graph settings
- URL shared before the image was changed or specified
- Facebook Open Graph cache not cleared
In this episode, we share how to set your Open Graph settings using Yoast SEO and how to clear the cache on Facebook.
Transcription was done by Temi.com
Hey, this is Scott Wyden Kivowitz. Welcome to episode 62 of the WordPress photography podcast. Now in the last episode I talked a about a, a bug in Yoast SEO version seven and you know, Yoast SEO is, is one of my favorite plugins for WordPress. It is by far the best seo plugin for WordPress. I've been using it for years and it's evolved in so many great ways. Now, of course, like I said in the last episode, every product, every software product could have bugs and most likely will have bugs at any given point in time. And today I wanted to bring some positivity to the sort of negative things that have been said about Yoast recently after the bug issue came out. And I want to share some, a really great thing that Yoast gives you for free out of the box related to social media and it's called open graph and Twitter card.
And basically with any page or post you have the ability to edit what is visible on search engines. And I'm sorry, not inserted into social media. And, uh, and so today's episode, I'm going to share not only how to create the images for social media in Yoast and, you know, WordPress and yost, but also how to debug your image that shared, if it's the wrong image. Okay. So first things first, I am using a, you'll see on the screen if you're, if you're watching this episode, but basically I am using Gutenberg. I am using the Beta Plugin of Gutenberg, which is going to be built into WordPress. Five point. Oh, basically it's a new visual editor. Now Yoast is not fully compatible with Gutenberg, get it does still work. So that's why I'm kind of showing you where they are right now. Um, I, I believe they're going to be switching from, if you're looking at the screen, if you're looking at the podcast episode, um, you'll, you're going to be switching from the sort of default custom metal box to using the sidebar, which is now preferred for Gutenberg and uh, but basically whether you're using the new Gutenberg or the current visual editor, um, you will have this Meta box right now and inside is a social tab.
And in the social tab are two other tabs, one for Facebook and one for Twitter. Now what Yoast will do by default is we'll actually use the image that is set as your featured image for the open graph settings. Open graph is anything that something like Google plus or Facebook or pinterest might look at Twitter looks at. If there's no Twitter card preset, you're going to see Twitter card in a second as well, but basically in the in the Facebook tab, have the ability to set your Facebook title for the page or post the Facebook description for the page or post and the Facebook image. If you don't want to use the same image that's your featured image. Now that that basically means you can create custom images specific for Twitter and Facebook. Okay, and that is a really nice thing because maybe you want to show something different, you want to personalize it to Facebook versus Twitter versus just your own website.
But by default it's using the featured image. So I'm just going to leave it as the featured image. And by default, the Facebook title will be your page or post title, and by default to the Facebook description, will be your excerpt or a piece of your excerpt rather or your Meta description, uh, if you're not using Yoast SEO to prefill your Meta description with your excerpt than a, as a, as a default, then your Facebook description will also, uh, utilize that. Whatever your default is for that. Now I, I might do another episode down the road of like preferred settings for us to set it up. So you're setting my automating Yoast SEO. Uh, I might do that as an episode down the road, but I don't want to do too many episodes, you know, a back to back all on Yoast SEO. Now, let's say that you create a post or technically a page like, like what I'm doing right now, I'm making a page and you go to share it on Facebook and you are noticing that, uh, the, the, the, the image is wrong.
Okay? You've got the featured image. There are, you have your, your, your everything set up and this wrong or in Twitter, right? So Twitter cards, uh, you can set the Twitter title, Twitter description, Twitter image, same sort of thing as Facebook except specifically for Twitter. So the image sizes are actually a little bit different. Now, let's say it's wrong on Facebook. Okay, so there is a page called the Facebook debugger and that is what you're seeing right now. If you're watching this episode, I will link to this in the show notes if you're not a, if you want to check this out later, but basically you put in the url that you want to see and you hit debug. And I'm going to show you everything. Now I am missing the Facebook App id because I didn't set that up in Yoast SEO. So that's why it's saying it's missing and that's actually not essential that you add the APP id, but it definitely makes it a little bit better because that means Facebook and correlate the page or post with your Facebook page.
Now you'll see that the image is this one. Now let's say I go and change the image. I'm going to choose. I'm going to choose a different feature in image. I'm gonna. Choose this one and I'm going to updates. Now, technically this is the wrong image right there, the two separate images, so what do you do once you've updated that image or the title or the description, you can see I've got the titles here in this scripture is here. It can hit scrape again and now it's going to check out that page again and let's just scrape again because sometimes it takes a little bit of time and look, the images finally changed. Now what that means is it actually cleared the open graph cash on Facebook and it cleared it and now it is taken in the new one, the new title, the new description in the new image, and if you have the APP id in there, the APP id will be there and it'll correlate that to a connected to your Facebook page.
So that is. That is the debugger tool. That is how you fix a broken open graph. If it's broken on, Facebook is using that. Twitter, I do not believe has a Twitter card debugger a. If they do, I will do some more research and if I, if I ever see one, I will be sure to share that with you, but otherwise I will link to Yoast SEO and I will link to the debugger for Facebook in the show notes, but that's all I want to share with you more importantly is how to fix the, the image I'm seeing it so often in the WordPress for photographers Facebook group. I'm seeing it so often that people are seeing the wrong image and they're not knowing how to fix it. So hopefully this episode I'll be able to share over and over again whenever we see somebody who's having that, that, that, that issue, that question come up, we can share this episode and it can be fixed for them, right? So that's it shared the Facebook, uh, opengraph debugger and Yoast SEO and you can really control what people see with your content on Facebook and Twitter. Thanks for watching. Thanks for listening. If you want to check out the show notes at imagely.com/podcasts/62. Until next time.