Проблема не в HTML как таковом. Проблема в том, когда вся страница выглядит одинаково
Страницу можно целиком собрать на <div>, и технически все будет работать. Браузер ее отрисует. Пользователь, возможно, даже не заметит разницы. Но для поисковой системы шаблон из одних универсальных контейнеров означает лишнюю работу: ей приходится самой угадывать, где основной материал, а где меню, рекламные блоки, рекомендации и футер.
Именно здесь полезны семантические теги HTML5. <header>, <main>, <article>, <aside> и <section> нужны не для красоты кода, а для того, чтобы показать роль каждого участка страницы.
Когда структура размечена явно, у поисковика меньше шансов смешать главный материал с шаблонным шумом. Для SEO это особенно заметно на сайтах со сложными шаблонами, боковыми колонками и большим количеством повторяющихся модулей.
Почему это действительно влияет на SEO
Google и другие поисковые системы давно умеют читать HTML. Вопрос не в том, что они без этих тегов ничего не поймут. Вопрос в том, насколько однозначный сигнал вы им даете.
На одной странице часто живут сразу несколько типов контента:
- глобальная навигация,
- блоки "читайте также",
- промо-баннеры,
- боковые виджеты,
- ссылки в футере.
Если все это лежит вперемешку в нейтральных контейнерах, поисковику сложнее определить, какая часть страницы отвечает на основной запрос. Иногда он справляется без проблем. Иногда тематический фокус начинает размываться.
Представьте обзор BMW X5. Сам текст посвящен модели. Рядом стоят ссылки на Mercedes GLE, Audi Q7, сравнения и материалы по обслуживанию. Все это может быть полезно, но не должно конкурировать с самой статьей при определении основной темы URL.
Начните с крупных областей: <header>, <main> и <footer>
Первый уровень структуры довольно простой:
<header>для шапки сайта и основной навигации,<main>для уникального содержания этой страницы,<footer>для подвала и служебных ссылок.
1<body> 2 <header> 3 <!-- логотип, главная навигация, поиск --> 4 </header> 5 6 <main> 7 <!-- основной уникальный контент этой страницы --> 8 </main> 9 10 <footer> 11 <!-- копирайт, служебные ссылки, контакты --> 12 </footer> 13</body>
Есть два практических правила:
- На странице обычно должен быть только один
<main>. - Эти теги описывают смысл и структуру, а не внешний вид. За оформление по-прежнему отвечает CSS.
Обозначьте главный материал через <article>
Внутри <main> часто стоит сделать еще один шаг и явно выделить основной самостоятельный блок контента. Для этого и нужен <article>.
Обычно он подходит для:
- статьи в блоге,
- новости,
- обзора,
- большого гайда,
- содержательной страницы, которую можно читать отдельно от всего сайта.
Как правило, главный <h1> находится именно внутри него.
1<main> 2 <article> 3 <h1>BMW X5: подробный обзор и впечатления</h1> 4 <p>Основной текст материала...</p> 5 </article> 6</main>
Так вы прямо показываете поисковику, где находится главная единица контента на этой URL.
Дополнительные блоки лучше выносить в <aside>
Второстепенный контент не обязательно бесполезен. Часто он помогает, просто не должен становиться центром страницы. Для таких случаев подходит <aside>.
Типичные примеры:
- информация об авторе,
- короткие справки,
- список связанных материалов,
- рекламные блоки,
- боковые виджеты.
1<main> 2 <article> 3 <h1>BMW X5: подробный обзор и впечатления</h1> 4 <p>Основной текст...</p> 5 6 <aside> 7 <p>Короткая справка по поколению и базовым характеристикам.</p> 8 </aside> 9 </article> 10 11 <aside> 12 <h2>Похожие материалы</h2> 13 <ul> 14 <li><a href="/mercedes-gle-review">Обзор Mercedes GLE</a></li> 15 <li><a href="/audi-q7-review">Обзор Audi Q7</a></li> 16 </ul> 17 </aside> 18</main>
Так поисковику проще понять, что обзор BMW X5 является основной темой страницы, а боковой блок лишь дополняет ее.
Не превращайте <section> в модную замену <div>
Это одна из самых частых ошибок.
<section> уместен тогда, когда вы выделяете отдельную тематическую часть материала, обычно со своим подзаголовком. В длинном гайде это удобно и логично. Но оборачивать в <section> любой визуальный блок только ради "семантики" нет смысла.
1<article> 2 <h1>Как использовать семантические теги HTML5</h1> 3 4 <section> 5 <h2>За что отвечает main</h2> 6 <p>...</p> 7 </section> 8 9 <section> 10 <h2>Когда нужен article</h2> 11 <p>...</p> 12 </section> 13</article>
Простое правило: если блоку не нужен собственный понятный подзаголовок, скорее всего, ему не нужен и <section>.
Что проверить в шаблонах в первую очередь
Если вы хотите быстро оценить семантическую структуру страницы с точки зрения SEO, начните с этого списка:
- есть ли на странице ровно один
<main>, - находится ли основной ответ на запрос внутри
<article>, - отделены ли сайдбар, промо и связанные ссылки от главного материала,
- используется ли
<section>только там, где есть отдельные подтемы, - совпадает ли семантический порядок с нормальным порядком чтения,
- применяются ли те же правила на статьях, листингах, лендингах и других типах страниц.
На крупных сайтах такие ошибки почти всегда повторяются на уровне шаблона. Исправление одного паттерна может улучшить сразу десятки или сотни URL.
Вывод
Семантический HTML5 не заменит качественный контент, точное попадание в интент и хорошую внутреннюю перелинковку. Но он помогает поисковику быстрее понять, где на странице находится основной ответ, а где только навигация, контекст и шаблонный фон.
Если страница уже получает показы, но результат все равно слабее ожидаемого, этот слой структуры стоит проверить отдельно. В SeoSpeedup Site Audit такие технические перекосы обычно всплывают довольно быстро.
