Each week at Builtvisible the teams get together for a group training session. This week we took a look at the basic fundamentals of social mark-up, what it is and why it exists, some of the different types, basic schema & examples, methods of testing & validation, as well as a look ahead to what this mark-up could look like in the future.
4. 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/
5. 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)
11. 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/" />
12. Multiple Images
<meta name="twitter:card" content= "gallery" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Mountain sunset" />
<meta name="twitter:url"
content="https://www.flickr.com/photos/reza-
sina/11858349453/" />
<meta name="twitter:image0"
content="http://farm8.staticflickr.com/7334/11858349453_e
3f18e5881_z.jpg" />
<meta name="twitter:image1"
content="http://farm8.staticflickr.com/7334/11858349453_e
3f18e5881_z.jpg" />
<meta name="twitter:image2"
content="http://farm8.staticflickr.com/7334/11858349453_e
3f18e5881_z.jpg" />
Will also merge with the large summary
card on the 3rd July
13. Player Cards
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@youtube">
<meta name="twitter:url"
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.
15. 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" />
16. 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" />
20. 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.
21. 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/
25. 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>