Adding the recommended microdata from Schema.org is a great way to quickly add some form of semantics to your markup.
The biggest hurdle to doing it is a mental one, it feels like it is going to be a massive task. Today I want to convince you that it isn’t and with a pragmatic approach you can quickly get your content into good shape for Google and anyone else who appreciates semantic markup. (If you are interested in SEO, you may enjoy what I think developers can take away from an SEO now report)
Adding schema does not need to be all or nothing
In an ideal world everything that can be appropriately marked up would be, but even having one element correctly marked up will give you some level of benefit.
The schema are very well documented
For the majority of people the website they are trying to mark up are going to be e-commerce sites or blogs. Both of these things are incredibly well catered for with examples and documentation.
Testing is really straight forward
The first thing I should say is that getting this stuff wrong from an empty starting point has no apparent negative effect on SEO – so if you are worried going from nothing to incorrect schema will damage you in any way, it won’t.
That said, we want to test the things we write. We can do this with Google’s Testing Tool
You copy/paste your generated markup in, or the URL of a live website and you will get a rundown of everything Google can make sense of and it will point out any errors.
The first steps are to take the most obvious content type displayed on your website. Is there something that appears on every page or most pages that has meaning? Something like an address, a company name or an entire blog post?
By way of an example let me mark up a hypothetical address to your business that appears in your footer.
A lot of address will look something like this;
We can really quickly improve upon this;
All we have done here is added the fact we are marking up a “LocalBusiness” which has a “PostalAddress”.
We have got rid of those horrible
<br /> tags and replaced them with spans which allow for individual styling.
Admittedly in this example I have had to add an extra div to wrap the address up in, I think it is worth it for the sake of explaining your code better.
There is also another way we can implement Schema without needing to change our HTML, you can add what is called JSON-LD, if you view the source of this article you will see this is how I have implemented it. This is basically a JSON structure that semantically defines your website, I think this is the best of both worlds and what I do on most projects.
Lightening Talk on Schema
I’m passionate enough about schema that I shared how great it is as a lightening talk at a company I worked for.
You can view the slides here;