An Introductory Look at Social Mark-Up

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

TAGS:

Transcript of An Introductory Look at Social Mark-Up

Page 1: An Introductory Look at Social Mark-Up

SOCIAL MARK-UP

Daniel ButlerHead of [email protected]

Page 2: An Introductory Look at Social Mark-Up

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

Page 3: An Introductory Look at Social Mark-Up

Forms of structured data for content in the social graph

Page 4: An Introductory Look at Social Mark-Up

Twitter Card

<meta name="twitter:card" content="summary_large_image"/><meta name="twitter:description" content="Why You Should Learn JSON-LD &amp; 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 &amp; Separate Your Data from Your HTML"/><meta name="twitter:domain" content="Builtvisible : Digital Marketing &amp; 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/

http://builtvisible.com/6-trends-structured-data/
Page 5: An Introductory Look at Social Mark-Up

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 &amp; Separate Your Data from Your HTML" /><meta property="og:description" content="Why You Should Learn JSON-LD &amp; 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 &amp; 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)

http://builtvisible.com/6-trends-structured-data/
Page 6: An Introductory Look at Social Mark-Up

The minimal spec

Page 7: An Introductory Look at Social Mark-Up

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/markup http://ogp.me/

https://dev.twitter.com/cards/markup
https://dev.twitter.com/cards/markup
http://ogp.me/
http://ogp.me/
Page 8: An Introductory Look at Social Mark-Up

Lets look at some examples

Page 9: An Introductory Look at Social Mark-Up

Twitter Cards

Page 10: An Introductory Look at Social Mark-Up

Summary Cards

The summary_large_image twitter:card property requires a min image size of 280px by 150px, and <

1MB in size

Page 11: An Introductory Look at Social Mark-Up

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/11858349453_e3f18e5881_z.jpg" /><meta name="twitter:url" content="https://www.flickr.com/photos/reza-sina/11858349453/" />

Page 12: An Introductory Look at Social Mark-Up

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_e3f18e5881_z.jpg" /><meta name="twitter:image1" content="http://farm8.staticflickr.com/7334/11858349453_e3f18e5881_z.jpg" /><meta name="twitter:image2" content="http://farm8.staticflickr.com/7334/11858349453_e3f18e5881_z.jpg" />

Will also merge with the large summary card on the 3rd July

Page 13: An Introductory Look at Social Mark-Up

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&#39;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.

https://dev.twitter.com/cards/types/player/approval
Page 14: An Introductory Look at Social Mark-Up

Facebook

Page 15: An Introductory Look at Social Mark-Up

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&#039;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" />

Page 16: An Introductory Look at Social Mark-Up

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" />

Page 17: An Introductory Look at Social Mark-Up

Test, validate & experiment

Page 18: An Introductory Look at Social Mark-Up

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.

https://developers.facebook.com/tools/debug/
https://developers.facebook.com/tools/debug/
https://developers.facebook.com/docs/sharing/webmasters
https://developers.facebook.com/docs/sharing/webmasters
Page 19: An Introductory Look at Social Mark-Up

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.

https://cards-dev.twitter.com/validator
https://cards-dev.twitter.com/validator
https://dev.twitter.com/cards/getting-started
Page 20: An Introductory Look at Social Mark-Up

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/sarYB81woqBE4C" 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/usingtwitterformarketingandoutreach2015final-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.

Page 21: An Introductory Look at Social Mark-Up

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/

http://bostinno.streetwise.co/2014/08/27/acura-twitter-cards-ads/
http://bostinno.streetwise.co/2014/08/27/acura-twitter-cards-ads/
http://bostinno.streetwise.co/2014/08/27/acura-twitter-cards-ads/
Page 22: An Introductory Look at Social Mark-Up

Social - App Deep Linking

Page 23: An Introductory Look at Social Mark-Up

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/5149e249222f9e600a7540ef" />

https://dev.twitter.com/cards/mobile
https://dev.twitter.com/cards/mobile
Page 24: An Introductory Look at Social Mark-Up

Looking to the future with JSON-LD

Page 25: An Introductory Look at Social Mark-Up

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>

Page 26: An Introductory Look at Social Mark-Up

ANY QUESTIONS?

Daniel ButlerHead of [email protected]


Mark Gensimore Jed Friedrichsen blendedschools.net Language Institute: An Inside Look.

Mark Gensimore Jed Friedrichsen blendedschools.net Language Institute: An Inside Look.

Who, what and why is the OECD? Economics of OECD Countries Introductory Lecture Mark Robson LMH 25 April 2005.

Who, what and why is the OECD? Economics of OECD Countries Introductory Lecture Mark Robson LMH 25 April 2005.

THE CARDIOVASCULAR SYSTEM An In-depth Look MARK H. HYMAN, MD, FACP, FAADEP.

THE CARDIOVASCULAR SYSTEM An In-depth Look MARK H. HYMAN, MD, FACP, FAADEP.

