An Introductory Look at Social Mark-Up

SOCIAL MARK-UP
Daniel Butler
Head of SEO
daniel@builtvisible.com

You’ve probably heard of it,
but what is social mark-up
really?

Forms of structured data for
content in the social graph

Twitter Card
<meta name="twitter:card"
content="summary_large_image"/>
<meta name="twitter:description" content="Why You
Should Learn JSON-LD & Separate Your Data from
Your Markup - a helpful post from the team at
Builtvisible.com"/>
<meta name="twitter:title" content="Why You Should
Learn JSON-LD & Separate Your Data from Your
HTML"/>
<meta name="twitter:domain" content="Builtvisible :
Digital Marketing & SEO Agency"/>
<meta name="twitter:image:src"
content="http://builtvisible.com/wp-
content/uploads/2015/06/facebook-instant-
articles.png"/>
<meta name="twitter:creator"
content="@richardbaxter"/>
http://builtvisible.com/6-trends-structured-data/

Open Graph - Facebook
<meta property="og:locale" content="en_GB" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Why You Should
Learn JSON-LD & Separate Your Data from Your
HTML" />
<meta property="og:description" content="Why You
Should Learn JSON-LD & Separate Your Data from
Your Markup - a helpful post from the team at
Builtvisible.com" />
<meta property="og:url"
content="http://builtvisible.com/6-trends-
structured-data/" />
<meta property="og:site_name" content="Builtvisible
: Digital Marketing & SEO Agency" />
<meta property="article:author"
content="https://www.facebook.com/richardbaxterseo"
/>
<meta property="article:tag" content="Technical" />
<meta property="article:section" content="Research"
/>
…
http://builtvisible.com/6-trends-structured-data/
Open Graph was popularised by FB but is
used by many other sites incl Pinterest (&
even Twitter as a fallback)

Very Similar to Schema.org
<html prefix="og: http://ogp.me/ns#">
og:title
og:type (article / video etc)
og:image
og:url
twitter:card
twitter:site
twitter:title
twitter:image
twitter:description
https://dev.twitter.com/cards/markuphttp://ogp.me/

Summary Cards
The summary_large_image twitter:card
property requires a min image size of
280px by 150px, and < 1MB in size

Photo Cards
As of 3rd July this type will be assimilated
into the ‘summary card with large image’
card.
<meta name="twitter:card" content="photo" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Mountain sunset"
/>
<meta name="twitter:image"
content="http://farm8.staticflickr.com/7334/118583494
53_e3f18e5881_z.jpg" />
<meta name="twitter:url"
content="https://www.flickr.com/photos/reza-
sina/11858349453/" />

Multiple Images
<meta name="twitter:card" content= "gallery" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Mountain sunset" />
content="https://www.flickr.com/photos/reza-
sina/11858349453/" />
<meta name="twitter:image0"
content="http://farm8.staticflickr.com/7334/11858349453_e
3f18e5881_z.jpg" />
3f18e5881_z.jpg" />
3f18e5881_z.jpg" />
Will also merge with the large summary
card on the 3rd July

Player Cards
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@youtube">
content="http://www.youtube.com/watch?v=L6npfdytkU8">
<meta name="twitter:title" content="Best Fails of the
Week 1 May 2015 || FailArmy">
<meta name="twitter:description" content="FailArmy has
received plenty of epic fails in the wake of Cinco de
Mayo. Enjoy all of them in this week's best fails of
the week! Check out our second channe...">
<meta name="twitter:image"
content="https://i.ytimg.com/vi/L6npfdytkU8/maxresdefault
.jpg">
<meta name="twitter:player"
content="https://www.youtube.com/embed/L6npfdytkU8">
<meta name="twitter:player:width" content="1280">
<meta name="twitter:player:height" content="720">
There is an approval process at a @user
level for ‘twitter:player’ to take effect.

Article
<meta property="og:type" content="article" />
<meta property="og:title" content="What To Do When Your Link
Building Campaign Fails" />
<meta property="og:description" content="So, your link
building campaign didn't perform as expected -- now
what? Columnist Casie Gillette weighs in on how we can learn
from our mistakes." />
<meta property="og:url"
content="http://searchengineland.com/link-building-campaign-
fails-222357" />
<meta property="og:site_name" content="Search Engine Land"
/>
<meta property="article:publisher"
content="https://www.facebook.com/searchengineland" />
<meta property="article:section" content="Channel: SEO" />
<meta property="article:published_time" content="2015-06-
09T10:35:21+00:00" />
<meta property="og:image"
content="http://searchengineland.com/figz/wp-
content/seloads/2015/06/links-broken-fail-ss-1920.jpg" />

