h-card

From IndieWeb
Jump to: navigation, search

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

Each IndieWeb site should have an h-card on the homepage, preferably containing at least name, url and photo (or logo) properties — just these three cover most h-card usage on the IndieWeb, for example, putting a name and face to comments or URLs.

Having a minimal h-card on your index page allows Gravatar-like lookups based on domain instead of email address.

Telegraph uses your home page h-card to grab your profile icon and name after you log in.[1]

How

You can make a simple h-card that does the above 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 to someone else embedded in a post. The best approach to embedding an h-card is to use a minimal amount of mark up such as: 

 <a class="h-card" href="https://indieweb.org/User:Aaronparecki.com">Aaron Parecki</a>

If you want to send the person an @ mention in the post, use a person-tag.


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.

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. [2]

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?

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.

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.

add yourself!

...

The microformats wiki also collects examples examples in the wild.

Articles


Brainstorming

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-hcard-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

See Also

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