Thursday 9 May 2013

Microdata and Breadcrumbs

New Vocabulary

When we moved our website over to HTML 5 it allowed us to start using microdata to markup our information and try to aid search engines and screen readers make sense of the data on our site.

First we chose a vocabulary to use, the vocabulary defines the way we describe our data and what it all means, in the end we decided on using schema.org.



Marking up

Once we had decided what vocabulary to use we then added the itemscope webpage to our template body tag to allow us to define anything inside the <body></body> tags as a property of WebPage. The schema for WebPage is a child of CreativeWork which is in turn a child of Thing.

Then we added some microdata to our town page which is a listing of care and nursing homes in the selected town. We set the listings scope to LocalBusiness which describes "A particular physical business or branch of an organization"[1] and is ideal for our use. We could extend this but we will discuss this later.

Screen shot of the sites town listing page markup. A red box highlights the microdata
Town Listing Markup

LocalBusiness has certain properties which are used to describe attributes think of it like OOP (Object Orientated Programming) where you have objects and those objects have attributes such as a Person object that could have attributes eye colour, hair colour etc..

Our town page has information about each listing and the associated itemprop such as the homes name, address, telephone, fax, geographical coordinates (meta data), url and description.

By using the itemprop attribute we can help describe exactly what each bit of text means in our webpages.



Leaving a Trail

Next we added some breadcrumbs to the site templates main navigation sections which are inside HTML 5 <nav> tags. Breadcrumbs can be used to help define the hierarchy of your site and can also be used by search engines. The screen shot below show a Google SERP which is displaying some breadcrumbs for the search keywords "microdata breadcrumb"[2].
An image of a SERP page with breadcrumbs under the anchor text which is highlighted by a red elypsis
Breadcrumb Link Trail


Our site makes use of the title and url properties and we hope implementing breadcrumbs will aid any robots crawling our website and also allow our users to access the pages hierarchical links. Here is some further reading on breadcrumbs.

Breadcrumbs Inside Nav Tags


Extending Vocabulary

We are considering extending the vocabulary for LocalBuisness to make our data even more granular the parent child relationship between schemas could be used to create a CareHome schema which could extend the LocalBuisness schema.

Currently we feel it would be beyond our websites scope to start providing custom schemas although it has been added to our possible feature list and will be considered at a later date.

A screen shot of HTML markup with a red square highlighting the listings microdata
Listing Microdata



Conclusion

We hope this article has given you a better understanding of microdata and how The Care Homes Directory has integrated this technology into our website templates.

As always we will be reviewing our microdata and also cleaning up the current tags we have, as there is always room for improvement. We are also considering adding more item properties to our site.

Please check back soon because we will be writing some more articles and hope you find them useful. We will be producing a guide to using The Care Homes Directory Enhanced Listings on our site soon and an article on our development platform and development practises.

You can also contact me using my Google Plus account name, Chris Elsen.


Appendix

[1] http://schema.org/LocalBusiness
[2] SERP results (originally accessed on 2013-05-09)

No comments:

Post a Comment