Profile Pages <3 hCard

June 22, 2010 | Posted by Beau Lebens

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

  1. Sumon says:

    Great help. Thanks !

  2. Really superb thank alot.

  3. Kate Mag says:

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

  4. Kyle Alm says:

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

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

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

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

    • Beau Lebens says:

      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 WordPress.com account (which is connected to Gravatar accounts). We should have it fixed up soon though.

  8. vaskenhauri says:

    [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…

    • Beau Lebens says:

      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: http://en.gravatar.com/site/implement/images/#default-image

  9. kristisparks says:

    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 says:

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

    • Beau Lebens says:

      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 Gravatar.com, or to the specific sites you link to.

an    joint
Follow

Get every new post delivered to your Inbox.

Join 8,893 other followers