Задача. Необходимо в интернет-магазине сделать микроразметку hCard в контактах. Данный микроформат обязателен для интернет магазинов, т.к. с помощью нее поисковые системы лучше понимают сущность информации в контактах и могут использовать ее для выдачи в поиске. Он описывает людей, компании и места (локацию).
Решение. Принцип добавления семантической микроразметки в том, что необходимо добавить соответствующие классы тегам. Неважно div, span или какой-то другой. Чаще используют тег span, т.к. он не меняет отображение строковых элементов. class="vcard" — это основной блок, где должны находиться относящиеся к разметки элементы. Если, по какой-то причине данные, которые необходимо обозначить микроформатом hCard, находятся в разных частях страницы, то необходимо использовать class="vcard" несколько раз.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="vcard"> <div> <span class="category">Кафе</span> <span class="fn org">Ромашка</span> </div> <div class="adr"> <span class="postal-code">101000</span> <span class="locality">г. Белая Церковь</span> <span class="country-name">Украина</span> <span class="region">Киевская область</span> <span class="street-address">ул. Романтиков, д. 1</span> </div> <div>Телефон: <span class="tel">+38 (099) 123-45-67</span></div> <div>Мы работаем <span class="workhours">ежедневно с 11:00 до 24:00</span> <span class="url"> <span class="value-title" title="http://www.romashka-cafe.ru"> </span> </span> </div> <img class="photo" src="https://romashka-cafe.ru/media/foto-logo.png" alt=""> </div> |
Подробней можно изучить в официальной спецификации формата hCard (там есть и русский перевод).