Семантическая вёрстка HTML: как правильные теги помогают поисковику

Семантическая вёрстка — использование HTML-тегов по их смыслу: заголовок оформлен тегом заголовка, список — списком, кнопка — кнопкой, основной контент выделен тегом main. Человек видит на экране дизайн и не замечает, из чего он собран. Поисковый робот и экранный диктор для незрячих видят только код. Если всё сверстано одинаковыми блоками div, им сложнее понять, что на странице главное.

Заголовки H1–H6

Заголовки создают оглавление страницы. H1 — главная тема, H2 — разделы, H3 — подразделы внутри разделов. Типичные ошибки:

• Заголовочные теги используются для оформления: крупный шрифт в подвале сделан через H2
• Тексты разделов оформлены жирным абзацем вместо заголовка
• Уровни перепрыгивают: после H1 сразу H4
• На странице нет H1 или их много с разным смыслом

Поисковики используют заголовки, чтобы понять структуру и темы разделов. Чёткая иерархия помогает и для выделения ответов на вопросы.

Области страницы

HTML5 добавил теги, обозначающие области:

• header — шапка сайта или раздела
• nav — навигация: главное меню, хлебные крошки
• main — основное содержимое страницы, одно на странице
• article — самостоятельный материал: статья, карточка
• section — тематический раздел внутри страницы
• aside — дополнительное: боковая колонка, связанные материалы
• footer — подвал

Поисковики не дают бонусов за сами теги, но они помогают отделить основной текст от повторяющихся элементов — меню, подвала, виджетов.

Ссылки и кнопки

Ссылка ведёт на другой адрес — для неё тег a с атрибутом href. Кнопка выполняет действие на странице — для неё тег button. Частая ошибка: переходы между разделами сделаны через элементы с обработчиком нажатия на JavaScript без href. Робот не видит таких переходов как ссылок и может не найти страницы, на которые они ведут.

Списки и таблицы

Перечисления оформляйте тегами ul и ol, табличные данные — таблицей с заголовками столбцов. Поисковики умеют извлекать списки и таблицы для блоков ответов: например, этапы работы или сравнение характеристик. Таблица, нарисованная блоками div с рамками, такого шанса не даёт.

Изображения

Содержательные изображения вставляются тегом img с атрибутом alt, описывающим, что изображено. Декоративные элементы — фоном через CSS или с пустым alt. Для подписи к фото подходит связка figure и figcaption. Если важная картинка, например фото товара, задана только фоном в стилях, поиск по картинкам её не увидит.

Доступность и SEO идут вместе

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

Как проверить свою вёрстку

• Расширения браузера, показывающие структуру заголовков страницы
• Инструменты проверки доступности, например встроенный аудит Lighthouse
• Отключение стилей: если без CSS страница читается как логичный документ, семантика в порядке
• Краулеры, которые выводят H1 и H2 для всех страниц сайта

Формы

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

С чего начать на готовом сайте

Не нужно переписывать всю вёрстку. Начните с шаблонов, через которые приходит поисковый трафик: страницы услуг, категории, карточки, статьи. Исправьте иерархию заголовков, замените псевдоссылки настоящими, проверьте alt у ключевых изображений. Это даёт основной эффект при минимальных правках.