Sometimes, when folks try to post a link to their website on Facebook, the preview does not display correctly. Perhaps an image is incorrect, or doesn’t appear at all. Or the title or description is incorrect.
To fix this problem, make sure you are familiar with how Facebook creates link previews, and if you are still having problems, there are several things you’ll want to check.
Incorrect Image Size
If your Facebook preview image is not displayed correctly, or is missing altogether, it is likely that the image has incorrect dimensions or sizing.
To display an image correctly in a preview, Facebook requires that the image meet a few guidelines – see the Facebook Best Practices for sharing page for info.
If you don’t see your image at all, the photo might not follow these minimum requirements:
- less than 8MB in file size
- larger than 200 x 200 pixels in resolution
So if your first or featured image is not pulling up correctly in the Facebook preview, make sure the image is not huge, tiny. After making a change, use the Facebook Sharing Debugger to check your link and refresh Facebook servers with the new image:
Use that tool to scrape the page info again-and-again until the preview looks right.
When you post a link on Facebook (or the like button is clicked on a post/page), Facebook visits the page on your site and looks through the code to get what it needs to create a preview.
Specifically, Facebook looks for “Open Graph” meta tags (called “OG tags” for short) which appear in the <head> section of the page code. ProPhoto creates these og tags for each page of your site so you don’t have to create them.
Some WordPress plugins create and include these OG tags in the page <head> code as well. If you use a plugin that does this, pages may have duplicate OG tags in your page code. Facebook doesn’t like multiple copies of these tags, which can cause your preview to be incorrect.
Some common plugins that do this are “All in One SEO Pack” and “WordPress SEO”, as well as Jetpack “Publicize” and “Sharing” modules.
An easy way to check if this is happening to you is to paste your link address in the Facebook Sharing Debugger:
If there are multiple sets of OG tags located in the source code of your site, you’ll see an error message from Facebook indicating this.
For example, let’s say we create a post and set a “featured image” for the post.
Facebook should use the featured image for the preview, not the first image of the post. But we notice that Facebook is using the first image in the post for the preview.
So we run the address of the post through Facebook Sharing Debugger and this is what we see:
Sure enough, we look at the source code for the post we’re trying to link to and there are two sets of these OG meta tags.
So how do we fix it, once it’s detected? Well, you have two options:
1) Disable the OG tags created by your plugin (preferable)
Since ProPhoto already creates the OG tags for you, it may be best to deactivate your plugin OG tag option, if possible. To do this, look inside of your plugin settings area and see if you can locate any option that will allow you to disable OG meta tags.
For example, with the Yoast SEO plugin, go to the “Social > Facebook” area, and you can disable the Open Graph meta data setting there.
For the All in One SEO plugin, look for a “Social Meta” area. If you see that area, then the OG info is turned on. To turn it off go to the “Feature Manager” area and click to deactivate their Open Graph info submission.
For the Jetpack plugin, “Publicize” and “Sharing” modules also add OG tags. If you have either or both modules enabled, you can simply disable them. If you prefer to keep the modules active though, see option #2 below.
If you use another plugin that you suspect is adding OG tags to your pages, see the plugin’s help documentation for instructions how to turn off the OG tag features. Or, you can use option #2 below:
2) Disable the OG tags created by ProPhoto
If you want a WordPress plugin to create your OG meta tags for you instead of ProPhoto, you can disable these right in the “ProPhoto > Settings > Site Settings > Social Media > Facebook preview options” area, seen here:
Once you’ve disabled the duplicate OG tags, you can use the Facebook Sharing Debugger to Scrape Again and see if the preview is correct. Sometimes you have to debug more than once or even clear the Facebook Object Debugger, as well (or instead).
And then your Facebook preview should appear correctly.