IMPROVE YOUR CLICK THROUGH RATE

IMPROVE YOUR CLICK THROUGH RATE

TAILOR CONTENT FOR EACH SOCIAL NETWORK

IMPROVE YOUR CLICK THROUGH RATE

TAILOR CONTENT FOR EACH SOCIAL NETWORK

GAIN ADDITIONAL REAL ESTATE & EXPOSURE

IMPROVE YOUR CLICK THROUGH RATE

TAILOR CONTENT FOR EACH SOCIAL NETWORK

GAIN ADDITIONAL REAL ESTATE & EXPOSURE

CAN LOOK MESSY IF NOT USED

No METATakes <title> and the first 200 characters of page content.

Basic META DataTakes <title>, META description and random image in the page

Using Google+ META DataUses tailored Title, Description and Thumbnail Image.

Available Tags

This is still in infancy. There are 4 tags to consider here:

• Type• Title• Image• Description – up to 200

characters

If no G+ data is set, it will look for Facebook OG data and if that’s missing will use standard META data

Example Code

<meta itemprop="name" content="Title specifically for Google+"><meta itemprop="description" content="This is exactly 200 characters of filler text specifically catering for GOOGLE+. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies consectetur turpis vel ultrices. 1 more sentence"><meta itemprop="image" content="http://3doordigital.com/ogtest/thumbnail.png">

Or…<h1 itemprop="name">Title</h1><img itemprop="image" src=“http://url.to/image.png" /><p itemprop="description">Description</p>

Facebook’s Open Graph is vast

Twitter have just widened their own structured data

Google+ will soon follow suit. They may widen their own META dataset or

use rich snippet data that is already implemented onsite.

No METATakes <title> and 2nd paragraph (1st was only 5 words).

Basic META DataTakes <title>, META description and random image in the page

Using Open GraphUses tailored Title, Description and Thumbnail Image.

Available Tags

For more hardcore devs you may want to look into the full Open Graph section of Facebook. Today I will only talk about the standard Facebook Like button.

• URL• Title• Image –at least 200x200 px• Description – up to 300

characters• Site Name• Type

Example Code

<meta property="og:title" content="Title specifically for Facebook"/><meta property="og:description" content="This is a longer version of the META description of a whopping 300 characters for FACEBOOK. Only this social network allows 300 where Twitter and Google+ only allow 200. Not sure why but Facebook provides more news feed real estate for the shared URL. 1 more sentence should do the trick for max 300."/><meta property="og:url" content="http://3doordigital.com/ogtest/3.html"/><meta property="og:image" content="http://3doordigital.com/ogtest/thumbnail.png"/><meta property="og:type" content="article"/><meta property="og:site_name" content="3 Door Digital"/>

There’s more to Open Graph

Just like schema.org, Facebook’s Open Graph is vast. More complex development is required to

build actions that manipulate verbs and nouns (eg “Alex listened to 99 problems by Jay Z on

Spotify”).

More info:

https://developers.facebook.com/docs/opengraph/

Normal TweetDoes nothing but output tweet text and link.

Tweet Using Twitter CardsUses Twitter Card Data to form the Title, Description and Thumbnail Imagehttps://twitter.com/alexmoss/status/321205663697092608

They’re Used in other Apps

Twitter Card data is used within the Android App and Tweetdeck

Available Tags

Here are the standard Twitter summary card tags:

• Site – twitter username of the website

• Creator – twitter username of the author/owner of that page

• Title• Image –at least 200x200 px• Description – up to 200

characters

Example Code

<meta name="twitter:card" content="summary"><meta name="twitter:site" content="@3doordigital"><meta name="twitter:title" content="Title specifically for Twitter"><meta name="twitter:description" content="This is exactly 200 characters of filler text specifically catering for TWITTER. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies consectetur turpis vel ultrices. 1 more sentence"><meta name="twitter:creator" content="alexmoss"><meta name="twitter:image:src" content="http://3doordigital.com/ogtest/thumbnail.png"><meta name="twitter:domain" content="3doordigital.com">

Available Twitter CardsThere are 6 types of Twitter Card• Summary Card: Default card, including a title, description, thumbnail,

and Twitter account attribution.• Photo Card: A Tweet sized photo card.• Gallery Card**: A Tweet card geared toward highlighting a collection of

photos.• App Card**: A Tweet card for providing a profile of an application.• Player Card: A Tweet sized video/audio/media player card.• Product Card**: A Tweet card to better represent product content.

** released 10 days ago (2nd April 2013)You should use the Summary Card at all times, and add the extra tags where needed.

Photo CardThe photo doesn’t have to be located at the shared URL

Gallery CardThe 4 images don’t have to be

located at the shared URL

Player CardNotice that I can set an image unrelated to the

video itself

Product CardThis is fairly flexible, as I have been able to define labels to provide niche

data as an app

App Card

This card is not available to generate in the validator, and does not validate by

URL

You need to apply for the Twitter card service. This may take a while…