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.5k

Other Decks in Programming

See All in Programming
雑に思考を整理する技術と効能
konifar
55
25k
元気予報
suu_mire0726
0
860
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
340
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
750
Git Lint
bkuhlmann
4
740
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
440
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
0
110
エンターテイメント業界で利用されるAWS
demuyan
0
200
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
1
130
Ruby Function Composition
bkuhlmann
1
330

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.5k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
16
6.4k
For a Future-Friendly Web
brad_frost
171
8.9k
Clear Off the Table
cherdarchuk
83
310k
Code Reviewing Like a Champion
maltzj
513
39k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
38k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
Done Done
chrislema
178
15k

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