When you paste a link into Facebook or other social networks (which in theory you could use) it generates a preview of the website including a title, image and description.
Webmasters actually have the power to suggest content for these items. This is something I recently implemented on the Leeds Restaurant Guide.
For example, the page is structured with the site name in the title and various images on the pages. However, when you post it into Facebook, it is pretty obvious to a human what information you actually want in there. You want the name of the restaurant and the image of the restaurant itself.
To suggest to the client what information I think would be best in there, I added some meta tags based on the Open Graph Protocol. For example, here is an example from Bibis.
<meta property="og:type" content="article" /> <meta property="og:article:author" conent="Leeds Restaurant Guide" /> <meta property="og:title" content="Bibis Italianissimo review" /> <meta property="og:image" content="http://www.leedsrestaurantguide.com/images/restaurants/Bibis%20Italianissimo.jpg" />
This provides helpful information to the client, usually Facebook, as to what information it should display where, making your site more sharable. Sites like BuzzFeed are all other these sorts of tags – just view their source code to see. This is why they are always so well presented and perhaps one of the reasons why they are so successful.
Don't have time to check my blog? Get a weekly email with all the new posts. This is my personal blog, so obviously it is 100% spam free.
Tags: facebook, html, meta tags, open graph, social media
This entry was posted on Monday, April 6th, 2015 at 10:36 am and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.