A reply to Aaron Davis about h-cards

Aaron, thanks for your continued thoughts on my post. These are some good observations. Interestingly, on November 9th of this month I had noticed that the h-card page on the wiki was one of the few around that had absolutely no section heading for IndieWeb Examples which is nearly ubiquitious on most other pages. (Examples of what others have done is not only a helpful guide, but helps to push the limits of what might be possible next.) I naturally added a section for them and added myself and made a call in the chat for others to do the same. One of the bits of feedback that resulted there was that the microformats.org wiki had a large number of examples and that was one of the reasons that the IndieWeb wiki had none. Naturally, for people in generation two and beyond this may be an issue as they’re potentially less likely to go looking for this information on another website. As of this afternoon, there’s now at least a link on that page that also points to the microformats wiki page for those other examples. I’ve also added a few other bits which may be helpful with regard to h-cards for the beginner.

As the IndieWeb continues onward, part of the underlying foundation is that “Each generation is expected to lower barriers for adoption successively for the next generation.” – from the Generations page on the IndieWeb Wiki.

To date, the majority of people in the movement are developers or programmers by trade, but increasingly there are people from generation 2, 3, and even many from generation 4 who are starting to take a look at what is now possible on the web that wasn’t just ten, twenty, or even thirty-six months ago. Many are not only just looking, but, like you, are spending the time, effort, and energy to implement what they’re able to and simultaneously spreading the word to larger circles.

As someone who personally identifies as being on the border of generations 1 and 2, I’m finding more and more people seeing what is happening and wanting the fruits and benefits of these tools for themselves. It’s the raw value they find in these methods and processes that spur them on even when they find themselves in deeper waters than they may have expected. Fortunately there are a large number of giving and helpful developers in the generation 1 crowd who are watching and listening to those coming after them. They’re taking up the mantle to not only improve things for just themselves, but to improve things for their fellow netizens.

All of this to say that there is currently a slow reworking and refining of material that’s on the wiki. It was only just earlier this week that a self-identifying fourth generation member asked about the word POSSE, which many would rightly consider jargon, and inquired about its relation to the more commonly known term of “cross-posting“. Surprisingly, cross-posting didn’t really exist on the wiki yet, but it was quickly added, and then later expanded to bring the ideas of POSSE, PESOS, PESETAS, and PASTA within it and then tied into the broader idea of syndication.

Your questions about h-card are very similar. Yes, the wiki page on the idea is certainly very generation 1 specific and perhaps a bit over-burdened by jargon. While I don’t think the concept of microformats is very difficult, I also realize that saying that is the result of having spent no less than ten hours reading about it, looking at examples, and implementing pieces of it by hand myself. So how can we make it simpler and easier for the next generation? The page needs a bit of overhaul and work for the next generations. Some of this is my goal in writing an IndieWeb book, though it’s geared toward an audience that is less likely to get their information from a wiki or contribute back to one in practice.

While h-card is a specific type of microformat, in practice most instances of it on the wiki are really referring to an object on a webpage that conveys identity. I’d suggest that it’s far easier to look at an h-card as an online version of a business card that contains some basic information about a person (or even a business or other entitiy) online. It has things like their name, their address, their email, their phone number, perhaps a photo, or even other very basic information about them. Each of these pieces of data has its own microformats to indicate to machines what they specifically represent.  While some h-cards are human readable (like mine), some could be hidden in a web pages’ header and are meant to be machine readable.

While h-cards can convey data in other use cases, in most IndieWeb instances they’re conveying information about either the owner of a website (and thus found on the site’s homepage), or they’re found on individual posts as indicators of the authorship of the content on that page.

Depending on how they’re nested into a web page, they can have different meanings. As possibly the most common example on a traditional WordPress article post, the main h-card for the page would indicate information about the author of that post. However, these article posts will often contain comments sections at the bottom and each individual comment will have it’s own separate author and author information and thus its own h-card. Because these comments are properly nested, they only indicate the authorship of each particular sub-section of a page.

For most IndieWeb use, having an h-card on your homepage tells parsers (code run by other computers) who you are and some basic information about yourself. Generally this extends to your name, your avatar, and your homepage URL.

In your case Aaron, when you’ve generally been sending me webmentions from your primary website (readwriterespond.com), I’ve often been missing your avatar in your comments because you didn’t have an h-card available on them. (I typically remedy this on my own website by hand because I’ve been able to guess the email address/”key” you use for your Gravatar account which then automatically fills in that missing data for me on those comments.)

