Recently we have had a lot of customers asking us how to fix the Facebook sharing image. When a business owner shares their new site on Facebook, sometimes the image that gets tied to the link, does not show the correct image or just shows the first image that appears on the page.
We have run into this problem several times, and have different ways of solving it. The one tool we use to check if the image is loading correctly can be found here: https://developers.facebook.com/tools/debug/
Once on this “Open Graph Object Debugger” page enter the URL of your website, and it will tell you the Open Graph information for your site. You might see some warnings telling you the “og:image is not defined” and that is where we need to fix the problem.
There are two ways of doing this:
1.) Use Yoast SEO plugin to help fix the problem.
- Yoast SEO -> Social -> Facebook
- Then check the box “Add Open Graph meta data”
- (Ignore Facebook Insights and Admins)
- Under “Default settings” upload the image of your choice.
- Then, “Save Changes” and go to facebook to test it out.
2.) Insert HTML into the Header
You can change the sharing image by inserting this line of code:
1 |
<meta property="og:image" content="https://yoursite.com/uploads/facebook-sharing-image.png" /> |
There are several ways of adding this code to your website:
- Find the Header or Footer scripts section of your theme and add the code there.
- Look for a Google analytics code section in your theme and add the code there.
- If your a developer and know how to access the header.php file you can also add it there just before the ending tag.
- The easiest option: Use a plugin like Header and Footer scripts to add the code to your site.