Kami's Corner

Why Microformats are a good idea

You've probably heard of microformats before, if youre on the technical site of the indie web. If you haven't, long story short: Microformats are a way to attach metadata to the HTML of your personal website, using just HTML.

For example, this is how you would use microformats to add an author to a blogpost.

<a class="h-card" href="https://kamiscorner.xyz">Kami Voidsun</a>, 

<span class="h-card">
  <a class="p-name p-org u-url" href="https://kamiscorner.xyz">kamiscorner.xyz</a>
</span>

This is in contrast to something like JSON-LD (the currently most popular way to add metadata to html documents), where data is marked up using JSON, not HTML.

This is our example from earlier, marked up using json-ld.

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      "author": {
          "@type": "Person",
          "name": "Kami Voidsun",
          "url": "https://kamiscorner.xyz"
        }
    }
</script>

Here you can already see one immediate benefit of microformats: They have a lot less boilerplate.

Thats not the main reason microformats beats out json-ld, though. The main reason is the format. json-ld seperates metadata and user-viewable data. If you want your user to know who the author of a blogpost is, and you also want crawlers to know, youll have to duplicate that information. First, you add the author to the HTML of the regular page. Then, you add it again to your json-ld makup. This creates a weird disconnect where a bot could potentially have access to metadata that your users do not, and vice-versa.

Microformats solves this issue by turning your user-facing markup into the same markup that crawlers will consume to get metadata about your site. If the user sees something different, the crawler does as well. This also makes it laughably easy to add metadata to an existing site. With json-ld, you have to write some sort of intermediate layer that pulls in data from your database to generate the json that then gets output onto your blog. Thats more code for you to maintain, and, as previously mentioned, more stuff that can potentially break. With microformats, you dont need to write any additional code! If the information is already on the page, you just add one or two additional classes and boom - youre done! If its not... well, it still saves you the time from adding that json-ld translation layer, with the bonus of giving your users more information about the page as well.

And, the thing is, Microformats serve a use outside of "just" being metadata. Theyre CSS classes! You can target them with CSS! This means that you (and your users) have a consistent way to style information on your website thats about, for example, birthdays, countries or locations. These arent elements that HTML provides by default, and json-ld obviously wont let you use it to style stuff, because, well... Its json.

Microformats are also generally easier to parse. If youre in a situation where you need to parse them, you probably have access to a library that lets you use the DOM api. And, with that, you have access to all the incredibly powerful selectors that CSS provides. Do you have an h-feed and you want to get every second blogpost on there?

document.querySelectorAll(".h-feed > .h-entry:nth-child(2n)") 

Boom! Thats it! No need to write any for loops, you only need one line.

Microformats are also a lot more fault-tolerant. If you misplace a closing bracket on your json-ld, the metadata will immediately stop being parsed in its entirety. One syntax error anywhere in the final markup, and you basically no longer have json-ld support on your site. With microformats, thats not really a problem. HTML parsers tend to be a lot more fault-tolerant, and, most importantly, you dont need to select elements based on their parents. With json-ld, if the location of a parent element changes, your parsing breaks. With microformats, thanks to CSS selectors, you can directly select elements without having to worry about their parents.

Microformats is also a lot more intuitive for consumers. Its self-documenting, basically. If a user wants to get the author of a blogpost from your microformats markup they can just open their devtools, inspect element the name of your author, copy the classname and basically be good to go! If someone understands the content of your website, theyll also understand the metadata. With json-ld being an entirely different format that is in no way linked to the content of your site, and in a huge, oftentimes deeply nested json-block, figuring out how to get to any particular piece of data can be quite challenging if you dont yet know what youre doing. If you want to get the data about a piece of info you havent seen in json-ld markup before, that might take a bit of time. With Microformats, theres basically no overhead in that regard. Anyways, thats why I like microformats.