Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What is Microdata?

WP-Buddy
February 26, 2013

What is Microdata?

An easy-to-understand slideshow of what "Microdata" and "Rich Snippets" are. With a reference to my first and very new Schema Corporate WordPress Theme which you can find here: http://wp-buddy.com/products/themes/schema-corporate-theme/

If you like it, please, share it!

Thanks for watching!

WP-Buddy

February 26, 2013
Tweet

More Decks by WP-Buddy

Other Decks in Programming

Transcript

  1. Servus
    [ˈzɛrvʊs]

    View full-size slide

  2. Servus
    [ˈzɛrvʊs]
    (Want to know what this means? Look it up: wikipedia.org/wiki/Servus)

    View full-size slide

  3. This is my name.
    And I love working with WordPress at wp-buddy.com.
    Flo
    [floʊ]

    View full-size slide

  4. What is ?
    MICRODATA

    View full-size slide

  5. Microdata
    ... is a synonym for particular HTML statements. It
    can be embedded into HTML to provide
    additional information to the search engines.

    View full-size slide

  6. A web site typically
    consists of

    View full-size slide

  7. A header with a title
    My awesome blog

    View full-size slide

  8. A header with a title and a subtitle (maybe)
    My awesome blog
    This is the best website ever!

    View full-size slide

  9. A navigation
    My awesome blog
    This is the best website ever! That‘s me Contact me Whatever

    View full-size slide

  10. A content area
    My awesome blog
    This is the best website ever! That‘s me Contact me Whatever
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
    dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
    in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi.
    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    View full-size slide

  11. A sidebar in the footer
    My awesome blog
    This is the best website ever! That‘s me Contact me Whatever

    View full-size slide

  12. And another sidebar
    My awesome blog
    This is the best website ever! That‘s me Contact me Whatever

    View full-size slide

  13. Anything else?

    View full-size slide

  14. And maybe a breadcrumb anywhere here
    My awesome blog
    This is the best website ever! That‘s me Contact me Whatever
    Homepage / Contact me

    View full-size slide

  15. That‘s pretty much
    it, right?

    View full-size slide

  16. When humans look at it,

    View full-size slide

  17. it looks pretty good.

    View full-size slide

  18. When search engines
    look at it, it always
    looks like this ...

    View full-size slide

  19. but pretty much
    nonsense for you,
    right?

    View full-size slide

  20. Sometimes for search
    engines, too.

    View full-size slide

  21. This is why
    microdata was
    invented.

    View full-size slide




  22. My awesome blog


    ...
    Till now it looked like this:

    View full-size slide




  23. My awesome blog


    ...
    Now it looks like this:

    View full-size slide




  24. My awesome blog


    ...
    Now it looks like this:
    What‘s going on here?

    View full-size slide




  25. My awesome blog


    ...
    Now it looks like this:
    What‘s going on here?
    - You‘ve just used Microdata syntax.

    View full-size slide




  26. My awesome blog


    ...
    Now it looks like this:
    What‘s going on here?
    - You‘ve just used Microdata syntax.
    - You‘ve told the search engines that this is a blog.

    View full-size slide




  27. My awesome blog


    ...
    Now it looks like this:
    What‘s going on here?
    - You‘ve just used Microdata syntax.
    - You‘ve told the search engines that this is a blog.
    - And not a „normal“ website. Yes. This is a difference!

    View full-size slide




  28. My awesome blog


    ...
    Now it looks like this:
    What‘s going on here?
    - You‘ve just used Microdata syntax.
    - You‘ve told the search engines that this is a blog.
    - And not a „normal“ website. Yes. This is a difference!
    You don‘t have a blog?

    View full-size slide




  29. My awesome blog


    ...
    Now it looks like this:
    What‘s going on here?
    - You‘ve just used Microdata syntax.
    - You‘ve told the search engines that this is a blog.
    - And not a „normal“ website. Yes. This is a difference!
    You don‘t have a blog?
    Use this syntax instead.

    View full-size slide

  30. But how can this
    help you?

    View full-size slide

  31. You can help the search engines to
    understand what is what!

    View full-size slide

  32. You can help the search engines to
    understand what is what!
    - Where are the sidebars?

    View full-size slide

  33. You can help the search engines to
    understand what is what!
    - Where are the sidebars?
    - What is the webpage title?

    View full-size slide

  34. You can help the search engines to
    understand what is what!
    - Where are the sidebars?
    - What is the webpage title?
    - What is the content‘s title?

    View full-size slide

  35. You can help the search engines to
    understand what is what!
    - Where are the sidebars?
    - What is the webpage title?
    - What is the content‘s title?
    - Where is the footer?

    View full-size slide

  36. You can help the search engines to
    understand what is what!
    - Where are the sidebars?
    - What is the webpage title?
    - What is the content‘s title?
    - Where is the footer?
    - Who‘s the author?

    View full-size slide

  37. You can help the search engines to
    understand what is what!
    - Where are the sidebars?
    - What is the webpage title?
    - What is the content‘s title?
    - Where is the footer?
    - Who‘s the author?
    - When was this page published the first time?

    View full-size slide

  38. You can help the search engines to
    understand what is what!
    - Where are the sidebars?
    - What is the webpage title?
    - What is the content‘s title?
    - Where is the footer?
    - Who‘s the author?
    - When was this page published the first time?
    updated?

    View full-size slide

  39. You can help the search engines to
    understand what is what!
    - Where are the sidebars?
    - What is the webpage title?
    - What is the content‘s title?
    - Where is the footer?
    - Who‘s the author?
    - When was this page published the first time?
    updated?
    - And where the hell is the content?

    View full-size slide

  40. - Where are the sidebars?
    - What is the webpage title?
    - What is the content‘s title?
    - Where is the footer?
    - Who‘s the author?
    - When was this page published the first time?
    updated?
    - And where the hell is the content?
    You can help the search engines to
    understand what is what!
    This is what search
    engines really want to know!

    View full-size slide

  41. But you can do
    even more cool stuff.

    View full-size slide

  42. It‘s called
    „Rich Snippets“

    View full-size slide

  43. And this can influence your
    click-through rate
    on your search results.

    View full-size slide

  44. And it was first used by

    View full-size slide

  45. Search engines are
    now displaying this
    data to the public:

    View full-size slide

  46. Stars
    Clickable Links
    on breadcrumbs

    View full-size slide

  47. Stars
    Clickable Links
    on breadcrumbs
    Event Information

    View full-size slide

  48. Stars
    Clickable Links
    on breadcrumbs
    Event Information
    Products

    View full-size slide

  49. Stars
    Clickable Links
    on breadcrumbs
    Event Information
    Products
    And it will be even more in the near future!

    View full-size slide

  50. Guess what!?

    View full-size slide

  51. I‘ve built
    a theme
    which fully supports this stuff.

    View full-size slide

  52. automatically ...

    View full-size slide

  53. No coding skills
    needed.

    View full-size slide

  54. And it‘s for
    of course :-)

    View full-size slide

  55. By the way, it‘s called
    Schema Corporate

    View full-size slide

  56. By the way, it‘s called
    Schema Corporate
    (because it uses schema.org syntax)

    View full-size slide

  57. Check this out ...

    View full-size slide

  58. It tells the search engines that:

    View full-size slide

  59. It tells the search engines that:
    This whole thing is a blog!

    View full-size slide

  60. It tells the search engines that:
    This is the header of the site.

    View full-size slide

  61. It tells the search engines that:
    My awesome blog
    This is the best website ever!
    this is the overall title.

    View full-size slide

  62. It tells the search engines that:
    My awesome blog
    This is the best website ever!
    this is the subtitle.

    View full-size slide

  63. It tells the search engines that:
    this is the main navigation That‘s me Contact me Whatever

    View full-size slide

  64. It tells the search engines that:
    this is a breadcrumb
    Homepage / Contact me

    View full-size slide

  65. It tells the search engines that:
    this, too!
    Homepage / Contact me / Where you can find me

    View full-size slide

  66. It tells the search engines that:
    the title of the main content area
    About me

    View full-size slide

  67. It tells the search engines that:
    even more sub-headlines in the
    content area
    About me
    H1
    H2
    H3
    H4
    H5
    H6

    View full-size slide

  68. It tells the search engines that:
    aside information

    View full-size slide

  69. It tells the search engines that:
    aside information
    [Author] [Date published] [Categories] [Comments|

    View full-size slide

  70. It tells the search engines that:
    If you have a Google+ account, you can link it with your website
    [Author] [Date published] [Categories] [Comments|

    View full-size slide

  71. It tells the search engines that:
    If you have a Google+ account, you can link it with your website
    [Author] [Date published] [Categories] [Comments|
    Your picture will
    appear in Google‘s
    search results.

    View full-size slide

  72. It tells the search engines that:
    If you have a Google+ account, you can link it with your website
    [Author] [Date published] [Categories] [Comments|
    Your picture will
    appear in Google‘s
    search results.
    Cool, isn‘t it?

    View full-size slide

  73. It tells the search engines that:
    this is the main content (important)
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
    vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
    erat volutpat.

    View full-size slide

  74. It tells the search engines that:
    article image (if any)
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
    Lorem ipsum dolor sit amet.

    View full-size slide

  75. It tells the search engines that:
    footer-article aside information
    [word-count] [interaction-count] [content language]

    View full-size slide

  76. It tells the search engines that:
    the total number of likes + tweets
    [word-count] [interaction-count] [content language]

    View full-size slide

  77. It tells the search engines that:
    the footer of the site

    View full-size slide

  78. It tells the search engines that:
    the footer of the site + a sidebar as well

    View full-size slide

  79. It tells the search engines that:
    another sidebar

    View full-size slide

  80. It tells the search engines that:
    and sidebar items
    [widget title]
    [some cool
    widget content goes here]

    View full-size slide

  81. It tells the search engines that:
    number of comments
    2 Comments
    Jeff Maybe 2013-06-12 11:12
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    Mary Maybe 2013-06-13 12:11
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.

    View full-size slide

  82. It tells the search engines that:
    comment
    2 Comments
    Jeff Maybe 2013-06-12 11:12
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    Mary Maybe 2013-06-13 12:11
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.

    View full-size slide

  83. It tells the search engines that:
    comment
    2 Comments
    Jeff Maybe 2013-06-12 11:12
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    Mary Maybe 2013-06-13 12:11
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    + author name

    View full-size slide

  84. It tells the search engines that:
    comment
    2 Comments
    Jeff Maybe 2013-06-12 11:12
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    Mary Maybe 2013-06-13 12:11
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    + author name
    + author URL

    View full-size slide

  85. It tells the search engines that:
    comment
    2 Comments
    Jeff Maybe 2013-06-12 11:12
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    Mary Maybe 2013-06-13 12:11
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    + author name
    + author URL
    + author rating
    
    

    View full-size slide

  86. It tells the search engines that:
    comment
    2 Comments
    Jeff Maybe 2013-06-12 11:12
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    Mary Maybe 2013-06-13 12:11
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    + author name
    + author URL
    + author rating
    + date and time
    
    

    View full-size slide

  87. It tells the search engines that:
    comment
    2 Comments
    Jeff Maybe 2013-06-12 11:12
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    Mary Maybe 2013-06-13 12:11
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    + author name
    + author URL
    + author rating
    + date and time
    + content
    
    

    View full-size slide

  88. It tells the search engines that:
    comment
    2 Comments
    Jeff Maybe 2013-06-12 11:12
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    Mary Maybe 2013-06-13 12:11
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua.
    + author name
    + author URL
    + author rating
    + date and time
    + content
    + author picture
    
    

    View full-size slide

  89. And a lot more!

    View full-size slide

  90. Is this the
    future of seo?

    View full-size slide

  91. Microdata will be the top trend
    2013!
    Start now!

    View full-size slide

  92. Microdata will be the top trend
    2013!
    Start now!
    Have learned something new? Please tweet this @wp_buddy

    View full-size slide

  93. @wp_buddy
    Schema Corporate Theme
    for WordPress - Out now!
    wp-buddy.com

    View full-size slide