Time to Schema up

At Made we are always on the lookout for technologies and practices that enable us to deliver better code. Practices that can speed up page loads, help us write better tests, or in this case, offer up SEO improvements.

With HTML5 now the norm in all the markup we deliver, we are able to add real semantic meaning to our pages with the new elements. Armed with this new markup we can create pages that enable search engines to better understand and categorise content.

However, there are instances when markup alone simply won’t fully publicise the content we display to search engines. This content could be contact information, event listings or even a recipe. For this we need to go one step further and add something to our page elements to expose the structured data within the page.

There are a few different specifications to choose from that expose this information and enable better discovery:

Microdata Vocabularies)
RDFa
Microformat
Open Graph

At Made we use WHATWG’s Schema.org microdata vocabulary.

Depending on your attitude toward specifications created and maintained by big companies, you might not be keen on using Microdata, as the main supporters are Google, Yahoo and Microsoft. However the commercial reality of using something backed by the big players in search ensures that the markup will be properly understood by some of the most popular search engines – Yahoo!, Bing and Google.

One of the main benefits of using Schema.org is the way it improves how your search result listing appears. Google, Yahoo! and Bing will show a rich snippet that is based on the structured data found in the structure of the page. You can test how the rich snippets will be displayed by using the Structured Data Testing Tool in Google Webmaster tools.

Take the example rich snippet of a recipe from the recent update we deployed for Jordans Cereals:

The rich snippet displays a thumbnail, rating and total cooking time which are all visible in the output from the test. This improved appearance is much more likely to engage a user’s interest and the data exposed will enable Google to deliver your content in more relevant search results.

Schema.org‘s usage also extends beyond websites, it can be used in emails (albeit only Gmail for now and once registered). Currently the only usage is to show order and shipping information, however when this proposal by Google is finalised its scope will increase. These new and existing features, like their equivalents within web pages, deliver a richer experience.

SEO can be an afterthought when writing HTML, but adding in your chosen RDFa, Microformat or Microdata attributes can deliver real improvements in organic discovery, from both better indexing to richer looking search results. All front end developers should be including one of the many ways to expose structured data. Adding structured data can also benefit screen readers and therefore improve your site’s accessibility.

At Made we have implemented Schema.org on our recent site launches (NIVEA MEN, Jordans Cereals and Forevermark Bridal), as well as the refresh of Surface View. Because these sites have seen great benefits from a relatively small amount of effort, we will continue to include Schema.org in all of our future launches.

About the Author

Seb Ashton

Former Lead Software Engineer at Made Tech. Pixel pushing, caffeine addicted, end to end web developer.

Avatar for Seb Ashton

We are hiring! Find out more about a career at Made Tech.

Download a copy of our new book

Legacy technology is one of the biggest threats to public sector organisations.
Whether you’ve started your journey already or don’t know where to begin, this 160-page book has been written to guide you to define and implement the right approach for your organisation.