Social media profiles in h-card HTML microformats

Question

I want to use the h-card microformats on my new website.

How do I add social media profiles like twitter, facebook, etc to my h-card in a correct way?

For phone numbers it is possible to add a type attribute. Like 'cell', 'home', or whatever you want.

Is it OK when I do this with social media profiles too? Like:

<span class="u-url">
  <span class="type">Twitter</span>:
  <span class="value">http://twitter.com/blabla</span>
</span>

According to this page of the documentation this should be possible. But all the tutorials I've found about h-card or hcard just add all the social media profiles without a type attribute. So I'm not sure what's the right way to do it.

Answer 1

There is a note on the microformats2 site at the microformats wiki:

Note: use of 'value' within 'tel' should be automatically handled by the support of the value-class-pattern. And for now, the 'type' subproperty of 'tel' is dropped/ignored. If there is demonstrable documented need for additional tel types (e.g. fax), we can introduce new flat properties as needed (e.g. p-gel-fax).

That means that the value-class-pattern is not yet supported by the mf2 spec, but you can try the vendor prefixes and use for example u-x-twitter u-url instead of u-url.

This for example:

<div class="h-card"><a href="http://twitter.com/blabla" class="u-x-twitter u-url">Twitter</a></div>

would be interpreted like:

{
    "items": [
        {
            "type": [
                "h-card"
            ],
            "properties": {
                "x-twitter": [
                    "http:\/\/twitter.com\/blabla"
                ],
                "url": [
                    "http:\/\/twitter.com\/blabla"
                ],
                "name": [
                    "Twitter"
                ]
            }
        }
    ],
    "rels": {}
}

BTW: You can try/validate your code here: http://pin13.net