How to use microdata Person on your portfolio website and improve your SEO
Antonio Gioia, 2013
Introduction to microdata
Microdata specification, one of the new html5 features, allows content producers to describe a specific type of information. the structured data can be read and used by search engines to give more specific results, for example google will use this data to enrich the results of a query with a rich snippet, a fast introduction to microdata in this video and an example below:
A more detailed search result gives users a better idea of your content and improves your search engine optimization.
Microdata items and properties are defined in a public vocabulary, a structured data markup schema supported by major search engines. In the following example we will use the schema.org markup, we can refer the vocabulary to decide which property of the item Person we want to use. There are items for different purposes like Events, Products, Places, Movie etc. Remember that search engines will not use content that is not visible to users, as a matter of fact Google declares: “you should mark up the text that actually appears to your users when they visit your web pages”.
How to use microdata
Microdata markup are attributes in html tags, a container for an item is set by the attribute itemscope
. Let’s assume we have relevant personal information in the footer
, microdata Person item in html markup would be:
<footer itemscope itemtype="http://schema.org/Person"></footer>
In the footer we have our basic information in a paragraph and a personal picture:
<p>
Antonio Gioia <br>
Web developer <br>
Lecce, Italy
Website:
<a href="http://antoniogioia.com" title="Website">http://antoniogioia.com</a>
E-mail:
<a href="mailto:info@antoniogioia.com" title="E-mail">info@antoniogioia.com</a>
<img src="img/antonio-gioia.jpg" alt="Antonio Gioia">
</p>
In a small snippet of code we can collect few properties: name
, jobTitle
, PostalAddress
and its nested subproperties addressLocality
and addressCountry
, url
, email
and image
. In this example we will use the tag span to label the item properties, in case of link and images we can use the attribute in the html tag.
<footer itemscope itemtype="http://schema.org/Person">
<p>
<span itemprop="name">Antonio Gioia</span><br>
<span itemprop="jobTitle">Web developer</span><br>
<span itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Lecce</span>,
<span itemprop="addressCountry">Italy</span>
</span>
Website:
<a itemprop="url" href="http://antoniogioia.com" title="Website">http://antoniogioia.com</a>
e-mail:
<a itemprop="email" href="mailto:info@antoniogioia.com" title="E-mail">info@antoniogioia.com</a>
<img itemprop="image" src="http://antoniogioia.com/images/antonio-gioia.jpg" alt="Antonio Gioia">
</p>
</footer>
Test your structured data
You can test microdata markup with the google structured data testing tool.
You can test a url or a piece of html, if we paste the example code from above into code snippet form returns a result page with the extracted structured data:
And Person item in details:
Links to know more about microdata
- Html5 microdata specification
- Schema.org industry-supported microdata markup
- Microdata generator tool based on schema.org
- Google structured data testing tool
- Introduction to rich snippets video
Notes
Feel free to save or share this article. If you notice a mistake or want to contribute to a revision of the article contact me at info@antoniogioia.com.