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
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/t
humbnail.png">
OrâŚ
<h1 itemprop="name">Title</h1>
<img itemprop="image"
src=âhttp://url.to/image.png" />
<p itemprop="description">Description</p>
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.
11.
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
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/t
humbnail.png"/>
<meta property="og: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/
15.
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
18. 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/t
humbnail.png">
<meta name="twitter:domain"
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.