Microformats or Schema

Posted on by jordanhaines

At Langarth where I work we are going through our base files that we use for website and improving them, making them quicker and more accessible for your clients needs. One area that we have been looking at is adding more data to our HTML to allow search engines and browsers to understand our HTML better.

I was given the task of looking at what we could use, Now before I joined the company I have read and learnt about Microformats, but Matt the boss man at Langarth suggested an new way to mark up HTML called Schema, Now I have never herd of this so thought it would be a good idea to research the alternative to Microformats just in case it was the way to go.

To start with lets look at both of them separately, Firstly we will look at Microformats and Schema separately.

Microformats

Microformats are small patterns of HTML which are used to represent commonly published data on the Internet like, people, events, blog posts and reviews of such things like films or music.

This basically means in layman’s terms that we can mark up our HTML so people can exported it to say there address book or calender on there computer. Lets seen an example of how you would mark up my name.

lets take a basic paragraph of text in a HTML document,

{code type=html}

My name is Jordan Haines and I am a web designer.

{/code}

To mark up my name using Microformats all you have to do is add the fn (formatted Name) class:

{code type=html}

My name is Jordan Haines and I am a web designer.

{/code}

if you would like to add a link to my name and more information in the mark up for the link you can use the url class in the in the a tag. The example above would become:

{code type=html}

My name is Jordan Haines and I am a web designer

{/code}

To finish off the formatting you can wrap the link with the vcard class on the P tag. This would look like this:

{code type=html}

My name is Jordan Haines and I am a web designer

{/code}

The example above is a very basic example, but it hopefully will give you an idea of what Microformats are and how they can help. They do not really help with search engine but are great to add extra formatting to your HTML tags and allow user viewing your site to actually pull your details into there address book or calender easily.

All the top web designers are using them most vocal and passionate is Andy Clarke, The only problem I have found is in the real world spending that extra time marking up html when normal web users will not even notice or even care that there is extra formatting in you HTML.

So after having a look at Microformats, lets have a look a Schema.

Schema

Schema is a collection of HTML tags that are used to mark up web pages in ways which will be reconised by the major search engines to help people find the right web page they are searching for. Schema has the backing of Google, Yahoo and Bing which in a way makes it more favaourable over Microformats because if they are fully backing this standard of mark up in time your sites will start standing out in people searches.

Once again Schema is for marking up information about a person, event, blog post, or about a move or audio track.

Lets have a look a the Schema mark up and by using the example we used previously in the Microformats section which was:

{code type=html}

My name is Jordan Haines and I am a web designer

{/code}

To start using schema we must identify the section which is about me, we do this by wrapping the p tag in a div and add the itemscope element to it:

{code type=html}

My name is Jordan Haines and I am a web designer

{/code}

The next thing to do is add the element itemtype, this element tell us what the element we are marking up is about. In Schema we do this by adding a link Schema.org type hierarchy:

{code type=html}

My name is Jordan Haines and I am a web designer

{/code}

To mark up a link to my website which will be wrapped around my name you at the itemprop element and give it the url property:

{code type=html}

My name is Jordan Haines and I am a web designer

{/code}

The schema mark up seems straight forward to use and if it is going to help with search results then it can only be a good think.

Schema Vs Microformats

There is much debate about this on the web and there really is nothing to choice between the two really, The only difference is that Google, Yahoo and Microsoft are backing the Schema format officially. They will continue to support Microformats and RDFa but the support might be different for each one.

From what I can see is that most people on the web would like to see Microformats succeed because it is an open standards format and does not rely on companies. I am really not to fused about this as Google is the number one search engine and personally the one I use. I use lots of Google products as well am find there products well built and handy to use.

In the end time will tell which one goes forward, They will be the designers and developers that will refuse to use Schema because its back by companies and on really open source then there will be the designers and developers that will use it.

I personally and at Langarth we will be using Schemas and giving that a try to see if we notice any difference with our sites.

This entry was posted in Schema. Bookmark the permalink.

3 Responses to Microformats or Schema

  1. Vishal says:

    Hello,
    It was a very nice post on the difference between Microformats and Schemas. I really appreciate this. Well, I am a Computer Science Student so I want to make my online resume website. I was thinking to implement Microformats(hresume) for this but I remember I saw on some website where they implemented Schemas for the author. So I tried seaching on the web about this that which is better. I just wanted to ask you did you observed any difference using Schemas on Langarth instead of microformats, so that I can decide to choose between these two.
    Thanks
    Vishal Arora

    • When you searched for Langarth we found that the search result had more information about us. But no great advantage to keep putting it on our clients site at that time.

      Since then how ever google are really pushing it and support has got better and better. If i was you I would go with Schama and just be ahead of the curve as google will continue to add more support for it.

  2. I like this! thanks for share

Leave a Reply

Your email address will not be published. Required fields are marked *