Categories
Code

Getting Microformats right

As I work on patterns for my site redesign, I generated two templates without consideration for microformats. The two templates I created were for a WordPress archive template and an article/page template.

Microformats add structured data to a web site. Using microformats allow machines reading a site to know find information such as the:

  • page title,
  • content,
  • author,
  • date of publication, and,
  • post categories and tags.

Working out the basic HTML before adding structured markup is the right thing to do. It ensures content is the focus of your basic HTML structure. If at all possible, this is the ideal structure for your web page.

Adding the structured markup

When it came time to add the structured data to my page, I added both microformats2 and microformats1.

Big Search (Google, Bing, etc) use version one of microformats when reading structured data for your site, so I consider it must have.

Webmentions use microformats2 to determine the type of mention sent, the title of the post sending it, and a bunch of other stuff. I accept webmentions, so this becomes a must have.

I’d added structured data to the page, posts, comments, comment authors, and taxonomy data and was happy with the way things were looking good. Aaron Parecki’s mf2 parser was showing decent results.

Google’s structured data testing tool on the other hand, was less than optimal. Google was crediting my posts to my first commenter.

As a single author blog, I hadn’t included any author information. The author is inferred, an inference that needs to be reflected in the structured data.

Credit where credit’s due

To get Google’s structured data reader to parse the author data correctly, I had to add an h-card as a child of the post’s h-entry.

Within the meta information, I added to following markup:

<span style="util-Display-None" aria-hidden="true">
  <span class="EntryMeta_Detail vcard h-card">
    <a href="#" class="fn url u-url p-name">Peter Wilson</a>
  </span>
</span>

I hide the content, both visually and from screen readers as the data serves no purpose for visitors to the site.

My initial attempt to mark up the logo with an h-card failed, as it sits outside the post, so Google parsed it a separate structured markup, unrelated to the post’s h-entry.

By Peter Wilson

Peter has worked on the web for twenty years on everything from table based layouts in the 90s to enterprise grade CMS development.

Peter’s a big fan of musical theatre and often encourages his industry colleagues to join him for a show or two in New York or in the West End.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.