Facebook and Twitter are well known and still growing social platforms with a huge range. If you want to improve your website, you need to add improvements for these platforms too.
Open Graph Protocol is the key
Both of them are supporting the Open Graph Protocol, which are very fast to implement. This is the easiest way to optimize and controll your presenation on Facebook and Twitter. Other platforms like
Twitter Cards is basing on the Open Graph Protocol and give you some more options to control your presenation on twitter.
Here are two examples for Facebook and Twitter
Let’s get the sources
I use Open Graph Protocol for my blog overview and each single post. We just need to implement
the markup into our html <head> section. The markup for my overview:
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@makk_eightbit"/>
<meta name="twitter:creator" content="@makk_eightbit"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Marco Bunge" />
<meta property="og:description" content="Blogging about open-source, PHP and webtechnologies" />
<meta property="og:url" content="http://www.marco-bunge.com/" />
<meta property="og:site_name" content="Marco Bunge" />
<meta property="og:image" content="http://www.marco-bunge.com/img/default.jpg" />
<title>Marco Bunge</title>
Facebook needs basically four options to display your presantion correctly:
- og:type (e. g. website, article)
- og:title (could be same as your
<title></title>section) - og:image (e. g. product picture, logo, title image)
- og:description (a short description of the containing content)
You find detailed information about Open Graph Protocol on ogp.me. And you could also test your Open Graph Protocol definitions with Facebook’s OpenGraph Debugger tool.
For a better presenation of our content page we need two additional options.
- twitter:card (type description e.g. summery for content, player for streams, music or video)
- twitter:site (Twitter username)
For the card type summery twitter:title and twitter:description are also required. But we are using
Open Graph Protocol definitions and og:title and og:description is compatible to the twitter:* options, but not
vice versa.
You find a detailed documentation about Twitter Cards here. And you could also test your Twitter card definitions with the Twitter Card Tool.
Conclusion
The implementation of Open Graph Protocol and Twitter Card definitions is very simple, but still have a very powerfull effect. Someone is sharing your page and you have a presenation in social media with these additions.