happily ever after: open graph twitter cards and schema.org by jeff preston
DESCRIPTION
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.comTRANSCRIPT
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!