Making use of the Open Graph Protocol
Monday, April 6th, 2015 | Programming
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.
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.