In this tutorial you will learn how to integrate Microdata into your website. Microdata enables search engines, web crawlers, and browsers to extract and process information from your web page and use it to provide a richer browsing experience for users.
We will be referencing the W3C HTML Microdata Nightly website and the Google Structured Data Testing Tool.
We will also be using the John Doe - Resume free template html file, form an earlier post, offered for download here.
Compared to using using RDFa and Microformats, Microdata is an attempt to provide a simpler way of annotating HTML elements with tags. A supporting vocabulary is used to describe item and name-value pairs for assigning property values. Microdata allows nested groups of name-value pairs to be added to documents, in parallel with the existing content.
As you can see the body uses itemscope to create an item. The item is then given the Person type.
Now we can add attributes to individual parts of the content. For example itemprop="name".
We can embed one or more attributes inside of others. If you look at the code you will see that the name attribute contains givenName and familyName, the same goes for the address attribute.
For testing your code I recommend using the Google Structured Data Testing Tool. Here you can see the output for the John Doe - Resume file used in this tutorial.
In the above example name, address, e-mail, telephone and alimniof were useful attributes but you can use others as well. You can find detailed information about Microdata syntax on the W3C HTML Microdata Nightly website.
The most commonly used item type libraries used for data improvement:
We will be referencing the W3C HTML Microdata Nightly website and the Google Structured Data Testing Tool.
We will also be using the John Doe - Resume free template html file, form an earlier post, offered for download here.
What is Microdata?
Microdata Syntax
In the John Doe - Resume file you have downloaded from the link above you will see the following code:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body itemscope itemtype="http://data-vocabulary.org/Person">
<nav class="navbar">
...
</nav>
<div class="container">
<div class="row">
<div class="col-md-9">
<h1 class="name" itemprop="name"><span itemprop="givenName">John</span> <span itemprop="familyName">Doe</span></h1>
<h3 class="title" itemprop="title">Project Manager</h3>
<br />
<p class="header-row" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="region">Address Region</span>, <span itemprop="locality">City</span>, <span itemprop="country">Country</span>
</p>
<p class="header-row">
<span itemprop="email">john.doe@mail.com</span>
</p>
<p class="header-row">
<span itemprop="telephone">(+01) 123 456 789</span>
</p>
</div>
</div>
...
<div id="studies">
...
<dd itemprop="alumniOf">
Name of University
</dd>
...
</div>
...
</div>
</div>
<footer style="text-align:center; padding-top:40px">
...
</footer>
...
</body>
</html>
As you can see the body uses itemscope to create an item. The item is then given the Person type.
Now we can add attributes to individual parts of the content. For example itemprop="name".
We can embed one or more attributes inside of others. If you look at the code you will see that the name attribute contains givenName and familyName, the same goes for the address attribute.
Microdata Testing
For testing your code I recommend using the Google Structured Data Testing Tool. Here you can see the output for the John Doe - Resume file used in this tutorial.
In the above example name, address, e-mail, telephone and alimniof were useful attributes but you can use others as well. You can find detailed information about Microdata syntax on the W3C HTML Microdata Nightly website.
The most commonly used item type libraries used for data improvement:
- Reviews
- People
- Products
- Businesses and organizations
- Recipes
- Events
- Video
Comments
Post a Comment