В статье «для дизайнеров и верстальщиков» описываются принципы вёрстки страниц, использование которых будет оказывать положительное влияние на продвижение страницы в поисковых системах и нейросетях.
Вопросы о размете Schema.org я (пока!) оставляю за рамками статьи (TLDR: использовать её обязательно, при малейшей возможности).
Принципы перечисляются в произвольном порядке.
Важно понять, что у Яндеса и Google нет человеческих глаз. Поисковики оценивают «привлекательность» страницы по её исходному коду, который мы и будем обсуждать.
Я понимаю, что какие-то пункты может не получиться выполнить. Но, надо стараться
Порядок заголовков H1…H6 на странице
Необходимо охранять дерево вложенности H1-H6, не пропускать уровни при вёрстке. Первый заголовок H в коде страницы обязательно должен быть H1.
Несмотря на то, что HTML5 допускает множество заголовков H1 на странице (например, внутри каждого <article>), SEO-консенсус состоит в том, что <H1> на странице должен быть один.
Используйте минимум 12 кегль у текста на смартфоне/ПК
Меньший кегль в любом месте страницы даст поисковикам повод считать, что текст на сайте сложно читать. Если ваша аудитория 40+, подумайте над 13 или 14 кеглем.
Используйте контрастный текст и фон
Ещё «в бородатые нулевые» так пытались спам-контент на странице «скрыть». Поэтому, поисковики очень трепетны к видимости текста. Если вам уж очень надо, чтобы текст был плохо виден, обсудите это с SEO-шником.
Функциональность Hero-экрана
На ПК/смартфоне первый экран любой страницы должен решать бизнес-функцию (карточка товара, заявка, форма обратной связи)! Все «рекламные» и прочие (декоративные) элементы убирать ниже.
Если страница информационная, то в начале разместите всё самое главное: резюме, выводы, содержание и т.п.
Отсутствие горизонтальной прокрутки
Не должно быть «постоянной» горизонтальной прокрутки на смартфоне. Если уж очень надо, оформите прокрутку нужной «широкой таблицы» (через JS, или типа того). Про ПК писать не буду, там места по горизонтали и так хватает.
Аналогичный Z-порядок элементов DOM в коде и на экране
(один из трудных пунктов)
Порядок верстки в HTML-коде должен соответствовать порядку элементов на экране. Не желательно переставлять их через CSS/JS. Более важные по смыслу элементы должны располагаться выше в коде.
Меню и прочие элементы, выглядящие по-разному для ПК/смартфона, по-возможности закодировать единым кодом, чтобы они не задваивались.
Типичный пример: меню на десктопе и «бургер-меню» на смартфонах.
Используйте динамические CSS, или JS, для управления визуалом таких элементов.
Семантическая вёрстка
Появившаяся в HTML5 семантическая вёрстка, наконец-то, позволяет выделить смысловые части на странице. Это обязательно надо использовать:
- общая структура любой страницы:
<header>-<main>-<footer> - внутри
<main>не-автономные смысловые блоки (те, которые нельзя отдельно друг от друга использовать) — делать в виде<section>. Автономные (например, карточки объектов/товаров в каталоге) обёртывать в<article>. - любую навигацию — в
<nav>. - формы обратной связи (и всякие “около-рекламные” вставки) — в
<aside> - стараться уменьшать число
<div>-ов, которые не обернуты в семантические тэги, насколько это возможно.
Этот список — просто примеры того, что полезного для SEO можно делать с семантической вёрсткой. Если у вас есть силы, предложите SEO-шнику и другие варианты.
Пора думать о нейросетях
Не стоит “размазывать” похожую по смыслу информацию по разным частям страницы: взяли блок, вписали его в <article>/<section>, внутри — заголовок <h2> (<h3> и т.д.) и инфа максимально “без воды” и “в одном месте”. Нейронки мыслят чанками — кусками текста длиной 512-1014 символа. Чем меньше чанков занимает «одна сущность» в коде HTML-страницы, тем лучше эта сущность распознается нейросетью.
Свойства и характеристики
Любые свойства и характеристики лучше верстать через <table>. Даже, если они не-таблицей на экране выглядят. Столбец “со значениями” и “с названиями” можно даже именовать, вроде “value” и “parameter” ).
Несмотря на то, что для пары «параметр-значение» есть семантические HTML5-тэги <dl>-<dd>-<dt> (которые, тем не менее, вполне допустимо использовать), вёрстка через <table> обладает большей точностью распознавания в современных LLM-моделях (по данным исследования Claude на август 2025 г.).
Пытался достучаться до верстальщиков
Алексей, SEO-падаван
При подготовке статьи использовались:
- спецификация HTML5;
- исследования web, проведённые нейросеткой Claude