In the particular case here, for your reply you’ll notice in looking at the source for the page with your response that your ZenPress theme smartly and kindly includes an h-card for you automatically. Here’s what it looks like in code:

<div class="entry-meta">
<address class="byline"><span class="author p-author vcard hcard h-card" itemprop="author" itemscope itemtype="http://schema.org/Person"><img alt='' src='https://secure.gravatar.com/avatar/d00e7ca24ca1b9c853da43af229c0e0e?s=40&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d00e7ca24ca1b9c853da43af229c0e0e?s=80&d=mm&r=g 2x' class='avatar avatar-40 photo u-photo' height='40' width='40' itemprop="image"/> <a class="url uid u-url u-uid fn p-name" href="https://collect.readwriterespond.com/author/admin/" title="View all posts by Aaron Davis" rel="author" itemprop="url"><span itemprop="name">Aaron Davis</span></a></span></address> <span class="sep"> | </span> <a href="https://collect.readwriterespond.com/posts/replies/a-further-reply-to-chris-aldrich-in-regards-to-the-indieweb/" title="10:06 pm" rel="bookmark" class="url u-url"><time class="entry-date updated published dt-updated dt-published" datetime="2017-11-22T22:06:22+00:00" itemprop="dateModified datePublished">November 22, 2017</time></a>
</div>

You’ll see that it includes (and I’ve highlighted them in red with the relevant microformats classes) your name, your website URL, and it also pulls in your Gravatar avatar using the WordPress back end, since you’ve provided your WordPress installation this data. This is the benefit of a smartly built and designed theme! Thus it would seem that for your “Collect” site, you needn’t worry about an h-card because your theme is already handling the details for you to a great extent. Ideally all themes would do this using standard data fields within a WordPress install. But until then…

Anticipating your next question, what about readwriterespond.com? There, your theme isn’t doing this work for you, so you’ll need to do it yourself. The easiest way to pull this off quickly is to use the IndieWeb Plugin for WordPress. The plugin adds a bunch of additional fields to the page under the “Users” menu located at /wp-admin/profile.php within your admin UI. By filling them in you’re providing the details you’d usually add to an h-card or for rel=”me” uses. The IndieWeb plugin then also makes an h-card widget available at /wp-admin/widgets.php. You can drag and drop it to any of the available pieces of your theme which often include sidebars, footers, and sometimes headers.

The widget does a relatively good job, but some will want more control over what and how things are presented and designed. For those, another option is to create your own HTML-based widget and put the code/data for your h-card into it. This is essentially what you’ve seen on my homepage at boffosocko.com. While mine is entirely handcoded, it may be easier for most to use the microformats website which has a fill-in-the-blanks h-card generator that will allow one to input all of the data they’d like to display and it will automatically mark all of it up properly so that one can cut and paste the semantic HTML directly into a web page or a widget.

There are a bevy of other options for dropping an h-card into your site which will work. You mentioned doing something via a child-theme and that’s an option as well as any one of dozens of plugins that will allow you to drop arbitrary code into your header and/or footer. (Incidentally a child-theme is an excellent way of doing small customizations of your theme without preventing future (security) updates of your theme from overwriting them. If you’re not using one, I recommend following one of the tutorials on the wiki to create one. I would hope it shouldn’t take you more than an hour to implement based on what I know of your skill level.)

As I think you’ve mentioned, there are a few simple validators that will accept a URL which they can parse to show the h-card data they find. These include:

• indiewebify.me h-card parser that checks for the bare minimum for IndieWeb use
• pin13.net, an mf2 parser which outputs raw parsed JSON

People can use these to see if their h-cards are working as they generally expect them to.

Naturally, there are some additional subtleties in h-cards which are noted on both the IndieWeb wiki and the microformats wiki pages, but most of these aren’t of huge consequence to average users or are experimental features which aren’t widely distributed or supported. If it makes you feel better, I’ll also note that it’s not always the case that experienced theme builders or even WordPress core maintainers will properly use microformats as there are frequently cases where they’re wildly misused, abused, or mistreated in the extreme. We can only do our best I suppose…

Hopefully some of this helps put things into perspective. Now that you’re able to sign into the IndieWeb wiki, I invite you to add or modify parts you feel could be clearer or improved as you use and implement them yourself. Surely doing so will help make things easier for those that follow us both.