How to Get the Right Image on Facebook from WordPress

How to Get the Right Image on Facebook from WordPress

Setting your OpenGraph info is vital to having control over what displays when someone shares a link to your site on Facebook. Using text in this image gets a little difficult due to the variety of sizes of the image Facebook displays, so we chose to take the icon from our logo and use that for our preview image. You will want to keep the description under 148 characters so that the text doesn’t get cut off.

Facebook Opengraph Settings

We use SEO Yoast on a lot of our WordPress sites, and their plugin adds the meta information for Facebook’s OpenGraph. It also allows you to control the OpenGraph data for individual pages and posts.

But if you want to do it yourself, you will want to insert the following code in between the <head> tags on your site.

Basic Metadata:

<meta property="og:title" content="Boom12 Communications" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://boom12.ca/" />
<meta property="og:image" content="http://boom12.ca/images/fb_logo.jpg" />

Optional Metadata

<meta property="og:audio" content="http://boom12.ca/theme.mp3" />
<meta property="og:description" 
  content="We are a Halifax based communications company that specializes in web and social media marketing." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="Boom12" />
<meta property="og:video" content="http://boom12.ca/trailer.swf" />

For more information on the properties and different uses visit ogp.me

To check and make sure that everything is working properly, you can use Facebook’s developer tool to debug your link. Keep in mind that Facebook caches the data, so if you have made changes, you can also use the debug tool to refresh the cache.