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


Published on

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

Published in: Internet, Technology

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

  1. 1. Happily Ever After: Open Graph, Twitter Cards, and Schema.org Jeff Preston Disney Interactive
  2. 2. 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. 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
  4. 4. 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. Open Graph Example
  6. 6. 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
  7. 7. Open Graph Example Source: https://developers.facebook.com/tools/debug/
  8. 8. Open Graph Example
  9. 9. Schema.org • Microformat vocabulary to describe your data • Extends HTML 5 • Expandable vocabulary • Promoted by Google, Microsoft and Yahoo
  10. 10. Schema.org Movie Example Source: http://movies.disney.com/maleficent/about/story
  11. 11. 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>
  12. 12. Schema.org Movie Example Source: http://www.google.com/webmasters/tools/richsnippets
  13. 13. Schema.org Site Navigation Element Example
  14. 14. 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
  15. 15. Schema.org Site Navigation Element Example
  16. 16. Schema.org Event Markup Example Source: http://music.disney.com/radio-disney-music-awards
  17. 17. 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
  18. 18. Schema.org Event Markup Example
  19. 19. Schema.org - Other Applications • Video • Executive and staff bios • Official logos • Local search: name, address, phone number • Products • Ratings
  20. 20. 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
  21. 21. Twitter Cards Example
  22. 22. 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!"/>
  23. 23. Twitter Cards Example Source: https://dev.twitter.com/docs/cards/validation/validator
  24. 24. Twitter Cards Example Source: https://twitter.com/OhMyDisney/status/469150130135117824
  25. 25. Twitter Cards Example Source: https://twitter.com/jeffreypreston/status/469897896859426816
  26. 26. Knowledge Graph
  27. 27. Be Consistent Across Knowledge Graph Sources • Schema.org markup • Wikipedia.org • Freebase.com • Other databases that Google might use to pull entity data
  28. 28. Knowledge Graph & Freebase.com Source: https://www.freebase.com/m/0vpw97h
  29. 29. 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
  30. 30. 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
  31. 31. Jeff Preston @JeffreyPreston https://twitter.com/jeffreypreston http://www.linkedin.com/in/jeffreypreston Thank You!