Home

/

FAQ

/

What are microformats and why do they matter for Webmentions?

What are microformats and why do they matter for Webmentions?

Learn how microformats add semantic meaning to your content and enable rich Webmention interactions.

Microformats are simple HTML markup patterns that add semantic meaning to your content. They're what transform a basic Webmention from "someone linked to you" into "Sarah replied to your post with this thoughtful comment and here's her photo."

The Problem Microformats Solve

Without microformats, your HTML might look like this:

<div class="post">
  <img src="photo.jpg" alt="Sarah">
  <span class="name">Sarah Johnson</span>
  <p class="content">Great article! I especially liked the section on...</p>
</div>

A human can see this is Sarah's reply with her photo. A computer just sees generic divs and spans—it doesn't know what's a name, what's content, or what's a photo.

With microformats:

<article class="h-entry">
  <img class="u-photo" src="photo.jpg" alt="Sarah">
  <span class="p-name">Sarah Johnson</span>
  <div class="e-content">
    <p>Great article! I especially liked the section on...</p>
  </div>
</article>

Now computers can understand: "This is an entry (h-entry) by Sarah Johnson (p-name), here's her photo (u-photo), and this is her comment (e-content)."

Core Microformats for Webmentions

h-entry: The Building Block

h-entry represents a piece of content like a blog post, note, or comment:

<article class="h-entry">
  <h1 class="p-name">My Blog Post Title</h1>
  <time class="dt-published" datetime="2024-01-15">January 15, 2024</time>
  <div class="e-content">
    <p>This is the content of my post...</p>
  </div>
  <a class="u-url" href="https://example.com/post">Permalink</a>
</article>

Key properties:

  • p-name: Title or name of the entry
  • e-content: The main content (HTML preserved)
  • dt-published: Publication date
  • u-url: Canonical URL
  • p-summary: Short description

h-card: Author Information

h-card represents a person or organization:

<div class="h-card">
  <img class="u-photo" src="avatar.jpg" alt="Profile photo">
  <span class="p-name">Jane Developer</span>
  <a class="u-url" href="https://jane.example.com">Website</a>
  <span class="p-note">Web developer and IndieWeb enthusiast</span>
</div>

Key properties:

  • p-name: Person's name
  • u-photo: Profile photo
  • u-url: Personal website
  • p-note: Bio or description
  • u-email: Email address

Nested Author in Entry

Combine h-card and h-entry:

<article class="h-entry">
  <div class="p-author h-card">
    <img class="u-photo" src="avatar.jpg">
    <span class="p-name">Jane Developer</span>
    <a class="u-url" href="https://jane.example.com"></a>
  </div>
  <div class="e-content">
    <p>My thoughts on the topic...</p>
  </div>
</article>

Interaction Types

Microformats enable different types of Webmention interactions:

Reply

Use u-in-reply-to to indicate you're responding to someone:

<article class="h-entry">
  <div class="e-content">
    <p>I agree with your points about...</p>
  </div>
  <a class="u-in-reply-to" href="https://other-site.com/original-post">
    in reply to
  </a>
</article>

Like

Use u-like-of to indicate appreciation:

<article class="h-entry">
  <div class="e-content">
    <p>Liked this post</p>
  </div>
  <a class="u-like-of" href="https://other-site.com/post">
    ❤️
  </a>
</article>

Repost/Share

Use u-repost-of to share content:

<article class="h-entry">
  <div class="e-content">
    <p>Check out this excellent article!</p>
  </div>
  <a class="u-repost-of" href="https://other-site.com/article">
    original article
  </a>
</article>

Bookmark

Use u-bookmark-of to save content:

<article class="h-entry">
  <div class="e-content">
    <p>Bookmarked for later reading</p>
  </div>
  <a class="u-bookmark-of" href="https://other-site.com/article">
    🔖
  </a>
</article>

RSVP

Use p-rsvp for event responses:

<article class="h-entry">
  <data class="p-rsvp" value="yes">I'll be there!</data>
  <a class="u-in-reply-to" href="https://event.example.com">
    event link
  </a>
</article>

Values: yes, no, maybe, interested

Property Types

Microformats use prefixes to indicate data types:

  • p- : Plain text (p-name, p-summary)
  • u- : URL (u-url, u-photo)
  • dt- : Datetime (dt-published, dt-updated)
  • e- : Embedded HTML (e-content)

Complete Example

A fully-marked-up blog post reply:

<article class="h-entry">
  <!-- Author info -->
  <div class="p-author h-card">
    <img class="u-photo"
         src="https://alice.example.com/photo.jpg"
         alt="Alice">
    <a class="p-name u-url" href="https://alice.example.com">
      Alice Johnson
    </a>
  </div>

  <!-- Post metadata -->
  <h1 class="p-name">Re: Your thoughts on Webmentions</h1>
  <time class="dt-published" datetime="2024-01-15T14:30:00Z">
    January 15, 2024 at 2:30 PM
  </time>

  <!-- The content -->
  <div class="e-content">
    <p>I really appreciated your perspective on this. One thing I'd add...</p>
    <p>Have you considered how this applies to...</p>
  </div>

  <!-- Reply marker -->
  <a class="u-in-reply-to"
     href="https://bob.example.com/webmentions-post">
    in reply to Bob's post
  </a>

  <!-- Permalink -->
  <a class="u-url" href="https://alice.example.com/posts/123">
    Permalink
  </a>
