Social Microdata

Open Graph

The Open Graph protocol enables any web page to become an entity in the social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other implemented entity or object. OG data is used by LinkedIn for defining how page snippets appear.

Basic OG data:

<meta property=“og:title” content=“ Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb” />
<meta property=“og:type” content=“video.movie” />
<meta property=“og:url” content=“ http://www.example.com/dr-strangelove/” />
<meta property=“og:image” content=“http://www.example.com/dr-stangelove.jpg” />

The full Open Graph schema is has many more properties to suit all pages and types of content. See the full schema at http://ogp.me.

Twitter Cards

Twitter pulls in information from webpages and displays it as a ‘card’. This helps to improve the click-through rate when your URLs are shared as they give users a richer experience and your website gets more space on the Twitter app.

Example Twitter card data:

<meta name=“twitter:card” content=“photo”>
<meta name=“twitter:site” content=“@examplephotosite”>
<meta name=“twitter:creator” content=“@sippey”>
<meta name=“twitter:title” content=“Good Morning, San Francisco”>
<meta name=“twitter:image” content=“http://example.com/photo/a/image.jpg”>
<meta name=“twitter:image:width” content=“610”>
<meta name=“twitter:image:height” content=“610”>

The Twitter card schema is relatively simple, but the attributes and options are far too extensive to republish here, and it would have already been updated by the time you bought this book.

You can see the full and up-to-date Twitter card documentation at http://dev.twitter.com/cards.

Rich Pins – Pinterest

Pinterest displays rich snippets on its service (called ‘Rich Pins’); they use the existing semantic mark-up standards Schema.org and OpenGraph to achieve this. If you have either of these implemented on your page you shouldn’t need to do any other development to gain Rich Pins, however you can troubleshoot this using the Rich Pin validator from Pinterest.