Browse code
New article: Make your web semantic
Cinan Rakosnik authored on 10/11/2013 at 16:11:49Showing 4 changed files
- source/_posts/2013-11-07-make-your-web-semantic-with-microdata.markdown
- source/images/no-microdata.png
- source/images/richsnippets.png
- source/images/with-microdata.png
| 1 | 1 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,63 @@ |
| 0 |
+--- |
|
| 1 |
+layout: post |
|
| 2 |
+title: "Make your website semantic with Microdata" |
|
| 3 |
+date: 2013-11-10 13:54 |
|
| 4 |
+comments: true |
|
| 5 |
+categories: [webdev] |
|
| 6 |
+cover: /images/cover/avatar.png |
|
| 7 |
+keywords: semantic web, web 3.0, semantics, semantic html, html5, microdata, microformat |
|
| 8 |
+description: Use Microdata and make your web semantic |
|
| 9 |
+--- |
|
| 10 |
+Semantic web is getting more and more important. It's not just another buzzword. Semantic web allows data to be |
|
| 11 |
+shared and reused across application, enterprise, and community boundaries [1]. One of benefits is that web pages |
|
| 12 |
+with a clear semantic structure are more understandable for search engines. |
|
| 13 |
+ |
|
| 14 |
+If a website should be semantic then its source code (HTML) has to be semantic. HTML5 semantic elements |
|
| 15 |
+aren't good enough because they are too general. So let's extend HTML5. We have a few choices here -- |
|
| 16 |
+[RDFa](http://en.wikipedia.org/wiki/RDFa) and some [microformats](http://en.wikipedia.org/wiki/Microformat). |
|
| 17 |
+ |
|
| 18 |
+One of microformats is [Microdata](http://en.wikipedia.org/wiki/Microdata_(HTML). Microdata is actually a set of HTML |
|
| 19 |
+attributes and elements used to describe meaning of web page content. |
|
| 20 |
+I'll illustrate how simply it can be used. |
|
| 21 |
+ |
|
| 22 |
+*Why I chose Microdata? I think it has simpler syntax than RDFa and because of schema.org (I'll explain later in the article).* |
|
| 23 |
+ |
|
| 24 |
+# Example of turning non-semantic HTML into semantic HTML |
|
| 25 |
+ |
|
| 26 |
+{% imgcap /images/no-microdata.png Example of a curriculum vitae header %}
|
|
| 27 |
+ |
|
| 28 |
+{% imgcap /images/with-microdata.png With Microdata attributes %}
|
|
| 29 |
+ |
|
| 30 |
+<!-- more --> |
|
| 31 |
+ |
|
| 32 |
+I added to `<header>` element two attributes. `itemscope` tells that children of the `<header>` element describe some |
|
| 33 |
+`itemtype` data. In the example I'm describing some person's data (because of `http://schema.org/Person` in `itemtype`). |
|
| 34 |
+`h1` element has `itemprop` attribute with a value `name` which means it represents a person's name. |
|
| 35 |
+Other elements represents URL, email and telephone of the person. |
|
| 36 |
+ |
|
| 37 |
+# Tools |
|
| 38 |
+ |
|
| 39 |
+[Schema.org](http://schema.org/) is an initiative of Google, Bing and other large search engines. |
|
| 40 |
+It provides a large vocabulary of types and properties. You can find there types for |
|
| 41 |
+events, places, products, organizations, etc. Also, you can find there an introduction to using Microdata. |
|
| 42 |
+ |
|
| 43 |
+Before publishing website with Microdata you'll probably want to see how Google understand semantics of your page. |
|
| 44 |
+Try [Structured Data Testing Tool](https://www.google.com/webmasters/tools/richsnippets). It also contains |
|
| 45 |
+examples how to use Microdata attributes correctly. |
|
| 46 |
+ |
|
| 47 |
+Another good site which gives you examples of Microdata usage is [getSchema.org](http://getschema.org/index.php/Main_Page). |
|
| 48 |
+ |
|
| 49 |
+# Real world result of using Microdata |
|
| 50 |
+A very obvious benefit of using Microdata describes a screenshot below. |
|
| 51 |
+ |
|
| 52 |
+{% img /images/richsnippets.png %}
|
|
| 53 |
+ |
|
| 54 |
+You wouldn't see ratings, reviews count (and the Zack's picture :) ) without Microdata (check out IMDB's HTML |
|
| 55 |
+-- you'll see plenty of `itemscope` and `itemtype` occurrences). |
|
| 56 |
+ |
|
| 57 |
+*This article was also published on my school [blog](http://cinan.blog.matfyz.sk/p100814-make-your-website-semantic-with-microdata)*. |
|
| 58 |
+ |
|
| 59 |
+Sources and further reading: |
|
| 60 |
+ |
|
| 61 |
+1. [http://www.w3.org/2001/sw/](http://www.w3.org/2001/sw/) |
|
| 62 |
+2. [Extending HTML5 — Microdata](http://html5doctor.com/microdata/) |
|
| 0 | 63 |
\ No newline at end of file |