</article>

How Receiving Sites Use Microformats

When your site receives a Webmention, you parse the source page's microformats:

const mf2 = require('microformats-parser');

async function parseWebmention(sourceUrl) {
  const response = await fetch(sourceUrl);
  const html = await response.text();

  // Parse microformats
  const parsed = mf2.get({ html, baseUrl: sourceUrl });

  // Find the h-entry
  const entry = parsed.items.find(item =>
    item.type.includes('h-entry')
  );

  // Extract data
  return {
    type: detectType(entry), // reply, like, repost, etc.
    author: {
      name: entry.properties.author[0].properties.name[0],
      photo: entry.properties.author[0].properties.photo[0],
      url: entry.properties.author[0].properties.url[0]
    },
    content: entry.properties.content[0].html,
    published: entry.properties.published[0],
    url: entry.properties.url[0]
  };
}

function detectType(entry) {
  const props = entry.properties;

  if (props['in-reply-to']) return 'reply';
  if (props['like-of']) return 'like';
  if (props['repost-of']) return 'repost';
  if (props['bookmark-of']) return 'bookmark';

  return 'mention';
}

Display Examples

With microformats, you can display rich mentions:

Reply Display

<div class="mention mention--reply">
  <img src="${mention.author.photo}" alt="${mention.author.name}">
  <div>
    <strong>${mention.author.name}</strong> replied:
    <blockquote>${mention.content}</blockquote>
    <time>${mention.published}</time>
  </div>
</div>

Like Display

<div class="mention mention--like">
  <img src="${mention.author.photo}" alt="${mention.author.name}">
  <strong>${mention.author.name}</strong> liked this
</div>

Repost Display

<div class="mention mention--repost">
  <img src="${mention.author.photo}" alt="${mention.author.name}">
  <strong>${mention.author.name}</strong> shared this
</div>

Testing Your Microformats

Microformats Parser

Test your markup at:

Paste your HTML or enter your URL to see what gets parsed.

IndieWebify.me

Step-by-step validation:

Guides you through adding proper microformats to your site.

Browser Extensions

  • Microformats Shiv (Chrome/Firefox): Highlights microformats on any page
  • IndieWeb Reply (Chrome): Helps you send replies with proper markup

Common Mistakes

1. Missing Root Class

<!-- ❌ Wrong: No h-entry class -->
<article>
  <h1 class="p-name">Title</h1>
</article>

<!-- ✅ Correct -->
<article class="h-entry">
  <h1 class="p-name">Title</h1>
</article>

2. Incorrect Nesting

<!-- ❌ Wrong: h-card outside h-entry -->
<div class="h-card">...</div>
<article class="h-entry">...</article>

<!-- ✅ Correct: h-card nested as p-author -->
<article class="h-entry">
  <div class="p-author h-card">...</div>
</article>

3. Wrong Property Type

<!-- ❌ Wrong: u- for plain text -->
<span class="u-name">John</span>

<!-- ✅ Correct: p- for plain text -->
<span class="p-name">John</span>

<!-- ❌ Wrong: p- for URL -->
<a class="p-url" href="...">Link</a>

<!-- ✅ Correct: u- for URL -->
<a class="u-url" href="...">Link</a>

Minimal vs. Rich Markup

Minimal (Still Valid)

<article class="h-entry">
  <div class="e-content">Your content here</div>
</article>

This works, but receiving sites won't get author info, timestamps, or interaction types.

Rich (Recommended)

<article class="h-entry">
  <div class="p-author h-card">
    <img class="u-photo" src="...">
    <span class="p-name">Your Name</span>
    <a class="u-url" href="...">Your Site</a>
  </div>
  <time class="dt-published" datetime="...">...</time>
  <div class="e-content">Your content</div>
  <a class="u-url" href="...">Permalink</a>
</article>

This enables receiving sites to display your mentions beautifully with your name, photo, and context.

Why Bother?

Without microformats:

With microformats:

  • "Sarah Johnson replied: 'Great article! I especially liked...' [shows her photo]"

The difference between a plain notification and a rich, contextual conversation.

Learn More

Related FAQs

What is a Webmention endpoint?

Understanding what a Webmention endpoint is, how it works, and how to set one up for your website.

How do I handle spam Webmentions?

Strategies and techniques for preventing, detecting, and moderating spam Webmentions on your website.

How do I implement Webmentions on my site?

Step-by-step guide to adding Webmention support to your website, from beginner to advanced.

By

Commune Software