What Lessons Disney Interactive Learned by Using Open Graph Protocol & Schema.org Markup


Published on

Smx West 2014 Session #Smx #32A - Structured Data Super Session - What You Need To Be Doing Nowpresentation What Lessons Disney Interactive Learned By Using Open Graph Protocol & Schema.Org Markup By Jeff Preston @Jeffreypreston Of Disney Interactive

Published in: Marketing

What Lessons Disney Interactive Learned by Using Open Graph Protocol & Schema.org Markup

  1. 1. 1 @JeffreyPreston #SMX #32A Lessons Learned: Open Graph and Schema.org Jeff Preston Disney Interactive
  2. 2. 2 @JeffreyPreston #SMX #32A 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
  3. 3. 3 @JeffreyPreston #SMX #32A Schema.org and Open Graph Schema.org Open Graph Promoted by Google, Microsoft and Yahoo Promoted by Facebook (and used by Google Plus & Twitter) Inline markup Meta tags in head
  4. 4. 4 @JeffreyPreston #SMX #32A 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
  5. 5. 5 @JeffreyPreston #SMX #32A Open Graph Example
  6. 6. 6 @JeffreyPreston #SMX #32A Open Graph Example <meta property="og:type" content="video.movie"> <meta property="og:url" content=”http://muppets.disney.com/muppets- most-wanted" /> <meta property="og:image" content="http://cdn.dolimg.com/franchise/muppets-most- wanted/img/muppets-most-wanted.png" /> <meta property="og:title" content=“Muppets Most Wanted Official Website presented by Disney" /> <meta property="og:description" content=“Visit the Muppets Most Wanted official site to watch the trailer, meet the characters, browse photos, download media and play games." />Source: http://muppets.disney.com/muppets-most-wanted
  7. 7. 7 @JeffreyPreston #SMX #32A Open Graph Example Source: https://developers.facebook.com/tools/debug/
  8. 8. 8 @JeffreyPreston #SMX #32A Schema.org • Microformat vocabulary to describe your data • Extends HTML 5 • Expandable vocabulary • Promoted by Google, Microsoft and Yahoo
  9. 9. 9 @JeffreyPreston #SMX #32A Schema.org Movie Example
  10. 10. 10 @JeffreyPreston #SMX #32A Schema.org Movie Example Source: http://movies.disney.com/frozen/story <div itemscope itemtype="http://schema.org/Movie"> Walt Disney Animation Studios presents <span itemprop="name">Frozen</span>, a stunning big-screen comedy adventure. Fearless optimist Anna (voice of <span itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Kristen Bell</span></span>) sets off on an epic journey-teaming up with rugged mountain man Kristoff (voice of Jonathan Groff) and his loyal reindeer Sven-to find her sister Elsa (voice of <span itemprop="actor" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Idina Menzel</span></span>), whose icy powers have trapped the kingdom of Arendelle in eternal winter. [...] </div>
  11. 11. 11 @JeffreyPreston #SMX #32A Schema.org Movie Example Source: http://www.google.com/webmasters/tools/richsnippets
  12. 12. 12 @JeffreyPreston #SMX #32A Schema.org Video Example
  13. 13. 13 @JeffreyPreston #SMX #32A Schema.org Video Example Source: http://video.disney.com/watch/disneychannel-phineas-ferb-chains-on-me-4c263110a597e0de90fa6d32 <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject" > <div id="video_wrapper" class="inverted"> <div id="frame"> <meta itemprop="duration" content=“T00H01M20S" /> <meta itemprop="thumbnail" content="http://cdnvideo.dolimg.com/cdn_assets/218ce62ef3cf3d91c4f1f d1f483aba2ba5e0339f.jpg" /> <meta itemprop="title" content="Chains on Me"> <meta itemprop="description" content="Phineas and Ferb have their imaginations chained up!"> <div id="player" class="player"> </div> </div> </div> </div>
  14. 14. 14 @JeffreyPreston #SMX #32A Schema.org Video Example Source: http://www.google.com/webmasters/tools/richsnippets
  15. 15. 15 @JeffreyPreston #SMX #32A Schema.org Video Example
  16. 16. 16 @JeffreyPreston #SMX #32A Schema.org Video – Interesting Results Using unique Open Graph, Schema.org, and XML sitemap video descriptions, Google displayed: • 70% Schema.org • 20% Open Graph • 10% XML video sitemap
  17. 17. 17 @JeffreyPreston #SMX #32A Schema.org Site Navigation Element Example
  18. 18. 18 @JeffreyPreston #SMX #32A 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
  19. 19. 19 @JeffreyPreston #SMX #32A Schema.org Site Navigation Element Example
  20. 20. 20 @JeffreyPreston #SMX #32A Schema.org Event Markup Example
  21. 21. 21 @JeffreyPreston #SMX #32A 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
  22. 22. 22 @JeffreyPreston #SMX #32A Schema.org Event Markup Example
  23. 23. 23 @JeffreyPreston #SMX #32A Schema.org - Other Applications • Executive and staff bios • Official logos • Local name, address, phone number • Products • Ratings
  24. 24. 24 @JeffreyPreston #SMX #32A Twitter Cards • Gives you control of how your content is displayed with Tweets • Improves content attribution • Can be used for summaries and photos • Links together official website to Twitter account • Need to apply to Twitter for your cards to be approved
  25. 25. 25 @JeffreyPreston #SMX #32A Twitter Cards Example
  26. 26. 26 @JeffreyPreston #SMX #32A Twitter Cards Example Source: http://blogs.disney.com/oh-my-disney/2014/02/18/see-kristoff-and-anna-in-a-deleted-scene-from-frozen/ <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/02/Kristoff5-300x150.jpg"> <meta name="twitter:description" content="A deleted scene from one of our favorite movies? Yes, please."> <meta name="og:title" content="See Kristoff and Anna in a Deleted Scene from Frozen | Oh My Disney"> <meta name="twitter:url" content="http://blogs.disney.com/oh-my- disney/2014/02/18/see-kristoff-and-anna-in-a-deleted-scene-from-frozen/">
  27. 27. 27 @JeffreyPreston #SMX #32A Twitter Cards Example Source: https://dev.twitter.com/docs/cards/validation/validator
  28. 28. 28 @JeffreyPreston #SMX #32A Twitter Cards Example Source: https://twitter.com/Disney/status/303648378082951168
  29. 29. 29 @JeffreyPreston #SMX #32A Twitter Cards Example Source: https://twitter.com/OhMyDisney/status/435830326678794240
  30. 30. 30 @JeffreyPreston #SMX #32A 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
  31. 31. 31 @JeffreyPreston #SMX #32A 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
  32. 32. 32 @JeffreyPreston #SMX #32A Jeff Preston @JeffreyPreston https://twitter.com/jeffreypreston http://www.linkedin.com/in/jeffreypreston Thank You!