By Carl Heaton on

What will have a look to today it’s something that might turn really extremely useful when talkin’ bout’ SEO (Search Engine Optimization)


What will have a look to today it’s something that might turn really extremely useful when talkin’ bout’ SEO (Search Engine Optimization).
We’ll give a brief look at Schema, the result of Google, Yahoo! and Bing partnership that aims to define a common language and build a vocabulary for the creation of what we generally call Rich Snippets in Google language or SearchMonkey in a Yahoo! way
As you know HTML tags tell to the browser the way it should show the information in the tag.
Let’s take for example blue. It might refer both to someone feeling unhappy, or might refer to the color itself. And that’s exactly what causes confusion while search engines perform searches to display relevant content.


So how Schema can help me?

What Schema does is providing the right words at the right time & place by sharing tools (in this case vocabularies) that webmasters can use to mark up their pages so that search engines like Google, Bing, Yahoo can to understand your website content beyond simple HTML and text analysis. markup has some highly specialized markups that will tell search engines that the content is actually talking about a “person,” “place,” “thing,” “movie,” “music” and so forth.

The potentials and the advantages here are huge:

  • benefits for searchers and publishers of quality content (“quality data” in this context) with the introduction of  since on a side 1)- they will be able to give even more detailed and complex material and on the other side 2)- the search engines will be able to give users much better answers to the most complex queries;
  • it will make it easier for search engines to identify what a site, or even a paragraph, is all about and search engines like Google will start showing “rich snippets” in their results (which are based on your markup);
  • the best results will lead to better clicks through rates and increased traffic;
  • since search engines like Google are creating search interfaces that rely on a particular type of content (like for example Google Recipe search), if the content the user will provide is marked-up properly, it will affect the searches made through Google;

But the vocabulary itself doesn’t do much without some support. And this comes from the microdata format which allows to embed machine readable data into HTML documents. Sound a bit ambiguous but it’s totally the opposite the way it sounds.


But…where Schema derived from?

To make a jump back in the past, the first language utilized was the one of “Microformats” which downside was the fact the dictionary was kinda limited. Then the RDF took over, RDF format which came from XHTML and in this last case the code needed a complex/hard synthax.

And that’s where the Microdata format makes its appearance, offering both the simplicity of the Microformats and the extensibility of XHTML format.

If a website it’s still using Microformats or RDF there will be no compatibility issue in terms of mark-up languages but the all the three search engines suggest to adopt the new ones. And to not mix up the languages.

Also important is that the myth bout’ microdata format languages not bein’ accepted from all engines due to the Rich Snippets it’s not true, actually it’s the opposite since with the launch of they’re more than accepted!.

Microdata was introduced with HTML5 and allows for the nesting of semantic information within existing HTML code. What this means is that you can embed some of the over 100 schemas provided in within the webpage code.  Semantic data and can become useful tools in the future by search engines for analyzing web content, but at the moment isn’t widely implemented as a standard by the webmaster community (as of 2011).


To make things easier…

here’s a short video that was realized the same day the Schema project was released and that briefly describes what i’ve tried to explain above:


How can i implement it on my website?


Firstly, let’s point out attention on one thing: if we plan to add Schema to our website and it’s fairly large in terms of content, the suggestion is to apply it only on the important stuff, to the content that stands out the most. If your website content can be split in the three different categories, let’s say mp3s content and searches, you would definitely implement it on the mp3s related one which is what will generate more searches results.

Let’s see for example an HTML structure for a website that wants to sell MP3s…



One thing you need to know about Schema is that it isn’t something like Meta Tags. It’s much different from that. Schema codes are inserted into div tags and h1 tags and span tags. The way the Schema code is integrated is such that the whole HTML code will not be affected.

Using the example above, right after the tag, you should put a  tag and inside a div you put something like that to define the exact type of content you’re  offering on your page, and this is done by using the ‘itemscope’ element:

To define artist and title of a song, you will use respectively the itemprop-name and itemprop-artist properties


As you can see, looks pretty clear and not complicated at all to spot the different sections that build up the code.

If lyrics are also part of  the website content, we can also “filter” them through Schema by using the element “description” and implement the tag “span” in this way:



and of course

So the final structure would end up lookin’ like that:

Let’s see another example, this time involves both video and audio… This is the original snippet: Let’s use for example a portion of an HTML code and let’s turn into a code that can be easily “crunched”.. This is the original code snippet:

Even this time, pretty simple as  structure. Now let’s see how it looks once applied the required changes

The mark-ups are different but as u can see the steps followed are basically the same, plus some addition (duration, thumbnail,etc).

Let’s say that we have done the opportune changes on our content and that we wanna test if everything follows the rules as described on the Music Recording section on

This can be done by putting the link to our page through this tool:

Let’s make a quick test by opening the link above and clicking on the “Recipes” link on the page.

One of the results you might get, in case of an error, is  “Insufficient data  to generate the preview”  but this isn’t an important result in the test, what matters is the part under the “extracted rich snippet data from the page” note. Google correctly identified the type of content (recipe), and also obtained the correct values for the different item field properties.

For details about and learning about Microdata, you can refer to the official website.

There are some interesting sections here that are worth a read, in particular:

Getting started with a brief overview on how to get things started

Full Type Hierarchy: this is the whole hierarchy. It’s already expanded so the entire structure its clearly visible

Data Model: if you wanna know more about what’s behind the project have a look at this link.  And this is the specific argument we used in our examples

Documentation: as the name says

And don’t forget to have a look at the E-Commerce course that Web Courses Bangkok offers.


About The Author


He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.

Do you have ideas you want to grow?

We run design courses and here in Bangkok that will
bring life to your ideas.


20+ courses taught by industry experts trainers. Learn how to create a website from scratch, a full branding guideline or how to master SEO.


Now you can learn online and all our courses with come with fantastic worksheets, video tutorials and you get as much support as you need.


We are a fully accredited school by the Ministry of Education and soon we will offer a full Education Visa allowing you stay in Thailand.