Семантическая разметка помогает SEO не потому, что в коде стало больше "правильных" тегов. Она помогает тогда, когда по странице сразу видно, что здесь главное, что второстепенно и как устроена логика контента.
Именно здесь чаще всего и начинаются ошибки. <section> используют вместо <div>, <article> превращают в любой крупный контейнер, а про <aside> вспоминают в последнюю очередь. В коде появляется красивый набор HTML5-элементов, но сигналы для поисковика становятся смазанными.
Семантика работает только там, где видна иерархия
Большинству страниц не нужен сложный набор тегов. Обычно достаточно четко обозначить:
- шапку страницы
- подвал
- основной контент
- сопутствующие, но не главные блоки
Для этого чаще всего хватает <header>, <footer>, <main>, <article> и <aside>.
Такой шаблон может показаться даже слишком простым. Но именно в этом и смысл: он не распыляет акценты.
Самая частая ошибка: использовать семантические теги ради верстки
Многие проблемы начинаются с желания заменить обычные контейнеры на "более умные" HTML5-теги. На практике это быстро ломает смысл.
На скриншоте выше <article> с <h1> выглядит нормально. Лишними становятся многочисленные <section> вокруг него, потому что они не обозначают самостоятельные тематические части.
<section> нужен не для того, чтобы рисовать блоки на странице. Он нужен, чтобы делить самостоятельный материал на логические подразделы. Если section стоит везде, поисковик перестает понимать, что из этого действительно важно.
Когда <section> действительно уместен
Есть типы страниц, где <section> отлично работает. Например, обзор смартфона: экран, камера, аккумулятор, производительность, дизайн. Это естественные подтемы внутри одного материала.
В таком случае каждый блок отвечает на отдельный вопрос, имеет свой заголовок и остается понятным даже вне остального текста. Тогда section усиливает структуру, а не засоряет ее.
Перед использованием <section> удобно проверить себя:
- этот блок раскрывает отдельную подтему?
- у него есть собственный заголовок, обычно
<h2>или<h3>? - он сохраняет смысл, если вынести его отдельно?
- разделение продиктовано темой, а не только визуальным макетом?
Если ответ неочевиден, чаще всего достаточно обычного <div>.
<article> и <aside> помогают расставить вес
<article> стоит оставлять для контента, который может существовать сам по себе: статья, новость, отзыв, карточка материала.
Но на многих страницах после основного материала идут связанные товары, похожие статьи, форма подписки, блок автора или другие вспомогательные модули. Они полезны, но не должны спорить с главным контентом за один и тот же семантический уровень.
Вот здесь и нужен <aside>. Он показывает, что блок связан с темой страницы, но не является ее главным смысловым центром.
Если совсем коротко:
<article>несет основную ценность URL<aside>дополняет, поддерживает или конвертирует, но не ведет повествование
Один <h1> на страницу остается самой безопасной практикой
В HTML5 можно встретить аргументы в пользу нескольких <h1>. Для SEO рабочее правило по-прежнему простое: один URL, один <h1>.
Лучше всего держать этот <h1> внутри основного <article>. Так тема страницы читается без двусмысленности.
Простая схема выбора тегов
Если не хочется усложнять, можно идти по такому порядку:
<header>для верхней части страницы: логотип, навигация, поиск.<footer>для нижней части: служебные ссылки, контакты, юридическая информация.<main>один раз для основного содержимого страницы.- Внутри
<main>использовать<article>для уникального и самого важного контента. <aside>выделять все, что связано с темой, но не является ядром страницы.<section>добавлять только там, где материал реально делится на самостоятельные подтемы.
Если структура уже разрослась и неясно, где именно начинается путаница, полезно посмотреть страницу в аудите. Например, SEO Analyzer помогает быстро сопоставить проблемы разметки с другими техническими сигналами.
Какие еще семантические теги реально полезны
Семантика не заканчивается на крупных блоках. Внутри текста тоже есть несколько полезных тегов:
<strong>для действительно важной информации<em>для смыслового акцента<mark>для выделения фрагмента<abbr>для аббревиатур с расшифровкой<figure>и<figcaption>для изображений, схем и примеров с пояснением<ul>и<ol>для логичных списков<table>и<caption>для табличных данных
Хорошо размеченная таблица дает поисковику гораздо больше ясности, чем просто набор строк. <caption> особенно полезен: он сразу объясняет, что именно показывают данные.
Вывод
Смысл семантических HTML5-тегов не в количестве. Смысл в том, чтобы убрать лишние догадки.
Когда поисковик без труда видит, где основной материал, где поддерживающие блоки и как страница делится по темам, ему проще правильно интерпретировать документ. А это уже напрямую влияет на качество индексации и понимание релевантности.
Поэтому правило на практике очень простое: тегов должно быть немного, но каждый из них должен стоять на своем месте.
Ресурсы
- Краткий обзор семантических элементов на W3Schools
- Инструмент для визуального просмотра HTML5-структуры страницы: Semantic HTML5 Viewer
- Для быстрой технической проверки сайта можно использовать SeoSpeedup
