The micro guide to microformats
Why you should use microformats and some examples of how they work.
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.
Thanks for reading! Consider sharing this post with others: copy this link, or send an email. And follow my updates to get my latest posts.