Welcome back to Webmentions Weekly! This week we're diving deep into microformats and exploring how they make Webmentions truly powerful.

Understanding Microformats

Microformats are a way to add semantic meaning to your HTML. When combined with Webmentions, they enable rich data exchange between sites.

The Essential Microformats

Here are the key microformats for Webmentions:

H-Entry in Practice

An h-entry wraps your content and provides structured data:

<article class="h-entry">
  <h1 class="p-name">Article Title</h1>
  <div class="e-content">
    <p>Your content here...</p>
  </div>
  <a class="u-author h-card" href="/about">Author Name</a>
  <time class="dt-published" datetime="2025-01-17">Jan 17, 2025</time>
</article>

This markup allows Webmention receivers to extract:

• The article title (p-name)
• The full content (e-content)
• Author information (u-author)
• Publication date (dt-published)

Real-World Benefits

With proper microformats, receiving sites can display rich previews of mentions:

1. Show author avatar and name
2. Display a quote or excerpt
3. Include publication date
4. Indicate the type of interaction (reply, like, repost)

Parser Tools

Several tools help you work with microformats:

# Install the microformats parser
npm install microformats-parser

# Parse a URL
const mf2 = await fetch('https://example.com/post')
  .then(res => res.text())
  .then(html => microformats.get({ html }));

Advanced Patterns

Reply Context

When you reply to someone's post, include reply context:

<div class="h-entry">
  <div class="p-in-reply-to h-cite">
    <a class="u-url" href="https://their-site.com/post">
      Original post by <span class="p-author">Their Name</span>
    </a>
  </div>
  <div class="e-content">
    Your reply content...
  </div>
</div>

This creates a threaded conversation view.

Like and Repost Indicators

For likes and reposts, use specific classes:

<!-- Like -->
<div class="h-entry">
  <data class="p-like-of" value="https://their-site.com/post"></data>
</div>

<!-- Repost -->
<div class="h-entry">
  <data class="p-repost-of" value="https://their-site.com/post"></data>
</div>

Community Updates

This week in the IndieWeb community:

• Pin13.net updated their microformats documentation with new examples
• XRay parser improved handling of nested h-cards
• New microformats validator tools released

Testing Your Markup

Use these tools to validate your microformats:

1. Pin13.net - Visual parser
2. Browser extensions for live inspection
3. Command-line parsers for CI/CD

Pro Tip: Add microformats to your existing HTML incrementally. You don't need to rewrite everything at once!

Case Study: Threading

One reader implemented full conversation threading using:

• Reply contexts with h-cite
• Backfeed from social media via Bridgy
• Automatic Webmention sending on publish

The result? A complete conversation view that spans multiple domains while keeping all content on their own site.

Next Week

Join us next week as we explore Webmention security, spam prevention, and moderation workflows. We'll cover:

• Verification best practices
• Rate limiting strategies
• Vouch extension for trusted networks
• Common attack vectors and mitigations

Questions about microformats? Send us a Webmention or join the #indieweb chat!

Webmentions Weekly is published every Tuesday. Add our feed to stay updated.