Как работает концепция hcard в HTML

так недавно я читаю книгу под названием Adaptive Webdesign, и я наткнулся на что-то под названием hcard, hcalendar, и я пошел в это соответственно страница документация. Теперь вопрос не понимания, как это работает? Он используется для представления людей..и разметка идет так

<div class="vcard">
    <a class="url fn" href="http://tantek.com/">Tantek Çelik</a>
</div>

теперь я знаю, что эти классы имеют такие значения, как url указывает, что данная ссылка переводит пользователя на веб-страницу и fn означает, отформатированный имя, так что на...

таким образом, эти классы указывают поисковым системам, что контент является hCard или он отображает по-разному и т. д..Может ли кто-нибудь объяснить мне, как это работает, каковы преимущества для этого, и имеет ли это значение с точки зрения SEO и предопределены ли эти классы?

Edit: Итак, эти классы зарезервированы? Что, если я использую их для других элементов? И есть ли javvascript, который я могу назвать onclick кнопки для сохранения vcard на компьютере / пользовательском устройстве?

5 ответов


vCard является стандартом для электронной визитной карточки. hCard берет эти метки и использует их как имена классов вокруг данных в HTML.Каждый hCard начинается внутри блока, который имеет class= "vcard".

некоторые из этих типов имеет подсвойства. Например, значение " tel "содержит" type " и "value". Таким образом, вы можете указать отдельные номера домашнего и делового телефонов. Тип "adr" имеет много подпропертий (почтовый ящик, расширенный адрес, улица-адрес, населенный пункт, регион, почтовый индекс, страна-название, тип, значение).

<div class="vcard">
   <div class="fn">xxxxx</div>
   <div class="adr">
      <span class="locality">yyyy</span>,
      <span class="country-name">zzzzz</span>
   </div>
</div>

имена классов не должны означать ничего на Вашей странице. Однако, вы всегда можете воспользоваться ими, чтобы стиль вашей контактной информации. Вы также можете стиль их в пользовательской таблице стилей Вашего браузера, так что вы можете найти их во время серфинга в интернете. (первоисточник)

Что касается аспектов SEO, пожалуйста, проверьте эту статью советы по локальной поисковой оптимизации для вашего Сайт


эта концепция позволяет машинам получать подробную информацию о содержимом. Это довольно просто, вы знаете, что такое имя. Машины нет... :)

поэтому вам нужен способ сообщить машине, какие данные содержит ваш html.

например: вы можете обогатить свои данные, как в примере ниже, и позволить, возможно, Adressbook-Application, получить подробную информацию о том, какие поля должны быть заполнены.

<div class="vcard">
    <a class="url fn" href="http://tantek.com/">
        <span class="family-name">Tantek</span>
        <span class="given-name">Çelik</span>
    </a>
</div>

этот фрагмент позволяет, в частности, адресной книги приложения. чтобы легко найти данное имя и установить его в правильное поле. Порядок здесь не имеет значения.


Если вы не объявили, что используете смотря по ситуации синтаксис (с помощью vcard class), то вы можете использовать любые имена классов, которые вы хотели бы. Даже если вы начали использовать микроформат hCard, стили не будут применяться неявно, так как микроформаты не связаны со стилем отображения.

цель использования микроформатов-открыть интерфейс для предоставления метаданных. Предоставляя данные в стандартизированном микроформате, любой, кто анализирует ваш сайт, может использовать микроформат для поиска соответствующей информации.

поисковые системы особенно выигрывают от этого, поскольку это позволяет им предоставлять дополнительную информацию о конкретном ресурсе на странице результатов.


Я точно не знаю смотря по ситуации и hcalendar, но, например, посмотрите вопрос переполнения стека в Google, вы увидите, что время, когда он был опубликован, появляется рядом с контентом, для многих сайтов он также отображает имя автора.

другими словами, Google будет использовать эти микроформаты для улучшения поиска, предоставляя метаданные для поиска по мере его анализа со страницы.

вы помогаете Google, они помогают вы.


Я бы рекомендовал вам использовать http://schema.org/ для микроформатов. Google официально рекомендует использовать его, и он также полностью поддерживается Bing и многие другие поисковые системы. Когда вы используете schema.org микроформаты, искатели поисковой системы извлекут объекты данных из вашей разметки и отобразят их в результатах поиска соответствующим образом.

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