Профили в социальных сетях в микроформатах h-card HTML

Question

Я хочу использовать микроформаты h-card на моем новом веб-сайте.

Как правильно добавить профили в социальных сетях, такие как Twitter, Facebook и т. Д. На мою h-карту?

Для телефонных номеров можно добавить атрибут типа. Как "клетка", "дом", или как вы хотите.

Это нормально, когда я делаю это с профилями в социальных сетях? Подобно:

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

Согласно этой странице документации это должно быть возможно. Но все учебники, которые я нашел о h-card или hcard, просто добавляют все профили в социальных сетях без атрибута type. Так что я не уверен, как правильно это сделать.

Answer 1

На сайте микроформатов2 в викинге микроформатов есть примечание:

Примечание: использование 'value' в пределах 'tel' должно автоматически обрабатываться поддержкой шаблона value-class. А пока, свойство 'type' в 'tel' отброшено / проигнорировано. Если есть очевидная документально подтвержденная потребность в дополнительных типах телефонов (например, факс), мы можем ввести новые свойства квартиры по мере необходимости (например, p-gel-fax).

Это означает, что шаблон значения-класса еще не поддерживается спецификацией mf2, но вы можете попробовать префиксы поставщика и использовать, например, u-x-twitter u-url вместо u-url,

Это например:

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

будет интерпретироваться как:

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

Кстати: вы можете попробовать / подтвердить свой код здесь: http://pin13.net/