h-card

 h-card  is the microformats2 vocabulary for marking up people, organizations, and venues on web sites, and supersedes hCard. Colloquially many will use the term "h-card" as a synonym for an online equivalent of a business card since it often contains identity information including name, address, photo, and related contact information.

Why
Marking up your homepage profile with a minimal h-card including name, url and photo properties covers most h-card usage on the IndieWeb:


 * Feed readers display your profile photo next to your posts
 * reply posts to your posts show your author profile in their reply contexts
 * Posts that you reply to show your author profile in their comments display
 * Apps you sign into with IndieAuth (or which otherwise know your URL) auto-fill and auto-update your name and photo
 * Gravatar-like lookups based on domain instead of email address

How to markup
You can make a minimal h-card for your name, photo, and URL with two elements and one classname, for example:

  Barnaby Walters 

Details for creating an h-card on WordPress can be found on Getting Started on WordPress.

You can include an h-card when you mention someone in a post. Start with minimal markup such as: Aaron Parecki

When your mention has a link to their site, they can receive an @-mention. If you want to communicate that the post is about this person or that they are a subject of or in the post, use a person-tag.

Validators
You can check your homepage h-card for completeness and common mistakes using these validators:
 * indiewebify.me h-card
 * pin13.net mf2 parser (raw parsed JSON)

Issues
From a pure user features perspective, and assuming no invisible metadata, how are the following accomplished (that is, with h-card)?


 * I'd like to show some personal profile information (for example, name) on my posts, but not my picture. I may want to show additional profile information on another page, for example. /about. That may include my picture, or it may not (including icon).


 * When I comment, like, repost, or rsvp to someone else's post, and they render that response (comments-presentation), I'd like to let them show my additional profile information, including my picture, if they choose. authorship handles some of this, but maybe not all, for example, the case where I don't show my picture anywhere on my site.


 * Similarly, when I log into a site like this wiki with IndieAuth (etc.), I'd like the site to be able to discover my additional profile information, including my picture, to show on my profile page, activity, or other appropriate places. representative-hcard-parsing gets close, but not all the way. below is a straw man extension that could help.

From an h-card specific viewpoint, here are some additional issues / questions:
 * Some people (e.g. GWG, Kartik, User:Snarfed.org, User:Mowens.com,, , ) would like a way to include both a minimal h-card on a page *and* a link to a "complete" h-card with more information, for example, contact details or photo. authorship and representative-hcard-parsing are both related but slightly different, and both currently only use the inline h-card if it's available. The inline h-card could include a link to the expanded h-card.


 * Along the same lines, some people (e.g. User:Snarfed.org, User:Mowens.com, ) would like to make some parts of their h-card invisible everywhere, but still available to programmatic consumers. Examples include rel-me links to some silos, public encryption key. Related: antipatterns
 * On my site currently, my author hCard on each post is invisible because I do not feel the need to display my photo, URL, and name on every post. This would be different if it was a multiple-author site.
 * I too have made the h-card invisible on my home page because I don't want details to show there for design reasons. Jeremy Cherfas

What should be a on the h-card and what shouldn’t?
A: The home page and any other URLs that represent the person or organization. The h-card specification was updated 2019-05-08 to clarify this. 

Previous discussion:
 * 1) The specification says   is for the identity’s “home page”.
 * 2) hCard authoring’s Link it up section recommends to add “links to your website, your social network profiles and other sites that represent you specifically to your hCard with the class name  .” (Note that this is linked to indirectly by h-card as h-card-authoring has yet to be written.) And goes on to show an example where rel-me links are given the class.

There are also examples of both readings:


 * 1)  only includes his homepages   and   as url properties on his homepage h-card. External profiles can only be found through rel-me parsing.
 * 2) undefined includes all his rel-me links as url properties on his homepage h-card.

What should the general advice be? Are silo identities still homepages to be marked up with ?


 * 1)  thinks (2022-05-17) that pages that have usable markup to the IndieWeb (like microformats) should be the only ones linked up from one's h-card, everything else can be linked via rel-me

IndieWeb Examples
As a basic building-block of the IndieWeb, an h-card helps to establish one's online identity. Numerous examples can be found on the Microformats Wiki as well as a few of the ones below:

Chris Aldrich
has an h-card in the right sidebar of his homepage with both human-readable and machine readable data

Martijn van der Ven
(self proclaimed master of “the art of the h-card”) has an extensive h-card on http://vanderven.se/martijn/, including experimental properties like dietary preference, experimental formats like h-measure, a  specified to the minute, and more!
 * If people take away anything from his card, he would like it to be the pronoun mark-up.

