Enhance your website for social platforms

social media optimization

Posted by on October 02, 2015 Enhance your website for social platforms

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

Tip

LinkedIn, Pinterest, Google+ and Xing are also supporting Open Graph Protocol.

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

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.

Twitter

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.