From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink
3 likes4,794 views
The document provides an overview of the Semantic Web, highlighting its evolution and the role of microdata and schema in enhancing online marketing through SEO and social media. It discusses the use of various structured data formats, including RDFa and OpenGraph, along with statistics from a crawl of the top 1 million Alexa URLs. Additionally, it outlines how to implement rich snippets and the importance of structured data in improving search result visibility.
From Microdata & Schema to rich snippets - SMX Munich - #SMX by @jbobbink
- 1. From Microdata & Schema To Rich Snippets SMX Munich – Jan-Willem Bobbink @jbobbink - http://www.notprovided.eu
- 2. WHO AM I?
- 3. VISIT US AT STAND NUMBER 16 MAJESTIC SEO AMBASSADOR
- 4. WHAT’S THE SEMANTIC WEB? IS IT CODE?
- 6. W3C SEMANTIC WEB ACTIVITY “The Semantic Web is a collaborative movement led by international standards body the World Wide Web Consortium (W3C). The standard promotes common data formats on the World Wide Web” GOAL: EVOLUTION OF THE WEB
- 7. THE SEMANTIC WEB Tim Berners-Lee: “The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries” GOAL: CONVERTING THE WEB
- 9. STARTING POINT: 1. Make data available 2. Use specific markup languages 3. Data is available for everyone ONLINE MARKETING POSSIBILITIES?
- 10. GOAL 1: SEO
- 11. GOAL 2: SOCIAL MEDIA
- 12. HOW MANY WEBSITES ARE USING MARKUP? Use Amazon EC2, setup a crawler and crawl the top 1.000.000 Alexa URLs Checked for occurrences of: –Microdata / Schema –OpenGraph –Twitter Cards CRAWLED AT 18-03-2014
- 13. RESULTS - Crawled with 360/URLS/sec - 68.4GB of data used - 68% (683267 URLs) returned 200 OK - 27% 30X Redirects - 3% of domains had DNS issues CRAWLED AT 18-03-2014
- 14. 15,84% 14,55% 1,59% 1,32% 7,27% 2,69% 0,22% OpenGraph Title OpenGraph URL Twitter:title Twitter:url Schema itemprop Schema Itemprop Name AggregateRating USAGE STRUCTURED DATA BASED ON 683K OF TOP MILLION ALEXA URLS
- 15. USAGE MICRODATA Commercial tool: http://www.builtwith.com
- 16. USAGE OPEN GRAPH PROTOCOL Commercial tool: http://www.builtwith.com
- 18. MICROFORMATS – RDFa - MICRODATA
- 19. A BRIEF HISTORY
- 20. MICROFORMATS • March 2003: rel="friend" was used • 2004 during eTech, Tantek hosted a presentation titled “Real World Semantics” • May 2009: Google announced parsing hCard, hReview and hProduct attributes http://tantek.com/presentations/2004etech/realworldsemanticspres.html
- 21. RDFa • First proposed in 2004, since 2012 RDFa 1.1 is recommended and can be used within HTML4 & 5 “The essence of RDFa is to provide a set of attributes that can be used to carry metadata in an XML language (hence the 'a' in RDFa).”
- 22. 26-04-2010 - INTERNATIONALLY LAUNCHED
- 23. PREFERRED: MICRODATA “Microdata is a set of tags, introduced with HTML5, that allows you to do this.” SCHEMA.ORG: JUNE 2011
- 24. Which snippets can you use? NOT EVERY STRUCTURE IS USABLE YET
- 25. REVIEW SNIPPETS <div itemscope itemtype="http://data-vocabulary.org/Review-aggregate"> <span itemprop="itemreviewed">Several German beers</span> <img itemprop="photo" src="beer.jpg" /> <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating <span itemprop="average">9</span> <span itemprop="best">10</span> </span> <span itemprop="votes">24</span> <span itemprop="count">5</span> </div>
- 26. PERSONAL SNIPPETS <div itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Jan-Willem</span> <img src="janwillem.jpg" itemprop="image" /> <span itemprop="jobTitle">International SEO</span> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" <span itemprop="addressLocality">Amsterdam</span>, <span itemprop="addressRegion">- Europe</span> <span itemprop="postalCode">9999XX</span> </div> </div>
- 27. PRODUCTS SNIPPETS 1. Products 2. Product offer 3. Product aggregated offer
- 28. BREADCRUMB SNIPPETS Create multiple links to relevant pages within 1 entry in the SERPs.
- 30. SOME URLs TO HELP YOU: • Schema Creator by Raven http://schema-creator.org/ • Schema.org Generator http://www.microdatagenerator.com/ • Rich Snippets Testing Tool Bookmarklet • http://www.blindfiveyearold.com/rich-snippets-testing-tool-bookmarklet • Everything you need to know to generate rich snippets: http://seogadget.com/micro-data-schema-org-guide-to- generating-rich-snippets/
- 31. HOW TO IMPLEMENT? MAKE SURE: 1. You have specific data points available 2. SE’s accept specific markup language 3. SE’s accept certain snippets 4. Information within the SERPs is correct • Implement code and check with the SE’s: http://www.google.nl/webmasters/tools/richsnippets
- 32. DELAYS BECAUSE OF PROCESSING
- 33. PITFALLS • Make sure all items are structured and nested in the correct way. • Google Testing tool only shows errors based on missing elements, not on wrong coding! KEEP CALM AND ADD SNIPPETS!
- 34. WMT: WHAT DOES GOOGLE SEE?
- 35. ERRORS ON PAGE LEVEL
- 37. DOES IT HELP YOUR RANKINGS? “Google doesn’t use markup for ranking purposes at this time—but rich snippets can make your web pages appear more prominently in search results, so you may see an increase in traffic.” Source: https://support.google.com/webmasters/answer/1211158?hl=en
- 41. SHARE YOUR DATA?
- 42. STRUCTURED DATA FOR SOCIAL
- 43. “The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.” OPEN GRAPH PROTOCOL
- 44. FACEBOOK: OPEN GRAPH Start at: https://developers.facebook.com/docs/opengraph/
- 47. USE THE DEBUGGER TOOL! WRONG DETAILS? CACHING ISSUESWRONG DETAILS? CACHING ISSUES Use: https://developers.facebook.com/docs/opengraph/
- 50. https://dev.twitter.com/docs/cards/validation/validator WRONG DETAILS? CACHING ISSUESMAKE SURE YOU VALIDATE!
- 51. • Schema.org microdata • Open Graph protocol • Title + metadescription element • Best guess from page content MULTIPLE OPTIONS Use: https://developers.google.com/+/web/snippet/ WRONG DETAILS? CACHING ISSUESGOOGLE+
- 52. USE YOAST SEO PLUGIN USING WORDPRESS?
- 54. PICTURE CREDITS: Linked Open data: http://commons.wikimedia.org/wiki/File:LOD_Cloud_Diagram_as_of_September_2011.png Schema meme: http://www.fscinteractive.com/wp-content/uploads/2013/07/schema-rich-snippets-all-the- things-meme-560x345.jpg Social meme: http://socialmediasatisfied.com/wp- content/uploads/2013/06/529797_10150904238024534_3188681_n.jpg Possibility meme: http://makeameme.org/character/dr-evil-austin-powers Matrix coding: http://indervilla.com/matrix-wallpapers/matrix-code-hd/ Image processing: http://www.habiledata.com/blog/wp-content/uploads/2013/05/image-processing- services.jpg Spam: http://www.cj-weblog.nl/wp-content/uploads/2009/11/Spam.jpg Changes: http://erinamsili.blogspot.de/2011/12/ch-ch-ch-changes.html Obama meme: http://cdn.memegenerator.net/instances/250x250/38508282.jpg THANKS FOR THE PICTURES!