3. IMPROVE YOUR CLICK THROUGH RATE

4. IMPROVE YOUR CLICK THROUGH RATE
TAILOR CONTENT FOR EACH SOCIAL NETWORK

5. IMPROVE YOUR CLICK THROUGH RATE
TAILOR CONTENT FOR EACH SOCIAL NETWORK
GAIN ADDITIONAL REAL ESTATE & EXPOSURE

6. IMPROVE YOUR CLICK THROUGH RATE
TAILOR CONTENT FOR EACH SOCIAL NETWORK
GAIN ADDITIONAL REAL ESTATE & EXPOSURE
CAN LOOK MESSY IF NOT USED

8. No META
Takes <title> and the first 200
characters of page content.
Basic META Data
Takes <title>, META description
and random image in the page
Using Google+ META Data
Uses tailored Title, Description
and Thumbnail Image.

9. Available Tags Example Code
<meta itemprop="name" content="Title
specifically for Google+">
This is still in infancy. There are <meta itemprop="description"
4 tags to consider here: content="This is exactly 200 characters
of filler text specifically catering for
GOOGLE+. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Sed
• Type ultricies consectetur turpis vel
ultrices. 1 more sentence">
• Title <meta itemprop="image"
content="http://3doordigital.com/ogtest/t
• Image humbnail.png">
• Description – up to 200 Or…
characters <h1 itemprop="name">Title</h1>
<img itemprop="image"
src=“http://url.to/image.png" />
If no G+ data is set, it will look <p itemprop="description">Description</p>
for Facebook OG data and if
that’s missing will use
standard META data

10. 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.

12. No META
Takes <title> and 2nd paragraph
(1st was only 5 words).
Basic META Data
Takes <title>, META description
and random image in the page
Using Open Graph
Uses tailored Title, Description
and Thumbnail Image.

13. Available Tags Example Code
<meta property="og:title" content="Title
For more hardcore devs you may specifically for Facebook"/>
<meta property="og:description"
want to look into the full Open content="This is a longer version of the
Graph section of Facebook. Today META description of a whopping 300
I will only talk about the standard characters for FACEBOOK. Only this social
network allows 300 where Twitter and
Facebook Like button. Google+ only allow 200. Not sure why but
Facebook provides more news feed real
estate for the shared URL. 1 more
• URL sentence should do the trick for max
300."/>
• Title <meta property="og:url"
• Image –at least 200x200 px content="http://3doordigital.com/ogtest/3
.html"/>
• Description – up to 300 <meta property="og:image"
characters content="http://3doordigital.com/ogtest/t
humbnail.png"/>
• Site Name <meta property="og:type"
• Type content="article"/>
<meta property="og:site_name" content="3
Door Digital"/>

14. 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/

16. Normal Tweet
Does nothing but output
tweet text and link.
Tweet Using Twitter Cards
Uses Twitter Card Data to
form the Title, Description
and Thumbnail Image
https://twitter.com/alexmoss/status/321205663697092608

17. They’re Used in
other Apps
Twitter Card data
is used within the
Android App and
Tweetdeck

18. Available Tags Example Code
<meta name="twitter:card"
content="summary">
Here are the standard Twitter <meta name="twitter:site"
summary card tags: content="@3doordigital">
<meta name="twitter:title" content="Title
specifically for Twitter">
• Site – twitter username of <meta name="twitter:description"
content="This is exactly 200 characters
the website of filler text specifically catering for
TWITTER. Lorem ipsum dolor sit
• Creator – twitter username amet, consectetur adipiscing elit. Sed
of the author/owner of ultricies consectetur turpis vel
ultrices. 1 more sentence">
that page <meta name="twitter:creator"
• Title content="alexmoss">
<meta name="twitter:image:src"
• Image –at least 200x200 px content="http://3doordigital.com/ogtest/t
humbnail.png">
• Description – up to 200 <meta name="twitter:domain"
characters content="3doordigital.com">

19. Available Twitter Cards
There 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.

20. Photo Card
The photo doesn’t
have to be located
at the shared URL

21. Gallery Card
The 4 images don’t have to be
located at the shared URL

22. Player Card
Notice that I can set an
image unrelated to the
video itself

23. Product Card
This is fairly flexible, as I
have been able to define
labels to provide niche
data as an app

24. App Card
This card is not available to
generate in the
validator, and does not
validate by URL

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