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
Go の GC の不得意な 部分を克服したい
taiyow
3
840
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
3
750
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
300
Monixと常駐プログラムの勘どころ / Scalaわいわい勉強会 #4
stoneream
0
290
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
170
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
2
130
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
650
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
970
GitHubで育つ コラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
120
103 Early Hints
sugi_0000
1
260
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
What's in a price? How to price your products and services
michaelherold
244
12k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
KATA
mclloyd
29
14k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
170
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Bash Introduction
62gerente
609
210k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
The Cost Of JavaScript in 2023
addyosmani
46
7k
Typedesign – Prime Four
hannesfritz
40
2.4k

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