Video
<meta property="og:site_name" content="YouTube" />
<meta property="og:url" content="http://www.youtube.com/watch?v=L6npfdytkU8" />
<meta property="og:title" content="Best Fails of the Week 1 May 2015 || FailArmy" />
<meta property="og:description" content="FailArmy has received plenty of epic fails in the wake..." />
<meta property="og:image" content="http://i.ytimg.com/vi/L6npfdytkU8/maxresdefault.jpg" />
<meta property="og:type" content="video" />
<meta property="og:video:url" content="https://www.youtube.com/embed/L6npfdytkU8" />
<meta property="og:video:secure_url" content="https://www.youtube.com/embed/L6npfdytkU8" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
<meta property="og:video:tag" content="fail" />
<meta property="og:video:tag" content="failarmy" />

Facebook Debugger
https://developers.facebook.com/tools/debug/
https://developers.facebook.com/docs/sharing/webmasters
The debugger is excellent, but needs to be
given their terrible documentation.

Twitter Live Preview
https://cards-dev.twitter.com/validator
Twitters documentation is extremely
thorough including code examples &
snippets, use this as a base for client work.

Take a look at Slideshare…
<meta name="twitter:card" value="player" />
<meta name="twitter:site" value="@slideshare" />
<meta class="twitter_player"
value="https://www.slideshare.net/slideshow/embed_code/key/sarYB81w
oqBE4C" name="twitter:player" />
<meta name="twitter:player:width" value="342" />
<meta name="twitter:player:height" value="291" />
<meta class="twitter_title" value="Using Twitter for Marketing and
Outreach Workshop" name="twitter:title" />
<meta class="twitter_image"
value="https://cdn.slidesharecdn.com/ss_thumbnails/usingtwitterform
arketingandoutreach2015final-150604200712-lva1-app6892-thumbnail-
4.jpg?cb=1433782804" name="twitter:image" />
Slideshare have adopted the ‘player’
property to leverage ‘iframe’ content to
embed presentations into Tweets.

A little more interactive…
This example was created by advertisers, but
is feasible (non-paid) if we can whitelist the
clients Twitter profile for use with ‘player’
and leverage iframe content.
Interactive elements allowed users to select
specific car features without leaving
Twitter.
http://bostinno.streetwise.co/2014/08/27/acura-twitter-cards-ads/

Promote & Install Apps Directly from
Twitter (Android & IOS)
https://dev.twitter.com/cards/mobile
<meta name="twitter:app:country" content="US" />
<meta name="twitter:app:name:iphone"
content="Example App" />
<meta name="twitter:app:id:iphone"
content="306934135" />
<meta name="twitter:app:url:iphone"
content="example://action/5149e249222f9e600a7540ef"
/>
<meta name="twitter:app:name:ipad" content="Example
App" />
<meta name="twitter:app:id:ipad"
content="306934135" />
<meta name="twitter:app:url:ipad"
content="example://action/5149e249222f9e600a7540ef"
/>
<meta name="twitter:app:name:googleplay"
content="Example App" />
<meta name="twitter:app:id:googleplay"
content="com.example.app" />
<meta name="twitter:app:url:googleplay"
content="http://example.com/action/5149e249222f9e60
0a7540ef" />

Looking to the future with
JSON-LD

This is what the mark-up could look
like:
<script type="application/ld+json">
{
"@context": "http://ogp.me",
"@type":"article",
"og:locale": "en_GB",
"og:title": "Log File Analysis for SEO",
"og:description": "Mastered technical SEO and feel
like you’d like to stretch your knowledge further?
Read this unapologetically technical guide to Log
File Analysis...",
"og:url": "http://builtvisible.com/log-file-
analysis/",
"og:site_name": "Builtvisible : Digital Marketing
& SEO Agency",
"og:image": "http://builtvisible.com/wp-
content/uploads/2014/12/log-file-analysis-
social.jpg",
"og:published_time":"2014-09-15",
"og:author": "Daniel Butler"
}
</script>
<script type="application/ld+json">
{
"@context": "http://api.twitter.com/",
"@type":"summary",
"twitter:title": "Log File Analysis for SEO",
"twitter:description": "Mastered technical SEO and
feel like you’d like to stretch your knowledge
further? Read this unapologetically technical guide
to Log File Analysis...",
"twitter:url": "http://builtvisible.com/log-file-
analysis/",
"twitter:site": "@Builtvisible",
"twitter:image": "http://builtvisible.com/wp-
content/uploads/2014/12/log-file-analysis-
social.jpg"
}
</script>

ANY QUESTIONS?
Daniel Butler
Head of SEO
daniel@builtvisible.com

An Introductory Look at Social Mark-Up

More Related Content

Similar to An Introductory Look at Social Mark-Up

More from Builtvisible

Recently uploaded

An Introductory Look at Social Mark-Up