A client of mine recently embarked on a big marketing push for a campaign of hers. She was concerned that when sharing her homepage URL, facebook was generating an accompanying image that was cropped in a bad way, because it was trying to display her full homepage banner in a different image ratio.
Without creating a specific open graph oriented image, her FB links looked like this
A Better Display
After a little work, we can make the reference look professional
In essence, we needed to enable Facebook’s Open Graph meta tags.
What is Open Graph?
Open Graph is Facebook’s protocol which allows 3rd party websites and webapps to connect user activity on-site with user activity on Facebook.
How to enable Open Graph on your website?
The Yoast SEO plugin makes it very easy to add Open Graph tags. If you haven’t already installed this plugin, go do that.
1) Log in to your WordPress website. When you’re logged in, you will be in your ‘Dashboard’. On the left-hand side, you will see a menu. In that menu, click on ‘SEO’.
2) The ‘SEO’ settings will expand providing you additional options. If you don’t see the ‘Social’ setting in your ‘SEO’ menu, please enable your advanced settings first.
3) Click on ‘Social’.
4) Click on the ‘Facebook’ tab and toggle the ‘Add Open Graph meta data’ to enabled
5) Customize your Open Graph tags by specifying a Facebook admin, adding a default image for pages without images, and more.
6) Click ‘Save Changes’.
Sometimes other plugins, such as OptimizePress, contain their own systems for embedding social media images and other meta-data. If you plan to use Yoast SEO, you should disable that feature of the other plugin.
How to edit Open Graph tags on your post/page?
You can edit the Open Graph tags by going to the Yoast SEO Metabox, clicking on the share icon, and then entering in your desired for the title and the descriptions. This is also where you can upload a unique image for Facebook.
What if it doesn’t seem to be working?
Let’s say you’ve done all the above mentioned steps but you’re still getting an autogenerated image there. Most likely, this is due to Facebook already scraping your site and saving some meta data into it’s cache. To find out what Facebook thinks it knows about your pages, you should use the Facebook Sharing Debugger tool.
You can use the Sharing Debugger to see the information that is used when your website content is shared on Facebook, Messenger and other places. The Batch Invalidator will let you refresh this information for multiple URLs at the same time.
Make note of the entry for “Time Scraped”. If it’s from before you last updated the site, you’ll want to press the “scrape again” button next to it.
If you’re still getting an incorrect image, it’s possible that another plugin is outputting a “og:image” meta data entry higher in the page DOM. If this is the case, you’ll want to inspect the source code of the rendered page, use the Find Text tool and search for that phrase.
What is the Ideal Open Graph Image Meta Tag Size (og:image) For Facebook Sharing
Facebook recommends 1200 x 630 pixels for the og:image dimensions (info), which is an approximate aspect ratio of 1.91:1. This gives your shared post a full-size image below the post text, and above the site title/description. According to Facebook, you can go as low as 600 x 315 and still receive a full-size image, but I found that you can go as low as around 450 width. If you go too small (about 400 in width or less), your post will only receive a small square thumbnail on the left side. Also, if your image has a tall aspect ratio, Facebook may display a tall aspect ratio thumbnail on the left side (not square).
Note: this image size and ratio may seem too large to you, but uploading at this larger size will allow for higher resolution displays on retina devices like newer MacBooks, iPhones, etc.
For reference, here’s an example of the image I created for the online summit referenced previously: