Sometimes, when folks try to post a link to their website on Facebook or other sharing platforms, 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 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:
https://developers.facebook.com/tools/debug
Use that tool to scrape the page info again-and-again until the preview looks right.
Plugin Interference
When you post a link on Facebook or another sharing app, Facebook/the sharing app visits the page on your site and looks through the code to get what it needs to create a preview.
Specifically, they look 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 and other sharing apps 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:
http://developers.facebook.com/tools/debug/
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:
Uh oh, multiple OG tags spotted by Facebook...
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 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:
2) Disable the OG tags created by your plugin
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 "Settings > Site Features" area:
Then scroll down to "Social Sharing" and you can disable the Open Graph meta data setting there.
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.
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).
Looking good now, no errors!!
And then your Facebook preview should appear correctly.
Comments
0 comments
Article is closed for comments.