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

What is Microdata?

WP-Buddy
February 26, 2013
Programming
2
12k

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

See All by WP-Buddy
Divi Schema Child Theme Presentation
wpbuddy
0
8.6k

Other Decks in Programming

See All in Programming
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
990
cmp.Or に感動した
otakakot
3
210
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
240
Jakarta EE meets AI
ivargrimstad
0
240
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
CSC509 Lecture 13
javiergs
PRO
0
110
Functional Event Sourcing using Sekiban
tomohisa
0
100
Arm移行タイムアタック
qnighy
0
340
Flutterを言い訳にしない！アプリの使い心地改善テクニック5選🔥
kno3a87
1
200

Featured

See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
Navigating Team Friction
lara
183
14k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
What's in a price? How to price your products and services
michaelherold
243
12k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Invisible Side of Design
smashingmag
298
50k

Transcript

  1. Servus [ˈzɛrvʊs]

  2. Servus [ˈzɛrvʊs] (Want to know what this means? Look it

    up: wikipedia.org/wiki/Servus)

  3. This is my name. And I love working with WordPress

    at wp-buddy.com. Flo [floʊ]

  4. What is ? MICRODATA

  5. Microdata ... is a synonym for particular HTML statements. It

    can be embedded into HTML to provide additional information to the search engines.

  6. A web site typically consists of

  7. A header

  8. A header with a title My awesome blog

  9. A header with a title and a subtitle (maybe) My

    awesome blog This is the best website ever!

  10. A navigation My awesome blog This is the best website

    ever! That‘s me Contact me Whatever

  11. 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.

  12. A sidebar in the footer My awesome blog This is

    the best website ever! That‘s me Contact me Whatever

  13. And another sidebar My awesome blog This is the best

    website ever! That‘s me Contact me Whatever

  14. Anything else?

  15. And maybe a breadcrumb anywhere here My awesome blog This

    is the best website ever! That‘s me Contact me Whatever Homepage / Contact me

  16. That‘s pretty much it, right?

  17. Yepp!

  18. When humans look at it,

  19. it looks pretty good.

  20. (mostly)

  21. But ...

  22. When search engines look at it, it always looks like

    this ...
  23. None

  24. Nice ...

  25. but pretty much nonsense for you, right?

  26. Sometimes for search engines, too.

  27. This is why microdata was invented.

  28. <!DOCTYPE html> <html lang="en-US"> <head> <title>My awesome blog</title> </head> <body>

    ... Till now it looked like this:

  29. <!DOCTYPE html> <html lang="en-US" itemscope itemtype="http://schema.org/Blog"> <head> <title>My awesome blog</title>

    </head> <body> ... Now it looks like this:

  30. <!DOCTYPE html> <html lang="en-US" itemscope itemtype="http://schema.org/Blog"> <head> <title>My awesome blog</title>

    </head> <body> ... Now it looks like this: What‘s going on here?

  31. <!DOCTYPE html> <html lang="en-US" itemscope itemtype="http://schema.org/Blog"> <head> <title>My awesome blog</title>

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

  32. <!DOCTYPE html> <html lang="en-US" itemscope itemtype="http://schema.org/Blog"> <head> <title>My awesome blog</title>

    </head> <body> ... 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.

  33. <!DOCTYPE html> <html lang="en-US" itemscope itemtype="http://schema.org/Blog"> <head> <title>My awesome blog</title>

    </head> <body> ... 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!

  34. <!DOCTYPE html> <html lang="en-US" itemscope itemtype="http://schema.org/Blog"> <head> <title>My awesome blog</title>

    </head> <body> ... 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?

  35. <!DOCTYPE html> <html lang="en-US" itemscope itemtype="http://schema.org/WebPage"> <head> <title>My awesome blog</title>

    </head> <body> ... 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.

  36. But how can this help you?

  37. You can help the search engines to understand what is

    what!

  38. You can help the search engines to understand what is

    what! - Where are the sidebars?

  39. You can help the search engines to understand what is

    what! - Where are the sidebars? - What is the webpage title?

  40. 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?

  41. 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?

  42. 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?

  43. 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?

  44. 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?

  45. 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?

  46. - 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!

  47. But you can do even more cool stuff.

  48. It‘s called „Rich Snippets“

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

    results.

  50. And it was first used by

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

  52. Stars

  53. Stars Clickable Links on breadcrumbs

  54. Stars Clickable Links on breadcrumbs Event Information

  55. Stars Clickable Links on breadcrumbs Event Information Products

  56. Stars Clickable Links on breadcrumbs Event Information Products And it

    will be even more in the near future!

  57. Guess what!?

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

  59. automatically ...

  60. No coding skills needed.

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

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

  63. By the way, it‘s called Schema Corporate (because it uses

    schema.org syntax)

  64. Check this out ...

  65. It tells the search engines that:

  66. It tells the search engines that: This whole thing is

    a blog!

  67. It tells the search engines that: This is the header

    of the site.

  68. It tells the search engines that: My awesome blog This

    is the best website ever! this is the overall title.

  69. It tells the search engines that: My awesome blog This

    is the best website ever! this is the subtitle.

  70. It tells the search engines that: this is the main

    navigation That‘s me Contact me Whatever

  71. It tells the search engines that: this is a breadcrumb

    Homepage / Contact me

  72. It tells the search engines that: this, too! Homepage /

    Contact me / Where you can find me

  73. It tells the search engines that: the title of the

    main content area About me

  74. It tells the search engines that: even more sub-headlines in

    the content area About me H1 H2 H3 H4 H5 H6

  75. It tells the search engines that: aside information

  76. It tells the search engines that: aside information [Author] [Date

    published] [Categories] [Comments|

  77. It tells the search engines that: If you have a

    Google+ account, you can link it with your website [Author] [Date published] [Categories] [Comments|

  78. 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.

  79. 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?

  80. 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.

  81. 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.

  82. It tells the search engines that: footer-article aside information [word-count]

    [interaction-count] [content language]

  83. It tells the search engines that: the total number of

    likes + tweets [word-count] [interaction-count] [content language]

  84. It tells the search engines that: the footer of the

    site

  85. It tells the search engines that: the footer of the

    site + a sidebar as well

  86. It tells the search engines that: another sidebar

  87. It tells the search engines that: and sidebar items [widget

    title] [some cool widget content goes here]

  88. 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.

  89. 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.

  90. 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

  91. 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

  92. 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  

  93. 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  

  94. 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  

  95. 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  

  96. And a lot more!

  97. Is this the future of seo?

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

  99. Microdata will be the top trend 2013! Start now! Have

    learned something new? Please tweet this @wp_buddy

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