The idea of Microformats is to tag content pieces in a semantic way to allow for search engines and browsers to easily read as data. For example, a product, or an event. While browsers recognize certain snippets, like an address or email, microformats allow for grouping multiple snippets that make up certain categories of items.

While sites actually using them to pull in content is currently limited, it doesn’t hurt to have something in place for the ones that do. They’re pretty painless to implement as they work as simple properties around HTML elements. And there are actually a few microformats that do have pretty wide implementation!

rel tags

rel-me is probably the most widely used of all microformats. Mastodon and other social media platforms use it to verify the links you add to your profile. We use it with Indie Aisle to verify users’ domain names.

<link rel="me" href="https://mastodon.social/@ovidem">
<link rel="me" href="https://github.com/ovidem">
<link rel="me" href="https://www.linkedin.com/in/ovidem/">
<link rel="me" href="https://x.com/ovidem">
<link rel="me" href="https://indieaisle.com/@distinctivequality">

Another big one, rel-nofollow is used on a tags as a way to tell search engines that a link on a page goes to an untrusted site. And some blog platforms use rel-author for author details and rel-tag for tagged articles.

h-card

h-card is for people and organizations, like your profile overview:

<div class="hcard">
  <img src="https://distinctivequality.com/images/ovi-photo.jpg" class="u-photo">
  <h3 class="p-name">Ovi Demetrian Jr</h3>
  <a href="https://distinctivequality.com" class="u-url">Follow</a>
</div>

h-entry and h-feed

h-entry is for “episodic or datestamped content”, like blog posts:

<article class="h-entry">
  <h1 class="p-name">The micro guide to microformats</h1>
  <p class="p-summary">Why you should use microformats and some examples of how they work.</p>
  <div class="e-content">
    ...
  </div>
  <time class="dt-published" datetime="2024-08-24">Originally published August 24th, 2024</time>
</article>

And related to it, h-feed is for listings of h-entry posts:

<div class="h-feed">
  <div class="h-entry">
    <h3><a href="/blog/microformats/" class="u-url p-name" rel="bookmark">The micro guide to microformats</a></h3>
    <p class="p-summary">Why you should use microformats and some examples of how they work.</p>
    <time class="dt-published" datetime="2024-08-24">8/24/2024</time>
  </div>
  ...
</div>

It's also worth using rel-bookmark for any link listings.

Additional examples worth mentioning are products, events, and misc items. If you want to learn about more, here's the full list of microformats currently available.