HTML говорит браузеру, как показывать содержимое, но молчит о его смысле. Человек сразу видит, что перед ним визитка автора, рецепт или афиша, а для машины это просто набор тегов и текста. Семантическая разметка добавляет странице второй слой: невидимые человеку пометки, которые читают поисковые роботы, парсеры и расширения, и смысл из этого слоя потом превращается в расширенные сниппеты, аккуратные выгрузки и работающие подписки на события.
Слоёв смысловой разметки два главных ветерана. Microformats выросли из практики верстальщиков и живут на обычных классах CSS, RDFa пришёл из мира формальной семантики и работает отдельными атрибутами со словарями. Оба решают одну задачу, но с разным характером, и выбор между ними это выбор между простотой и строгостью, между конвенцией и стандартом.
Дальше оба подхода разобраны с примерами кода, сравнением по существу и практикой внедрения, включая словарь schema.org, который давно служит общим языком свойств для обоих форматов, и последствия для поисковой выдачи.
Зачем странице смысл в машиночитаемом виде и кто его читает кроме браузера
Первый читатель смыслового слоя это поисковая система. Робот, который понял, что блок на странице это контактная карточка организации с телефоном и графиком работы, показывает расширенный сниппет, и кликабельность выдачи растёт без единой правки текста. Второй читатель это внешние парсеры: сервисы подписки на события, сборщики рецептов, каталоги компаний, которые иначе вытаскивают факты из вёрстки хрупкими регэкспами. Третий это расширения и скрипты самого браузера, от читалок до автобукмарков.
Страница с размеченным смыслом становится двуязычной: людям видна вёрстка и оформление, машинам видна структура фактов. Двуязычие экономит всем время: сайту не нужно держать отдельный экспортный канал под каждый сервис, а сервису не нужно разгадывать вёрстку чужого шаблона, которая меняется при каждом редизайне.
Обратная сторона двуязычия в ответственности. Разметка, которая разошлась с видимым содержимым, хуже полного отсутствия: робот показывает телефон, которого давно нет, или дату события из прошлого года. Поэтому смысловой слой ведут в тех же шаблонах, что и видимый, и любое изменение вёрстки тянет за собой проверку разметки.
Награда за двуязычие видна в выдаче: расширенный сниппет с рейтингом, временем события или ценой привлекает клики лучше сухой строки, а пользователи голосовых ассистентов получают короткий точный ответ, собранный из размеченных фактов. Смысловой слой работает на всех каналах сразу, потому что все каналы читают одни и те же пометки.
Microformats и их классы hCard hEvent и принцип разметки на классах
Microformats появились в середине двухтысячных как ответ на простое наблюдение: люди уже размечают смысл, называя классами вроде author или event, осталось договориться о единых именах. Формат не требует новых атрибутов и отдельного синтаксиса: смысл записывается в class обычных элементов. Классика жанра это hCard для контактов и hCalendar для событий, а современная вторая версия ввела короткие префиксы: h-card для объекта, p-name для простого свойства, u-url для ссылки, dt-start для времени.
<div class="h-card">
<span class="p-name">Maria Sokolova</span>
<a class="u-url" href="https://example.net">example.net</a>
</div>Сила подхода в естественности для верстальщика: разметка пишется теми же руками, что и вёрстка, не нужно учить новые атрибуты, классы видны в инспекторе и легко читаются глазами. Человек остаётся первым: разметка никогда не прячет смысл от пользователя, она лишь дублирует его в машиночитаемом виде. Парсер для такого блока пишется в один вечер, а сообщество держит открытые таблицы соответствия классов словарю schema.org.
Слабость подхода зеркальна силе. Выразительность упирается в плоскую вложенность классов: сложные связи между сущностями, ссылки на внешние ресурсы, строгие типы значений классами не описать. Формальной модели нет, и в спорных случаях поведение парсеров расходится, поэтому на масштабах издательства с богатыми онтологиями Microformats упираются в потолок.
RDFa и RDFa Lite атрибуты property typeof vocab и формальные тройки
RDFa пришла из стандартизационного мира и описывает страницу на языке формальной семантики: каждая пометка это тройка из субъекта, предиката и объекта. Упрощённый профиль RDFa Lite свёл синтаксис к пяти атрибутам: vocab задаёт словарь по умолчанию, typeof объявляет тип сущности, property помечает свойство, resource указывает на описываемый объект, prefix подключает внешние словари. Полный RDFa добавляет обработку вложенных ресурсов и ссылок между ними.
<div vocab="https://schema.org/" typeof="Person">
<span property="name">Maria Sokolova</span>
<a property="url" href="https://example.net">example.net</a>
</div>Строгость даёт предсказуемость: парсер обязан понять конструкцию одинаково, типы и свойства описаны в словаре, вложенность сущностей не двусмысленна. RDFa удобен там, где страница описывает сеть связанных фактов: автор, организация, её филиалы, события, публикации, где каждая сущность имеет свой URL. Издательства, библиотеки и научные порталы годами собирают на RDFa целые графы знаний.
Порог входа выше, чем у классов. Команда обязана понимать словарь и тройки хотя бы на базовом уровне, иначе разметка быстро превращается в копипасту без смысла. Зато однажды освоенный RDFa покрывает случаи, которые Microformats не выражают вообще, и не требует пересборки подхода при росте сложности проекта.
Словарь schema.org как общий язык поверх обоих форматов
В 2011 году крупные поисковые системы договорились о едином словаре schema.org, и с тех пор он служит эсперанто для смысловой разметки: типы Person, Organization, Event, Product, Recipe и сотни свойств к ним. RDFa работает со словарём напрямую через vocab, и страница на RDFa Lite со schema.org это самый короткий путь от вёрстки к формальным фактам.
Для Microformats словарь остаётся внешним соответствием: сообщество ведёт таблицы, где h-card отвечает Person, а h-event отвечает Event, и парсеры умеют переводить классы в свойства словаря. Это не делает Microformats частью schema.org, но позволяет обоим мирам понимать друг друга, и выбор формата перестаёт быть выбором словаря.
Практический вывод для команды простой: сначала выбирают типы и свойства словаря, исходя из того, что нужно выразить, и только потом выбирают носитель, классы или атрибуты. Словарь живёт дольше форматов, потому что форматы это способ записи, а словарь это сам смысл, который записывают.
Работа со словарём начинается с обязательных свойств: у каждого типа есть минимум, без которого разметка не считается валидной. Дальше действует принцип разумной достаточности: каждое добавленное свойство обязано жить в шаблоне честно, а не заполняться заглушкой. Пять честных свойств полезнее пятнадцати пустых.
Сравнение подходов порог входа выразительность и экосистема инструментов
По порогу входа Microformats выигрывают всухую: верстальщик добавляет классы к уже существующим элементам и не учит ничего, кроме списка имён. RDFa требует понимания модели и словаря, зато сразу даёт типизацию и вложенность без сюрпризов. Команда из одного человека с простой страницей освоит классы за вечер, команда издательства с онтологией всё равно придёт к атрибутам.
По выразительности картина обратная. Классы описывают плоские объекты с простыми свойствами, атрибуты описывают графы со связями, ссылками на внешние ресурсы и строгой типизацией. Событие с местом проведения, организатором и ссылкой на билет замкнётся в RDFa элегантно, а в классах потребует хитрых трюков с вложенными структурами, которые парсеры разных авторов поймут по-разному.
Экосистема у обоих зрелая, но с разным акцентом. Парсеры Microformats выходят в одну страницу кода и потому есть почти в каждом языке, парсеры RDFa серьёзнее и тянут за собой обработку словарей. Валидаторы поисковых систем исторически понимали оба формата, сообщество Microformats ведёт живые примеры на все случаи, у RDFa строгие спецификации с тестовыми наборами.
Выбор на практике сводится к трём вопросам. Что размечаем: визитки, события и простые сущности берут классы, связанные графы берут атрибуты. Кто размечает: один верстальщик без интереса к семантике или команда, готовая учить модель. Зачем размечаем: для парсеров и расширений достаточно классов, для формальной совместимости и обмена фактами нужен RDFa.
Смешивать оба формата на одной странице технически можно, парсеры справятся с каждым своим куском, но сопровождение такой вёрстки быстро дорастает до головной боли. Здоровая дисциплина: один проект, один формат, и переход между ними случается только вместе с крупным редизайном.
Практика разметки на реальной странице контактов событий и товаров
Первый проход всегда одинаковый: контактная страница и карточки авторов, потому что это самые частые и самые благодарные сущности. Страничка с командой обрастает классами h-card за полчаса, телефон заворачивается в p-tel, email в u-email, а фото в u-photo, и внешние сервисы начинают понимать, кто есть кто. В RDFa тот же блок помечается typeof="Person" с property="telephone" и property="email".
Второй проход это события и товары. Афиша получает h-event с dt-start и p-location, а каталог получает h-product с p-name и p-price. Каждая пометка обязана стоять на видимой части страницы: разметка невидимого содержимого считается обманом, и поисковые системы прямо предупреждают об этом, поэтому трюк с блоком display:none для фактов закрывают сразу.
Частые ошибки предсказуемы, и их ловит валидатор. Классы без корневого типа, вложенные объекты без объявления, время без машинного формата, телефон в виде красивой записи вместо нормализованной. Порядок исправления всегда один: сначала корневой объект, потом обязательные свойства, потом нормализация значений, и лишь затем украшательства.
Сопровождение разметки валидация и связь с rich-результатами поиска
Разметка живёт в шаблонах, и её сопровождение это часть работы с вёрсткой. Смена дизайна контактов, переезд на новый шаблон, добавление поля в карточку товара: каждое такое изменение проходит мимо смыслового слоя и ломает его молча. Спасают тесты на ключевых шаблонах: прогон парсером в конвейере и сравнение результата с эталоном ловит расхождение до релиза.
Аудит разметки раз в квартал дополняет автоматические проверки: в панели для вебмастеров видны ошибки парсинга по страницам, а ручная выборка по ключевым шаблонам подтверждает, что факты в сниппетах совпадают с реальностью. Такой двойной контроль дешевле, чем репутационная цена устаревшего телефона в выдаче.
Для поисковой выдачи действует правило последних лет: системы рекомендуют JSON-LD для расширенных сниппетов, потому что отдельный скрипт проще сопровождать, чем разметку внутри вёрстки. Страничные форматы не умерли: парсеры, расширения, читалки и сторонние сервисы продолжают читать смысл из самой вёрстки, и страница с разметкой в шаблонах остаётся понятной даже без внешних скриптов.
Порядок внедрения смысловой разметки сходится в короткую лестницу:
- выбрать сущности для первого прохода: контакты, авторы, организация;
- зафиксировать свойства словаря schema.org под каждый тип;
- выбрать носитель по сложности: классы для простых страниц, атрибуты для графов;
- разметить шаблоны и прогнать валидатором поисковой системы;
- добавить нормализацию значений: время в машинном формате, телефон без украшений;
- закрепить проверку парсером в конвейере тестов шаблонов;
- сверять расширенные сниппеты после каждого крупного изменения вёрстки.
Смысловой слой страницы окупается не сразу, а привычкой: однажды размеченные шаблоны продолжают отдавать факты каждому новому потребителю, от поискового робота до скрипта в браузере. Команда, которая разметила контакты и события один раз, больше не возвращается к этому вопросу, и это лучший показатель хорошо сделанной невидимой работы.