Вёрстка статьи: подзаголовки, списки и таблицы для читателя и поиска

Вёрстка статьи — это то, как текст оформлен на странице: заголовки, абзацы, списки, таблицы, картинки. Люди в интернете сначала сканируют страницу глазами и только потом решают, читать ли. Поисковики, в свою очередь, используют HTML-разметку, чтобы понять структуру и выделить фрагменты для ответов в выдаче. Хорошая вёрстка работает на обе задачи.

Иерархия заголовков

• H1 — один на странице, название статьи
• H2 — основные разделы
• H3 — подразделы внутри H2
• H4 и ниже — редко, в сложных инструкциях

Заголовки должны быть настоящими тегами, а не просто жирным крупным текстом. Многие визуальные редакторы позволяют сделать текст крупным без тега заголовка — для поисковика такой «заголовок» обычный абзац.

Не используйте теги заголовков для оформления: например, H3 для подписи под кнопкой. Это ломает структуру.

Абзацы

Абзац — одна мысль. Три-пять предложений — комфортный размер для экрана телефона. Стена текста без разрывов отпугивает даже заинтересованного читателя.

Списки

Маркированный список — для перечислений без порядка: преимущества, признаки, варианты. Нумерованный — для шагов и последовательностей. Поисковики могут выводить списки в расширенных ответах, особенно для инструкций.

Не превращайте весь текст в списки: объяснения и связи между пунктами всё равно нужны.

Таблицы

Таблица удобна для сравнения: характеристики моделей, отличия тарифов связи, сравнение материалов. Делайте её настоящей HTML-таблицей, а не картинкой — текст из картинки поисковик не прочитает, а на телефоне её не увеличить. На мобильных широкие таблицы должны прокручиваться горизонтально внутри блока, не ломая страницу.

Изображения

• Ставьте изображение рядом с текстом, к которому оно относится
• Добавляйте подписи, если картинка требует пояснения
• Заполняйте alt описанием содержимого
• Используйте собственные фото и схемы, где возможно
• Сжимайте файлы и задавайте размеры, чтобы страница не прыгала при загрузке

Выделения

Жирным выделяйте ключевые мысли, которые читатель должен увидеть при беглом просмотре. Если выделено всё, не выделено ничего. Курсив — для терминов и примеров. Подчёркивание в вебе ассоциируется со ссылками, его лучше не использовать для акцентов.

Оглавление

Для длинных статей оглавление в начале со ссылками на разделы помогает читателю сразу перейти к нужной части. Google иногда показывает такие ссылки на разделы под результатом в выдаче.

Врезки и блоки

Выносите в отдельные блоки важные предупреждения, советы, определения. Визуально они должны отличаться от основного текста, но не выглядеть как реклама — иначе их пропустят.

Мобильная версия

Многие читатели откроют статью с телефона. Проверьте:

• размер шрифта читаемый без увеличения
• таблицы и изображения не выходят за край экрана
• ссылки и кнопки достаточно крупные для нажатия пальцем
• всплывающие окна не закрывают текст сразу при входе

Частые ошибки

1. Заголовки сделаны жирным шрифтом без тегов
2. Таблица вставлена картинкой
3. Текст скопирован из Word вместе со стилями, и разметка страницы засорена
4. Длинные абзацы без единого списка
5. Изображения весят больше, чем весь остальной контент страницы

Проверка готовой вёрстки

После публикации откройте статью в режиме просмотра кода или в расширении для проверки заголовков и посмотрите структуру H1–H3. Она должна читаться как оглавление статьи. Затем откройте страницу с телефона на мобильном интернете — так её увидит значительная часть читателей.

Итог

Вёрстка статьи — не украшение, а способ донести ответ. Правильная иерархия заголовков, короткие абзацы, списки и таблицы делают текст удобным для людей и понятным для поисковиков. Если в вашей CMS сложно верстать статьи правильно, это стоит обсудить с разработчиком.