If you, or someone else, makes a post on Facebook that links to a website, Facebook will automatically pull an image from that site and include it with the post. Usually the image selected is either the featured image in a blog post, or an image from the home page. This can result in unwanted images being associated with links to your site, or in a blank white box accompanying links to your website (when Facebook doesn’t find a suitable image to use).

If you’re experiencing any of these issues with Facebook posts, or would just like more control over the image that’s associated with your website on Facebook, you’ll need to add open graph meta data to the head section of your website. For this tutorial we’ll use a plugin to alter our theme’s code and inform Facebook of the image we want displayed. There’s a multitude of plugins that will get the job done, but for this tutorial we’ll be using the plugin Yoast SEO, which is a robust plugin for enhancing your website’s Search Engine Optimization.

Curious to see what image Facebook displays when linking to your website?
Follow this link and enter your website’s URL into Facebook’s debugger: https://developers.facebook.com/tools/debug/

Selecting or Creating your Facebook Image

We would recommend using your logo and/or an image that represents you and your brand. We chose to create an image that includes our logo, tagline and web address.

Facebook recommends 1200 x 630 pixels for the og:image. We would strongly recommend using an image that’s exactly this size as Facebook can be finicky and will discard images that don’t exactly meet their crawlers criteria.

Install & Activate Yoast SEO

Login to your WordPress site by entering your website URL followed by /wp-admin (e.g. www.yoursite.ca/wp-admin)

Select ‘Plugins’ from admin panel on the left side of your screen and select ‘Add New’. Type Yoast SEO into the search bar (top right) and hit Enter. Locate Yoast SEO from the list of results and click the Install Now button. When the plugin has loaded and installed, click on the Activate Plugin link.

Yoast SEO – Social Settings

Once your have activated Yoast SEO plugin look to your admin panel, running up the left side of your screen, and select ‘SEO’

• Click on the sub-menu item ‘Social’
• Select the tab ‘Facebook’
• Click on the box next to ‘Add open Graph meta data’
• Under Default settings click on the ‘Upload Image’ button. (This will take you to your media library. If you have already uploaded an image to your media library then select it and click on the ‘Use Image’ button on the lower right. Otherwise, select ‘Upload Image’ from the top left, and either drag and drop your image from a folder on your computer, or ‘Select Files’ and navigate to the image on your computer to upload it into your media library.)
• Once your image has been selected then click on the ‘Save Changes’ button.

Test the Results with Facebook Debugger

Click on this link to visit Facebook’s debugger page: https://developers.facebook.com/tools/debug/

Enter your website’s URL into the debugger and click ‘Debug’. Here you can view all of the current information that Facebook has for your website. Click on the ‘Fetch new scrape information’ button to see the effects of setting the og:image with Yoast SEO.

Scroll down the page to the section labelled og:image to view the images that Facebook has pulled from your site. Below this is a preview of what will be included when a link to your website is shared on Facebook.

*Hint: If the debugger tool isn’t showing you new information try appending adding the following line of code to you URL and re-click ‘Fetch new scrape information’:

?fbrefresh=CAN_BE_ANYTHING