Your SlideShare is downloading. ×
What Lessons Disney Interactive Learned by Using Open Graph Protocol & Markup
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

What Lessons Disney Interactive Learned by Using Open Graph Protocol & 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 …

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

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. 1 @JeffreyPreston #SMX #32A Lessons Learned: Open Graph and Jeff Preston Disney Interactive
  • 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 @JeffreyPreston #SMX #32A and Open Graph 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 @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 @JeffreyPreston #SMX #32A Open Graph Example
  • 6. 6 @JeffreyPreston #SMX #32A Open Graph Example <meta property="og:type" content=""> <meta property="og:url" content=” most-wanted" /> <meta property="og:image" content=" 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:
  • 7. 7 @JeffreyPreston #SMX #32A Open Graph Example Source:
  • 8. 8 @JeffreyPreston #SMX #32A • Microformat vocabulary to describe your data • Extends HTML 5 • Expandable vocabulary • Promoted by Google, Microsoft and Yahoo
  • 9. 9 @JeffreyPreston #SMX #32A Movie Example
  • 10. 10 @JeffreyPreston #SMX #32A Movie Example Source: <div itemscope itemtype=""> 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=""> <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=""> <span itemprop="name">Idina Menzel</span></span>), whose icy powers have trapped the kingdom of Arendelle in eternal winter. [...] </div>
  • 11. 11 @JeffreyPreston #SMX #32A Movie Example Source:
  • 12. 12 @JeffreyPreston #SMX #32A Video Example
  • 13. 13 @JeffreyPreston #SMX #32A Video Example Source: <div itemprop="video" itemscope itemtype="" > <div id="video_wrapper" class="inverted"> <div id="frame"> <meta itemprop="duration" content=“T00H01M20S" /> <meta itemprop="thumbnail" content=" 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 @JeffreyPreston #SMX #32A Video Example Source:
  • 15. 15 @JeffreyPreston #SMX #32A Video Example
  • 16. 16 @JeffreyPreston #SMX #32A Video – Interesting Results Using unique Open Graph,, and XML sitemap video descriptions, Google displayed: • 70% • 20% Open Graph • 10% XML video sitemap
  • 17. 17 @JeffreyPreston #SMX #32A Site Navigation Element Example
  • 18. 18 @JeffreyPreston #SMX #32A Site Navigation Element Example <div class="nav”> <ul itemscope="itemscope" itemtype=> <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:
  • 19. 19 @JeffreyPreston #SMX #32A Site Navigation Element Example
  • 20. 20 @JeffreyPreston #SMX #32A Event Markup Example
  • 21. 21 @JeffreyPreston #SMX #32A Event Markup Example <div itemscope itemtype=""> <a itemprop="url" href=""> <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=""> <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:
  • 22. 22 @JeffreyPreston #SMX #32A Event Markup Example
  • 23. 23 @JeffreyPreston #SMX #32A - Other Applications • Executive and staff bios • Official logos • Local name, address, phone number • Products • Ratings
  • 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 @JeffreyPreston #SMX #32A Twitter Cards Example
  • 26. 26 @JeffreyPreston #SMX #32A Twitter Cards Example Source: <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@Disney"> <meta name="twitter:image" content=" 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=" disney/2014/02/18/see-kristoff-and-anna-in-a-deleted-scene-from-frozen/">
  • 27. 27 @JeffreyPreston #SMX #32A Twitter Cards Example Source:
  • 28. 28 @JeffreyPreston #SMX #32A Twitter Cards Example Source:
  • 29. 29 @JeffreyPreston #SMX #32A Twitter Cards Example Source:
  • 30. 30 @JeffreyPreston #SMX #32A Structured Data Validators Structured Data Linter Open Graph Debugger Schema Validator Twitter Card Preview Google Structured Data Testing Tool
  • 31. 31 @JeffreyPreston #SMX #32A Resources Open Graph protocol Twitter cards
  • 32. 32 @JeffreyPreston #SMX #32A Jeff Preston @JeffreyPreston Thank You!