Microdata & Microformats: Essential SEO Markup for Web Developers
Enhance Search Visibility with Semantic HTML Markup
In this post and a follow-up to this one that focuses on JSON-LD, we’ll explore the world of structured data that we can ship with our web pages and leverage to improve the quality of our website in the eyes of our favorite search engines.
Don’t worry—it’s all straightforward. I only separated Microformats and Microdata from JSON-LD because one gets embedded into the website’s structure, while the latter decouples the data from the HTML elements.
Let’s get started!
You don’t need to add both. (Unless you want to for your practice). Using either is sufficient, so please select the one that suits your requirements.
What is Microdata?
Simply put, Microdata is the information we add to our website’s HTML that provides search engines with a description of what type of content to expect in the DOM element. Including this information in the structure of our website helps search engines understand the content of our webpage and process it in a useful way.
For example, let’s say we have a personal blog (just like this one). When it comes to the list of articles we have written, it can quickly locate this metadata about what kind of content it is, which element contains the title, which one is the relevant image, who the author is, and any other associated information that we provide using these attributes.
Okay, so what are these tags/attributes?
We can find all the available schemas (there are tons of them) at https://schema.org/docs/schemas.html . It has schemas for objects and data types that can provide the information we want the search engine to know about our content.
As a starter, let’s check out https://schema.org/CreativeWork . If we scroll down the long property list, we’ll find more specific Schemas for creative works—articles, Blog Posts, Comments and Discussions, Photography, and so much more!
Let’s say we added information about the author in a blog post. We can use the Person schema, which has a list of properties defined at https://schema.org/Person , which can be used to add information about the Person.
Pretty simple.
How do we use these tags?
Let’s use the Person schema we saw in the previous section as an example.
<div itemscope itemtype="https://schema.org/Person">
<p itemprop="name">John Doe</p>
<a itemprop="url" href="https://johndoe.com">Portfolio</a>
</div>We can add more properties with itemprop by referring to the Person schema, and it will become part of our website’s data.
What are Microformats?
It is another way of providing semantic information about our website, but it is slightly different. While Microdata uses specialized tags/attributes in the HTML to add context to our content, Microformats uses specialized classes to tell the parser what content it looks at.
Is it a card, or is it a list, or is it an entry in a list? That kind of information. So, for a text that contains the author’s name, we could add a p-name class, and the parser would interpret it correctly as a name that belongs to a person.
What are these classes, and how do we use them?
We can find the Microformats wiki at https://microformats.org/wiki/Main_Page . We take the classes that match the type of content our HTML presents, and that’s it. For example, the equivalent of the Microdata from our previous section would be:
<div class="h-card">
<p class="p-name">John Doe</p>
<a class="u-url" href="https://johndoe.com">Portfolio</a>
</div>That’s it! Because they are classes, we can also use them to apply base styles for our elements if we want to. h-card can have base styles that apply to any card, and u-url can have URL styles!
Avoid using a processor that anonymizes the classes in the final build so that all the hard work is utilized.
Why would we want to do this?
By adding information using these Microdata attributes and Microformat classes, we allow search engines to make sense of our content the way our users might—or at least closer to how we interpret that information. This way, search engines can use this data to provide rich search results to users, which would help our page display our content more clearly and highlight our website.
Adding structured data to our website using the schema means that our website successfully provides more meaningful information to the search engine, increasing the chance of the data being used to provide “rich search results” like the one that Google creates at the top when we search for something.
This ultimately leads to our website having a higher chance of getting a click.
We added the attributes and the classes - now what?
For Microdata, we could first validate (and view) what data is parsed by running a scan on https://validator.schema.org . This will also help us catch any errors if they are present.
For Microformats, there is a list of validators/parsers in the Microformats wiki: https://microformats.org/wiki/validators
If everything is good and we’re satisfied with the information the parser reads - Congratulations! Your website renders more quality data than before.
