Optimising Your Site For Facebook
Posted on September 4th, 2011
Since the rise and the increasing popularity of Facebook, there has been an increasing pressure on ensuring that your site is social media friendly, and can be easily shared with a user’s friends. If a user decides they wish to share your page or site to their friends, it is important that you have prepared for this correctly, otherwise it will not display correctly on their Facebook profile, and therefore may cause them to unshare the link.
There are several steps to preparing for a user sharing your page, the first is to ensure that the correct Meta data has been used within the code of your website. Within Facebook, when a user shares a page, it takes the contents of the <title> tag as the title for the page, and the Meta description as its description. For SEO purposes, this should already have been included within your page as good practice, as this description is also used as the description of your page within the Google search results, which a user will read before deciding to visit your page or not. Below is the Meta description used for my website:
<meta name="description" content="The online portfolio of Chris Anstey, a web designer and developer based in and around London" />
Along with the title and the description, a thumbnail is used when sharing a link on Facebook. Usually, this is just an image on the page that is being shared. If there are multiple images within the page, the user is able to select which image to use when they are sharing the link. However, if there are no images within the page, or if the images are not exactly what should be representing the website (eg. a footer image, a photo etc), there is a real need for a thumbnail for the website. After all, this will be displaying on the user’s profile, and on their friend’s News Feed’s when they log into Facebook, so this thumbnail may be the turning factor which causes several visitor to come to your website. Thankfully, a line of code has been introduced with when entered into the <head> section, along with the other Meta data, calls an image to be used as the thumbnail for the website:
<link rel="image_src" href="thumbnail.jpg" />
Here, the image called ‘thumbnail.jpg’ will be used as the thumbnail when the users clicks ‘Share’ on your website, or manually shares the link of your website on their Facebook. Take extra care to make sure the code is calling the image in the right place (eg. within an ‘images’ folder). If you have successfully followed these steps when preparing your website for being shared on Facebook, when a user clicks on share, they should see something like the following:
