h-card - IndieWeb

h-card - IndieWeb
Jump to content
From IndieWeb
h-card icon
This article is a
stub
You can help the IndieWeb wiki by
expanding it
with
relevant
information.
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
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.
#Brainstorming
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
gRegor Morrill
Vika
Lewis Cowles
jmtd
) 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
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:
The specification
says
u-url
is for the identity’s “home page”.
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:
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.
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
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
, 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
Simon Prickett
Simonprickett.dev has his h-card on the front page of
Kev Quirk
Kev Quirk
has his personal h-card on the home page of his site,
Ethan Yoo
Ethan Yoo
added h-card markup (name, URL, pronouns, note, photo, and email) to
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
Telegraph
uses your home page h-card to grab your profile icon and name after you log in.
[3]
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
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
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
Ryan Barrett
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:
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?
social reader
can use them for shorter references in actions ("they liked this photo")
Jacky Alciné
2022-07-03
IndieAuth
client that supports
Ticketing_for_IndieAuth
that can use human-facing language ("do you want to send xer a ticket to $RESOURCE")
Jacky Alciné
2023-11-18
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
microformats
h-entry
Discussion about adding pronunciation guides to h-card.
Criticism:
Retrieved from "
Categories
stubs
building-blocks
microformats