Back to articles

Microdata & Microformats: Essential SEO Markup for Web Developers

Enhance Search Visibility with Semantic HTML Markup

November 19, 2023
HTML code with Microdata and Microformats semantic markup highlighted showing SEO structured data implementation
seo
frontend
web development
4 min read

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!

tip

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!

important

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.

You may also be interested in

Core Web Vitals metrics dashboard showing performance optimization results

Core Web Vitals: Real-World Optimization Strategies

January 20, 2025

Master Core Web Vitals optimization for improved SEO and user experience. Learn practical strategies to optimize Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift with real code examples.

Read article
JSON-LD structured data code example with search engine rich results preview showing SEO benefits

JSON-LD Structured Data: Complete SEO Implementation Guide

February 14, 2024

Master JSON-LD structured data implementation for better SEO. Complete guide to Schema.org markup, rich snippets, and search engine optimization with practical examples and best practices.

Read article
SEO link equity flow diagram showing link juice distribution between interconnected web pages

Link Juice & SEO: Complete Guide to Nofollow, Noreferrer & Link Equity

June 11, 2024

Complete guide to link juice optimization, nofollow attributes, and link equity strategies. Learn internal linking best practices, external link management, and SEO techniques to boost page authority and rankings.

Read article
Comprehensive SEO checklist with technical optimization elements for web developers

Ultimate SEO Checklist for Web Developers: 2023 Complete Guide

July 29, 2023

Complete SEO checklist for web developers covering technical optimizations, meta tags, structured data, and performance. Boost your website's search rankings with this actionable developer's guide to SEO.

Read article
Advanced PWA features showing offline support, push notifications, and background sync capabilities

Advanced PWA Features: Offline Support, Push Notifications & Background Sync

August 15, 2024

Master advanced Progressive Web App development with offline caching, push notifications, and background sync. Complete guide with code examples for building robust, app-like web experiences.

Read article
Diagram illustrating React application architecture concepts and directory structures.

Scalable React Application Architecture: Best Practices for Directory Structure

April 11, 2019

Learn how to structure your React applications with a scalable and maintainable architecture. Discover practical directory organization patterns based on real-world experience.

Read article