IndieWeb 101

Posted August 14, 2024 • in web

What’s going on, Internet? I’ve been playing around with Webmentions again and wanted to touch on participating in the IndieWeb.

This post is part of the 32-Bit Cafe’s Code Jam #5: Back To School.

If you’re like me, you love the interaction of website to website communication and what to know how to enhance your experience in the small and independent web.

Wait, what’s the difference between the IndieWeb and the Independent Web?

Great question, here’s how I view it:

IndieWeb: A movement focused on specific protocols and practices (like POSSE) to create a decentralised, user-controlled web.

Independent Web: A broader collection of individuals who build and maintain their websites independently, without necessarily adopting the specific protocols of the Indie Web. Also known as the small web, smol web, web revival etc…

Both the IndieWeb and Independent Web promote the idea of owning your own content, on your own website, ultimately giving you control over your data, privacy and how you interact with others online.

Sounds good, how can I get started?

To get started on the IndieWeb without being overwhelmed, IndieWebify.me suggests the following:

Get your own domain name
Markup your content with microformats2
Add the ability to send Webmentions

If you’re already building your own website you most likely already have your own domain name or subdomain. If you’re currently building on a subdomain I’d highly encourage you to register your own domain name if you have the means.

Webmentions is it’s own huge thing, I’ll touch upon lightly on how you can start recieving webmentions before the complicated process of displaying webmentions on your website, and also how you can start sending webmentions by posting to your own website.

So this post is going to focus on marking up your own content with microformats2. The specific microformats I’m going to focus on are h-card and h-entry.

But why would I want an h-card and h-entry on my website?

Adding an h-card and h-entry to your website is a simple first step toward participating in the IndieWeb. It makes your content more accessible and discoverable by other IndieWeb users and tools. For example, if someone visits your site, they can easily pull your contact information from your h-card. If they want to share or reference your blog post, the h-entry markup makes it easier for them to do so. They enhance your site’s connectivity and ensures that you’re in control of your online identity.

So, What is an h-card?

An h-card is a way to represent information about yourself on your website in a format that both people and computers can understand. It’s like a digital business card embedded in your site. For example, it might include your name, photo, email, and a link to your external profiles. This information is marked up using HTML, making it easy for other websites and tools to recognise and use it.

And what about an h-entry?

An h-entry is a way to mark up individual blog posts or articles on your website. It tells search engines and other tools, “Hey, this is a blog post!” It includes information like the title of the post, the date it was published, and the content itself. Just like with the h-card, this markup makes it easier for others to interact with and understand your content.

Sounds awesome, how can I get started?

I’m glad you want to go ahead and get started. I have very basic implementations on my website. I use 11ty and Nunjucks to generate mine easily.

My h-card template looks like this:

<div hidden class="h-card">
  <a class="p-name u-url u-uid" rel="author" href="{{ meta.url }}">{{ meta.author.name }}</a>
  <img class="u-photo" src="{{ meta.author.avatar | url | absoluteUrl(meta.url) }}"
    alt="{{ meta.author.name }}" />
</div>

And generates this:

<div hidden class="h-card">
  <a class="p-name u-url u-uid" rel="author" href="https://flamedfury.com">fLaMEd</a>
  <img class="u-photo" src="https://flamedfury.com/favicon.png"
    alt="fLaMEd" />
</div>

I include my h-card on every page.

My h-entry template looks like this:

<div hidden class="h-entry">
  <a class="p-name u-url" href="{{ page.url | url | absoluteUrl(meta.url) }}">{{ title | safe }}</a>
  <a class="p-author h-card" rel="author" href="{{ meta.url }}">{{ meta.author.name }}</a>
  <img class="u-photo" src="{{ meta.author.avatar | url | absoluteUrl(meta.url) }}"
    alt="{{ meta.author.name }}" />
  <p class="e-content">{{ description | safe }}</p>
  <time class="dt-published" datetime="{{ definedDate | toIsoString }}">{{ definedDate | formatDate('YYYY-MM-DD
    HH:MM:SS') }}</time>
</div>

And generates this:

<div hidden class="h-entry">
  <a class="p-name u-url" href="https://flamedfury.com/posts/rebuilding-the-web/">Rebuilding The Web</a>
  <a class="p-author h-card" rel="author" href="https://flamedfury.com">fLaMEd</a>
  <img class="u-photo" src="https://flamedfury.com/favicon.png"
    alt="fLaMEd" />
  <p class="e-content">And how we are already fostering independent web communities</p>
  <time class="dt-published" datetime="2024-07-29T00:00:00.000Z">2024-07-29
    00:07:SS</time>
</div>

I use the hiddenattribute to hide both of these from displaying on the page but you’re free to include them as part of your overall site design. Check out Tracey Durnell and Chris’s profiles in their footers for a visable h-card.

I’m probably going to get called out by Chris about screwing up the <time> entry, whoops 😂

Generate your cards

Still keen? Great! Use these handy generaters to get you going, just enter your details into the input fields and the template will update.

h-card

<div hidden class="h-card">
  <a class="p-name u-url u-uid" rel="author" href="#">Your Name</a>
  <img class="u-photo" src="#" alt="Your Name" />
  <p class="p-note">Your bio will appear here.</p>
</div>

This one is quite easy as you only have to generate it once.

h-entry

<div hidden class="h-entry">
  <a class="p-name u-url" href="#">Your Title</a>
  <a class="p-author h-card" rel="author" href="#">Your Name</a>
  <img class="p-author u-photo" src="#" alt="Your Name" />
  <p class="e-content">Your description here.</p>
  <time class="dt-published" datetime="#">Published Date</time>
</div>

Without automation to generate these, this will become tedious. What this should give you is an idea of what is needed and you can figure out how to make it easier for yourself.

Validation

Once you’ve published your h-card and h-entries you can validate them over on IndieWebify.me.

Now what?

Now you enjoy your first steps into the IndieWeb. It may also be your last step into the IndieWeb, that’s perfectly fine.

And if you end up publishing posts responding to someone else’s posts and send that post across as a webmention, you will go from this

{
  "type": "entry",
  "author": {
    "type": "card",
    "name": "",
    "photo": "",
    "url": ""
  }

To this:

{
  "type": "entry",
  "author": {
    "type": "card",
    "name": "fLaMEd",
    "photo": "https://flamedfury.com/favicon.png",
    "url": "https://flamedfury.com"
  }

Which provides webmasters to identify each other and know who’s communicating with them and playing your part in Rebuilding The Web.

Without a doubt I’ve probably missed something important here. Don’t hesitate to reach out to let me know and I’ll update the post.

Hope your enjoyed, laters 🤙

Reply by email, XMPP, or send a webmention.

No mentions yet.