I get a lot of people asking me why their site doesn’t look right when they share it on Facebook. Usually, the problem is that the wrong image is showing when they share it on Facebook.
Sometimes the page title is wrong or the preview of the page’s content isn’t right.
The reason is that the page is missing Open Graph protocol, or the Open Graph is improperly formatted.
Not having the correct image when your page is shared on social media is a huge problem. The right image on the Facebook preview helps your site get more clicks. It catches your followers’ eyes as they endlessly scroll their Facebook feed.
I’m going to give a brief overview of what is Open Graph protocol and how you can add it to your site!
What is Open Graph Protocol?
The Open Graph protocol is used by Facebook to control how sharing on the social media site looks. It is a set of rules and guidelines used by Facebook to determine what your web page looks like when it’s shared.
When you share a link to Facebook with Open Graph meta data defined, it will look like this:
Here is the code on the page that controls how the link preview appears.
<meta property="og:title" content="How to Get More Google Reviews: Guide for Small Business" />
<meta property="og:description" content="In this guide find out how to get more Google reviews to increase your local rankings, connect with new customers, and build your online reputation. Small business need more reviews." />
<meta property="og:image" content="https://alwaysrelevantdigital.com/wp-content/uploads/2021/07/more-google-reiews.jpg" />How does Facebook’s Open Graph protocol work?
First off, when you share a link on Facebook, Facebook tries to give a preview of the content by looking in the code of the page for Open Graph properties. They look like this: <meta property=”og:type” content=”website”> and they tell Facebook information about the page you are sharing.
The most important Open Graph property is the og:image tag. If the page you’re sharing isn’t showing an image preview, or it’s the wrong image, you don’t have an og:image tag on the page.
When you share a page without this Open Graph property, Facebook tries to help you out by showing the firsts image it sees on the page. This is often the logo in the header of the page and not much better than no image at all.
How do I add Open Graph protocol to pages to my website?
If you are using a website builder like Wix or SquareSpace, you’ll find the option to add Open Graph properties under Social Sharing.
If your site runs WordPress, the easiest way to add is to install an SEO plugin that will walk you through the process. I like using RankMath, but other SEO wordpress plugins like Yoast or All in One SEO also have this option.
Regardless of which plugin you use, the option to add and edit Open Graph protocol can be edited on a page by page level.
How do I check if my page has the right Open Graph Properties?
Great, so you’ve updated the pages on your website with new og:image tags and maybe a few others. But when you share your pages they look the same. What gives?
First, you need to let Facebook know that you’ve updated the pages and have google scrape the pages again.
Go to Facebook Sharing Debugger and input the web page’s URL and select debug.
Then select Scrape Again.
This will purge Facebook’s cache of your page and have it collect new data from the page. If you don’t see your new image show up, then something went wrong and you should check the code of your page to make sure it has the correct Open Graph properties.
If you’re updating all the pages on your website, you can use the Batch Invalidator on the Sharing Debugger page to clear Facebook’s cache of every page on your site.
What are the most important Open Graph meta tags?
There are over 15 different types of Open Graph tags you can add to your pages, but you only need to add these 3 tags to have the greatest impact on how your site is viewed on Facebook.
- og:title This Open Graph tag determines what Facebook shows as the title of your page. It’s limited to around 40-60 characters, anything longer will be cut off so include the most important words at the start of the title.
- og:description The description is shown beneath the title. Facebook recommends 2-4 sentences, but this often gets shortened, especially on mobile. Include a call to action at the beginning to entice clicks through to your site.
- og:image This is the most important tag! This should be the URL of the image you want to show when shared on Facebook. It’s best to create custom images for your sharable pages like blog posts, or event pages. You can create a generic image for the rest of the pages on your site that highlights your brand or logo.
Conclusion
That should do it! When you share your website’s pages on Facebook now, your followers will now see the right image preview of your page, and you should see an increased clickthrough rate.
Not sure what size image to include in your og:image tag? Check out our article on the ideal social media image sizes.
Oh, Twitter also uses Open Graph, so this also fixes images on Twitter, but who cares about Twitter?
