Customise Your Website Images On Facebook

facebook images, tutorial, geekalicious, think geek

Up until quite recently, when you shared a link on Facebook it would have been accompanied by a thumbnail image.  In September, Facebook rolled out an update which presented a larger image dragged from the shared article which hopefully encouraged increased engagement and looked 'more beautiful' on mobile apps.  In this post Facebook give details about the optimum og:image size for your blog posts and articles.  Here is an example of such a post from the Typecast Facebook page:

example of a facebook post


But, hang on... what does "og:image" mean?  How do we know if our images are optimised to take advantage of this feature?  Why does the wrong image sometimes show up on the link when you share it?  


"og" is a command for "Open Graph" which is an official procedure that enables any web page to become a rich object in a social graph (source: The Open Graph protocol).  Facebook uses this command in its development.  Using very basic metadata embedded into the <head> section of your website you can optimise the way in which your links and images are shared on Facebook.


If you have followed a previous Geekalicious tutorial which explained about meta tags then you will already have the following meta content embedded into the <head> area:
<meta content='VERY SHORT DESCRIPTION HERE' name='description'/>
<meta content='BLOG OR WEBSITE KEYWORDS HERE' name='keywords'/>

Firstly, remember to back up your blog!.
Next, open the HTML section of your blog and find the line that says </head>.  DIRECTLY ABOVE the </head> tag you need to add the information below:

<meta content='YOUR WEBSITE NAME' property='og:site_name'/>
<meta content='THE TITLE OF YOUR WEBSITE' property='og:title'/>
<meta content='A DESCRIPTION OF YOUR WEBSITE' property='og:description'/>
<meta content='YOUR URL' property='og:url'/>
<meta content='THE LINK TO A MAIN IMAGE' property='og:image'/>

SAVE your template and then test your website using the Facebook Debug tool.  If there are any changes to be made they will show up here.



Hints and Tips


  • This method will override the use of any images when sharing on Facebook which may not be so good for blogs with continuous updates - this may only work as a temporary fix.  However, using this metadata will be great for websites who want to feature a company logo and company information.
  • In the metadata code the title of your website should be no more than 90 characters in length.
  • In the metadata code the description of your website should be about 300 characters in length.
  • In the metadata code the URL should be the main URL of your website or blog.
  • The og:image should be a minimum of 200x200px.  This will be the over-ride image that is used if the image on the article or blog post isn't the optimum size (1200x630px with the absolute minimum being 600x315px).
  • Use PicMonkey to resize any of your images.  Use Photobucket to host your images.
  • Check your meta content is active by using the Facebook Debug tool.



Hat Tip to @Sara_Saza for a link to CypressNorth which helped me to get my head around all this and to @LittleRascalRev for linking me up to the Facebook Debug tool to test everything.