Happily Ever After: Open Graph Twitter Cards And Schema.org By Jeff Preston
Upcoming SlideShare
Loading in...5

Happily Ever After: Open Graph Twitter Cards And Schema.org By Jeff Preston



SMX Advanced 2014 Session #SMX #13A - Super Session: Enhancing Search Results With Structured Data & Markup Happily Ever After: Open Graph, Twitter Cards, & Schema.Org By Jeff Preston @Jeffreypreston ...

SMX Advanced 2014 Session #SMX #13A - Super Session: Enhancing Search Results With Structured Data & Markup Happily Ever After: Open Graph, Twitter Cards, & Schema.Org By Jeff Preston @Jeffreypreston Of Disney Interactive

Read more on SEO at http://searchengineland.com



Total Views
Views on SlideShare
Embed Views



27 Embeds 7,496

http://searchengineland.com 4769
http://www.trafficgenerationcafe.com 1765
http://seoblog.giorgiotave.it 349
http://feedly.com 311
https://twitter.com 125
http://plus.url.google.com 32
http://beijaflor.hatenablog.jp 21
http://www.newsblur.com 16
http://digg.com 16
http://www.feedspot.com 14
http://www.inoreader.com 13
http://news.google.com 10
http://newsblur.com 9
https://www.inoreader.com 8
http://reader.aol.com 6
http://electmedia.com 6
https://www.rebelmouse.com 5
http://www.socialphy.com 4
https://translate.googleusercontent.com 3
https://www.commafeed.com 3
http://feedreader.com 3
http://www.oneupfeeds.com 2
http://translate.googleusercontent.com 2
http://en.paperblog.com 1
http://senukexcrseo.tumblr.com 1
http://silverreader.com 1
http://www.google.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Happily Ever After: Open Graph Twitter Cards And Schema.org By Jeff Preston Happily Ever After: Open Graph Twitter Cards And Schema.org By Jeff Preston Presentation Transcript

  • Happily Ever After: Open Graph, Twitter Cards, and Schema.org Jeff Preston Disney Interactive
  • Structured Data and SEO • Helps search engines better understand content and markup • Provides opportunity to improve search engine listings and Facebook posts • Will not fix other SEO problems
  • Schema.org, Open Graph, and Twitter Cards Schema.org Open Graph Twitter Cards Promoted by Google, Microsoft and Yahoo Promoted by Facebook (and used by Google Plus & Twitter) Promoted by Twitter Inline markup Meta tags in head Meta tags in head
  • Open Graph • Provides basic data about the page: title, type of page, thumbnail, canonical URL, etc. • Ensures additional data is available for videos, images, music, etc. in meta data • Links together official website to official Facebook page • Easy to implement
  • Open Graph Example
  • Open Graph Example <meta property="og:site_name" content="disney movies"> <meta property="og:description" content="Visit the official Million Dollar Arm website to watch trailers, read the synopsis, meet the cast, browse photos, play games, download media, and more!"> <meta property="og:title" content="Million Dollar Arm Official Website presented by Disney Movies"> <meta property="og:url" content="http://movies.disney.com/million-dollar- arm"> <meta property="og:image" content="http://movies.disney.com/million- dollar-arm/million-dollar-arm-movie-shared.jpg" /> <meta property="og:type" content="video.movie" /> Source: http://movies.disney.com/million-dollar-arm
  • Open Graph Example Source: https://developers.facebook.com/tools/debug/
  • Open Graph Example
  • Schema.org • Microformat vocabulary to describe your data • Extends HTML 5 • Expandable vocabulary • Promoted by Google, Microsoft and Yahoo
  • Schema.org Movie Example Source: http://movies.disney.com/maleficent/about/story
  • Schema.org Movie Example Source: http://movies.disney.com/frozen/story <div itemscope itemtype="http://schema.org/Movie"> <div itemprop="description”><p><span itemprop="name"><a itemprop="url" href="http://movies.disney.com/maleficent">Maleficent</a></span>' explores the untold story of Disney’s most iconic villain from the classic 'Sleeping Beauty' and the elements of her betrayal that ultimately turn her pure heart to stone. ….</p> <p>The film stars <span itemprop="actor" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><a itemprop="url" href="http://movies.disney.com/maleficent/about/cast/angelina-jolie">Angelina Jolie</a></span> as <a itemprop="url" href="http://movies.disney.com/maleficent/characters/maleficent">Maleficent</a> </span>, <span itemprop="actor" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Elle Fanning</span> as <a itemprop="url" href="http://movies.disney.com/maleficent/characters/princess-aurora">Princess Aurora</a></span>,[...] </div>
  • Schema.org Movie Example Source: http://www.google.com/webmasters/tools/richsnippets
  • Schema.org Site Navigation Element Example
  • Schema.org Site Navigation Element Example <div class="nav”> <ul itemscope="itemscope" itemtype=http://www.schema.org/SiteNavigationElement> <li itemprop="name" ><a itemprop="url” href="/our-story">About</a></li> <li itemprop="name" ><a itemprop="url” href="/film-and-tv">Film & TV</a></li> <li itemprop="name" ><a itemprop="url” href="/what-we-do">What We Do</a></li> </ul> </div> Source: http://lucasfilm.com
  • Schema.org Site Navigation Element Example
  • Schema.org Event Markup Example Source: http://music.disney.com/radio-disney-music-awards
  • Schema.org Event Markup Example <div itemscope itemtype="http://schema.org/MusicEvent"> <a itemprop="url" href="http://music.disney.com/radio-disney-music-awards"> <h1 itemprop="name">Radio Disney Music Awards 2014</h1></a> […] <div itemprop="startDate" content="2014-04-26T16:00">Starts: 04/26/2014 4:00PM</div> <div itemprop="location" itemscope itemtype="http://schema.org/PostalAddress"> <div itemprop="name">Nokia Theatre L.A. LIVE</div> <div itemprop="streetAddress">777 Chick Hearn Ct.</div> <div itemprop="addressLocality">Los Angeles</div> <div itemprop="addressRegion">CA</div></div> <div itemprop="postalCode">90015</div> <div itemprop="addressCountry">USA</div> </div></div> Source: http://music.disney.com/radio-disney-music-awards
  • Schema.org Event Markup Example
  • Schema.org - Other Applications • Video • Executive and staff bios • Official logos • Local search: name, address, phone number • Products • Ratings
  • Twitter Cards • Gives you control of how your content is displayed with Tweets • Links together official website to Twitter account • Need to apply to Twitter for your cards to be approved • Easy to implement
  • Twitter Cards Example
  • Twitter Cards Example Source: http://blogs.disney.com/oh-my-disney/2014/05/20/these-new-images-from-big-hero-6-are-awesome/ <meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@Disney"/> <meta name='twitter:image' content='http://a.dilcdn.com/bl/wp- content/uploads/sites/2/2014/05/big-hero-6-hiro-300x125.jpg'/> <meta name="twitter:description" content="Walt Disney Animation Studios’ 54th feature film, Big Hero 6, opens in theaters this November and we finally have the first images from the film!"/>
  • Twitter Cards Example Source: https://dev.twitter.com/docs/cards/validation/validator
  • Twitter Cards Example Source: https://twitter.com/OhMyDisney/status/469150130135117824
  • Twitter Cards Example Source: https://twitter.com/jeffreypreston/status/469897896859426816
  • Knowledge Graph
  • Be Consistent Across Knowledge Graph Sources • Schema.org markup • Wikipedia.org • Freebase.com • Other databases that Google might use to pull entity data
  • Knowledge Graph & Freebase.com Source: https://www.freebase.com/m/0vpw97h
  • Structured Data Validators Structured Data Linter http://linter.structured-data.org/ Open Graph Debugger https://developers.facebook.com/tools/debug Schema Validator http://validator.nu/ Twitter Card Preview https://dev.twitter.com/docs/cards/preview Google Structured Data Testing Tool http://www.google.com/webmasters/tools/richsnippets
  • Resources Open Graph protocol https://developers.facebook.com/docs/opengraph/ Schema.org http://schema.org/docs/schemas.html Twitter cards https://dev.twitter.com/docs/cards
  • Jeff Preston @JeffreyPreston https://twitter.com/jeffreypreston http://www.linkedin.com/in/jeffreypreston Thank You!