h-card

From IndieWeb
h-card icon
h-card icon

This article is a stub. You can help the IndieWeb wiki by expanding it.


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:

How

How to markup

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

<a class="h-card" href="http://waterpigs.co.uk">
 <img src="/photo.png" alt="" />
 Barnaby Walters
</a>

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: 

 <a class="h-card" href="https://aaronparecki.com">Aaron Parecki</a>

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:

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. #Brainstorming below is a straw man extension that could help.

From an h-card specific viewpoint, here are some additional issues / questions:

  • Along the same lines, some people (e.g. User:Snarfed.org, User:Mowens.com, gRegor Morrill) 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#invisible_metadata
    • 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. gRegor Morrill
    • 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 u-url 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. [1]

Previous discussion:

  1. The specification says u-url 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 url.” (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. Aaron Parecki only includes his homepages aaronparecki.com and w7apk.com as url properties on his homepage h-card. External profiles can only be found through rel-me parsing.
  2. Tantek Çelik 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 u-url?

  1. Jacky Alciné 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

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

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 dt-bday 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

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

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

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

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

Piper McCorkle

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

Jamie Tanna

  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

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

Ethan Yoo

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, Peter Smith got his h-card markup (name, URL, note, and photo) working on his Hugo website [2] on 10 December 2022 without using Javascript.

Jasmine Amalia

Jasmine formatted their h-card as a literal card on their homepage. Their header picture (u-featured) for their Mastodon account (set up via Bridgy) is hidden in an Easter egg 🌼

Otto Rask

Otto Rask has a generic h-card available near the footer on each page of their website.

Coding Otaku

Coding Otaku has a h-card on their homepage, and a h-card as part of the article footer on all other pages.

add yourself!

Tools Using h-card

The microformats wiki also collects examples examples in the wild.

Articles


Brainstorming

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. gRegor Morrill, 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 uid to specify which h-card is the most complete / canonical identity h-card. — Martijn van der Ven
  • Jacky Alciné 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 — Barnaby Walters
  • 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 — Barnaby Walters
    • 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 — Barnaby Walters
    • Searching indiemap data from Ryan Barrett (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 — Barnaby Walters

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?
  • …

h-card generator

We need an h-card generator, any volunteers?

Something to replace this:

⚠️ The following generates a microformats1 hCard instead of a microformats2 h-card.
You probably don't want to use this tool until it has been updated

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.

See Also

Retrieved from "https://indieweb.org/wiki/index.php?title=h-card&oldid=96016"