gRegor Morrill

 * I have an h-card in the footer of each h-entry on gregorlove.com, but would like to experiment with marking up my existing information on my about page and linking to that from each post.

Amit Gawande
has an h-card in the footer of his website with information on this name, nick-name, email address and a photo.

Jacky Alcine
has an h-card on the footer of his site with location information.

As of 2022-03-25, my full h-card lives at |my about page with a 'thin' one on every page.

Piper McCorkle
has an h-card front and center on her website's homepage.

Jamie Tanna
has his personal h-card on the front page of https://www.jvt.me.

Simon Prickett
Simonprickett.dev has his h-card on the front page of https://simonprickett.dev.

Kev Quirk
has his personal h-card on the home page of his site, https://kevq.uk.

Ethan Yoo
added h-card markup (name, URL, pronouns, note, photo, and email) to https://www.ethanyoo.com on November 25, 2020.

Watts Martin
Watts has their h-card on the front page of their web site, Coyote Tracks.

Peter Smith
After a lot of debugging and help from folk on this list, got his h-card markup (name, URL, note, and photo) working on his Hugo website  on 10 December 2022 without using Javascript.

Tools Using h-card

 * Telegraph uses your home page h-card to grab your profile icon and name after you log in.
 * indiewebring parses h-card information for display on its directory
 * Most comment implementations consume h-card
 * Most reply-context implementations consume h-card
 * Most readers consume h-card

The microformats wiki also collects examples examples in the wild.

Articles

 * 2020-04-11 Brian Wisti Indieweb h-cards: Using microformats to build a profile page

partial vs complete
One possible solution for the partial plus complete h-card issue is to include a rel-me link to the full h-card and *not* mark up the partial profile information on the home page as an h-card. The representative-h-card-parsing algorithm would then follow the rel-me link and use its full data. It doesn't seem ideal, but it'd work.

One problem with this is that the home page usually has many rel-me links, for example, to silos, and we don't yet have a way to denote the "canonical" one. , User:Mowens.com, and others have proposed using u-uid and/or a new rel-canonical property for this.


 * I wonder if there is anything we can do with  to specify which h-card is the most complete / canonical identity h-card. —
 * uses "rel=canonical" on his representative h-card to help with disambiguation.
 * Could rel-author be suitable for this? It would definitely make sense for linking post pages to author URLs, perhaps less so when the publisher wants to have a partial h-card on their homepage and an expanded on on, say, an /about page —
 * For the “partial h-card on homepage and expanded on separate page” use case, rel=about could be ideal for this, as “about” is a very commonly used term for “additional information about this website/person” both in UI and URL design. It wouldn’t overload rel-author, and could be chained, e.g. a consuming implementation could find a minimal h-card on a post page, fetch the url property to find the same minimal representative h-card, and then follow a rel=about link to a page with a complete h-card on —
 * If this was accepted, we could simply tack on addendums to authorship and representative h-card which say “once the author/representative h-card has been found, if a rel=about link is found on the same page, the consumer can optionally fetch that page and parse it for an h-card (matching the representative url or uid) with more information about the person” or similar —
 * Searching indiemap data from (thanks!) shows:
 * 150x rel=About
 * 95x rel=about
 * 12x other variations (about…, about,, etc)
 * on further analysis, it looks like all of the rel=About/about usage in indiemap is from one domain, and not being used to link to an expanded profile page, so afaik there’s zero evidence of it being used for that in the wild
 * the relmeauth spec suggests just using rel-me to link to an expanded contact info page, and assumes that consumers will look through rel-me URLs which match the same domain and fetch them if they’re looking for additional contact info —
 * examples of this in the wild?
 * aaronparecki.com has a rel-me to aaronparecki.com/aaronpk, which contains follower and following counts, but no additional h-card information
 * ran a query on the indiemap data and found 29 examples of the same-domain rel-me publishing pattern
 * Examples of the same/similar domain rel-me publishing pattern:
 * http://equivalentideas.com/contact
 * https://webrocker.de/impressum/
 * 90 examples from indiemap of the same/similar domain /about publishing pattern (currently without rel-me markup) listed here
 * 46 examples from indiemap of {domain}/contact, which are likely a mix of additional contact (i.e. profile) information and contact forms queryable here

pronouns use-cases
Adding more information and additional properties unlocks more possibilities:


 * Allows apps to find and display/use your preferred pronouns
 * which apps? which specific use-cases does a consuming app need to show a pronouns?
 * A social reader can use them for shorter references in actions ("they liked this photo") 2022-07-03

h-card generator
We need an h-card generator, any volunteers?

Something to replace this:

The microformats website has a fill-in-the-blanks hCard 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 into a web page.