Mark Scheme (Results) - RevisionWorld · Will make the business look more professional. E.g. The business will look professional (1 mark). Spelling mistakes will indicate the business

Mark Scheme (Results) - RevisionWorld · Will make the business look more professional. E.g. The business will look professional (1 mark). Spelling mistakes will indicate the business

JMP Introductory Guide - SAS Support · Contents JMP Introductory Guide 1 Introducing JMP Your First Look ...

JMP Introductory Guide - SAS Support · Contents JMP Introductory Guide 1 Introducing JMP Your First Look ...

Global Education Policy and International … et...Global Education Policy and International Development: An Introductory ... authors look at the globalisation-education ... the liberalisation

Global Education Policy and International … et...Global Education Policy and International Development: An Introductory ... authors look at the globalisation-education ... the liberalisation

1. An Introductory Look at the New Omni-Circular Big changes have arrived! Uniform Administrative Requirements, Cost Principles, and Audit Requirements.

1. An Introductory Look at the New Omni-Circular Big changes have arrived! Uniform Administrative Requirements, Cost Principles, and Audit Requirements.

Starter - Look at these exam answers Look at the levels of response Mark scheme. This will be used to mark you section A’s in the examination. Look at.

Starter - Look at these exam answers Look at the levels of response Mark scheme. This will be used to mark you section A’s in the examination. Look at.

A Look at the Tool & its Construction - Lybrary.com of the FREE Introductory Series by P. Craig Browning Pop-Rivet.

A Look at the Tool & its Construction - Lybrary.com of the FREE Introductory Series by P. Craig Browning Pop-Rivet.

Numerik I - math.uni-paderborn.dewalter/teachingSS04/SkriptNumerikI.pdf · vi INHALT NAG Fortran Library. Oxford: Numerical Algorithms Group. – Introductory Guide, Mark 16. 1993.

Numerik I - math.uni-paderborn.dewalter/teachingSS04/SkriptNumerikI.pdf · vi INHALT NAG Fortran Library. Oxford: Numerical Algorithms Group. – Introductory Guide, Mark 16. 1993.

ArtiCLe 1. INTRODUCTORY PROVISIONS · ArtiCLe 1 - | Introductory Provisions - Introductory Provisions - Div. 1.3. INTRODUCTORY PROVISIONS SeC. 1.3.1. OPENING PROVISIONS A. Title this

ArtiCLe 1. INTRODUCTORY PROVISIONS · ArtiCLe 1 - | Introductory Provisions - Introductory Provisions - Div. 1.3. INTRODUCTORY PROVISIONS SeC. 1.3.1. OPENING PROVISIONS A. Title this

Introductory Physics for the 21 st Century Mark P. Haugan Department of Physics

Introductory Physics for the 21 st Century Mark P. Haugan Department of Physics

BrightOn Travel - "A Look at the Mark Warner #myweek Campaign" by Dean Harvey

BrightOn Travel - "A Look at the Mark Warner #myweek Campaign" by Dean Harvey

Success in introductory programming: what works?files.software-carpentry.org/training-course/2013/08/p34-porter.pdf · success in introductory Programming: What Works? ... Mark Guzdial,

Success in introductory programming: what works?files.software-carpentry.org/training-course/2013/08/p34-porter.pdf · success in introductory Programming: What Works? ... Mark Guzdial,

Hitting the Trillion Mark - World Bankdocuments1.worldbank.org/curated/en/970571549037261080/...Hitting the trillion mark— A look at how much countries are spending on infrastructure

Hitting the Trillion Mark - World Bankdocuments1.worldbank.org/curated/en/970571549037261080/...Hitting the trillion mark— A look at how much countries are spending on infrastructure

CKEOC Welcomes Newly Hired Academic Advisor: Mark Rickettscertificates in Welding Technology, Manufacturing Skills, Introductory Craft Skills, or IC3 Digital Literacy Certificate.

CKEOC Welcomes Newly Hired Academic Advisor: Mark Rickettscertificates in Welding Technology, Manufacturing Skills, Introductory Craft Skills, or IC3 Digital Literacy Certificate.

Look, no Mocks! Functional TDD with F# Mark Seemann @ploeh.

Look, no Mocks! Functional TDD with F# Mark Seemann @ploeh.

An Introductory Look at the Omni-Circular

An Introductory Look at the Omni-Circular

An Introductory Lecture to Environmental Epidemiology Part 3. Issues in Design. Mark S. Goldberg INRS-Institut Armand-Frappier, University of Quebec, and.

An Introductory Lecture to Environmental Epidemiology Part 3. Issues in Design. Mark S. Goldberg INRS-Institut Armand-Frappier, University of Quebec, and.

CAUSE Webinar Tuesday, Dec. 11 th, 2007 "Content Barriers to Effective Pedagogy in the Introductory Statistics Course" Mark L. Berenson Montclair State.

CAUSE Webinar Tuesday, Dec. 11 th, 2007 "Content Barriers to Effective Pedagogy in the Introductory Statistics Course" Mark L. Berenson Montclair State.