Profile Pages <3 hCard

Did you know that your profile pages are fully marked up using hCard? hCard is a microformat for programmatically embedding information about people, companies, organizations, and places in HTML and other markup languages. The screenshot below describes some of the main markup involved on a profile page

  1. Email address marked up with class=email (only available via JS/client-side parsing due to spam-protection measures)
  2. IM accounts marked up using class=url (some values only available via JS/client-side parsing due to spam-protection measures)
  3. Phone numbers marked up with class=tel (using type/value subproperties)
  4. Verified accounts marked up with class=url and rel=me
  5. Name marked up with class=fn
  6. Personal Links are marked up with class=url
  7. Image (main Gravatar) is marked up using class=photo
hCard on Profile Pages
hCard on Profile Pages

There’s more profile-data goodness coming soon, so check back here for the latest.





14 responses to “Profile Pages <3 hCard”

  1. Sumon Avatar

    Great help. Thanks !

  2. Kishore Mylavarapu Avatar

    Really superb thank alot.

  3. Kate Mag Avatar

    Gravatar now supports microformats, that’s cool. Good for search engine 🙂 Thanks

  4. Kyle Alm Avatar

    Very cool. We use these for all of our clients, nice to see that it’s becoming a standard.

  5. What Are hCards? Avatar

    […] hCards. The question I have is, what are hCards and what is the beneficial use of microformats?…profile-pages/ WPTavern Twitter Account | Personal Blog | WordPress Weekly Podcast Reply With Quote […]

  6. […] Profile Pages ❤ hCard » Microformat: hCard var flattr_wp_ver = '0.9.11'; var flattr_uid = '11666'; var flattr_url […]

  7. Dave Abrahams Avatar

    [I couldn’t find a better place to report this; sorry]
    Are you aware that Safari 5 on Mac can’t display your site? My browser goes into some kind of infinite refresh loop when I try to load it.

    1. Beau Lebens Avatar

      We just recently found out about this Dave, but thanks for reporting it. If you enable third-party cookies in your preferences then it won’t do that. The issue relates to the way we’re currently doing “single-sign on” with your account (which is connected to Gravatar accounts). We should have it fixed up soon though.

      1. Dave Abrahams Avatar

        Actually I managed to make the problem go away without doing that. Not sure what I did anymore; perhaps cleared cookies and/or cache.

  8. vaskenhauri Avatar

    [Sorry, I’m sort of in the same boat as Dave above…]
    I was wondering if it might be possible to have Gravatars with a rating of PG and above default back to a different ‘primary’ G-rated Gravatar. We’re implementing Gravatars at my work and we have both internal and more ‘public-facing’ sites, all on the same domain. I have a PG Gravatar I’d like to associate with that email address, but on our public sites (which we lock down to G ratings) it appears as the default Gravatar logo. It would be sweet if it could show my other, G-rated Gravatar instead.

    If anyone knows if this is already possible (without using two different email addresses–not possible with all the SSO going on), please let me know. It’s quite possible I just missed something…

    1. Beau Lebens Avatar

      If I understand what you’re asking correctly, then no, that’s not currently possible. The admin of the site can configure a default image, which will be displayed if there is ever a “non-match” (either because of ratings or because the user doesn’t have one configured at all), but that’s normall a site-wide setting since it’s passed dynamically in the request URL, as detailed here:

  9. kristisparks Avatar

    I know there’s a better way to request this information, but I’m not sure where! 🙂 Can Gravatar add a “Google Voice” # field for profiles? I don’t want to designate my # as Home or Work since my Google Voice is my primary catch-all….

  10. Sheimi Avatar

    My hovercard keeps linking to my old site. How can I change this?

    1. Beau Lebens Avatar

      The link that’s applied to your Gravatar will usually be whatever you entered at the time you posted your comment, so that is not controlled by Gravatar (or your hovercard). The links *inside* your hovercard should go to your profile on, or to the specific sites you link to.

%d bloggers like this: