How To Implement Semantic HTML & Structured Data by Jon Henshaw

1,619 views

Published on

From SMX East 2013 / SearchMarketingExpo.com - Why Structured Data & Semantic SEO Are Important - How To Implement Semantic HTML & Structured Data #SMX #21C by @RavenJon

Slide deck from Jon Henshaw of Raven Tools - presentation covers how to tips to implement schema.org markup in your website content

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,619
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
55
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

How To Implement Semantic HTML & Structured Data by Jon Henshaw

  1. 1. HOW TO IMPLEMENT SEMANTIC <HTML> & STRUCTURED DATA # Jon Henshaw Raven Tools @RavenJon #SMX #21C October 2, 2013 #
  2. 2. Semantic HTML is about communicating the context of the page RavenJon
  3. 3. <html lang="en-US"> RavenJon
  4. 4. <meta name="geo.region" content="US-TN" /> <meta name="geo.placename" content="Nashville" /> <meta name="geo.position" content="37.09024;-95.712891" /> <meta name="ICBM" content="37.09024, -95.712891" /> RavenJon
  5. 5. Geo-Tag Generator http://clck.io/geotag RavenJon
  6. 6. <meta property="og:locale" content="en_US"/> <meta property="og:type" content="article"/> <meta property="og:title" content="7 Critical Questions for SEO"/> <meta property="og:description" content="To squeeze..."/> <meta property="og:url" content="http://raventools.com/article/"/> <meta property="og:site_name" content="Raven Internet Marketing Tools"/> <meta property="og:image" content="http://raventools.com/keywords.png"/> RavenJon
  7. 7. http://clck.io/opengraph RavenJon Open Graph Generator
  8. 8. Help bots by using semantic elements RavenJon
  9. 9. Header Footer Nav Main Section Article Aside RavenJon
  10. 10. RavenJon header nav footer article aside
  11. 11. Section = Generic Article = Syndication RavenJon
  12. 12. <body> <header> <h1>Title of Site</h1> <nav> <ul> <li><a href="">Nav Item 1</a></li> <li><a href="">Nav Item 2</a></li> <li><a href="">Nav Item 3</a></li> </ul> </nav> </header> <main> <article> <h2>Article Title</h2> <p>Greatest content ever!</p> </article> <aside>(list of related articles)</aside> </main> <footer> <p>Copyright Whatevs</p> </footer> </body> RavenJon
  13. 13. H1-h6 hgroup RavenJon
  14. 14. <header> <hgroup> <h1>Main Title</h1> <h2>Subheading</h2> </hgroup> </header> RavenJon
  15. 15. http://clck.io/validate RavenJon Validate your code
  16. 16. microformats vs. RDFa vs. schema.org RavenJon
  17. 17. FACT: Using schema.org is the same as making sweet, sweet love to Googlebot RavenJon
  18. 18. 1. itemscope 2. itemtype 3. itemprop Three main attributes RavenJon
  19. 19. There are top level types RavenJon
  20. 20. Specific types inherit properties RavenJon
  21. 21. http://schema.org/Movie <div itemscope itemtype="http://schema.org/Movie"> <h1><span itemprop="name"><strong>Matrix</strong></span></h1> <p itemprop="description">A computer hacker learns...</p> </div> RavenJon
  22. 22. types have properties that have types RavenJon
  23. 23. http://schema.org/Person <div itemscope itemtype="http://schema.org/Movie"> <h1><span itemprop="name"><strong>Matrix</strong></span></h1> <p itemprop="description">A computer hacker learns...</p> <p itemprop="director" itemscope itemtype="http://schema.org/Person"> Directed by: <span itemprop="name">Joe Director</span></p> <p>Starring:<span itemprop="actors" itemscope itemtype="http://schema.org/Per <span itemprop="name">Jane the Actress</span></span></p> </div> </div> RavenJon
  24. 24. Related Properties The review property is listed as a valid property on schema.org/Movie. How do you add it to the movie? RavenJon
  25. 25. http://schema.org/Review <div itemscope itemtype="http://schema.org/Movie"> <h1><span itemprop="name"><strong>Matrix</strong></span></h1> <p itemprop="description">A computer hacker learns...</p> <p itemprop="director" itemscope itemtype="http://schema.org/Person"> Directed by: <span itemprop="name">Joe Director</span></p> <p>Starring: <span itemprop="actors" itemscope itemtype="http://schem <span itemprop="name">Jane the Actress</span></span></p> <div itemprop="review" itemscope itemtype="http://schema.org/Review"> <p itemprop="reviewRating" itemscope itemtype="http://schema.org/Rati <meta itemprop="worstRating" content="0"><span itemprop="ratingValue" /<span itemprop="bestRating">5</span> stars</p> </div> </div> RavenJon
  26. 26. Supported Elements Microdata attributes can go into almost any block level element. The most typical are key semantic and block elements, like section, article, div, span and p RavenJon
  27. 27. schema-creator.org RavenJon
  28. 28. Learn from others RavenJon
  29. 29. Test your code! http://clck.io/testschema RavenJon
  30. 30. Bam! Find me online @RavenJon http://clck.io/gplus http://raventools.com RavenJon
  31. 31. http://www.slideshare.net/SearchMarketingExpo # see more presentations at: #

×