Как оформлять статьи на сайте

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

Что на самом деле решает оформление

Читатель не читает — он сканирует. Заходя на страницу, человек за несколько секунд решает, есть ли здесь ответ на его вопрос, и делает это по внешним признакам: видны ли подзаголовки, есть ли списки и таблицы, насколько плотный текст, сколько до конца. Если за эти секунды он не находит зацепок, он возвращается в выдачу. Такой возврат — самый дорогой исход из возможных: вы потратились на текст, привели человека и потеряли его до первого абзаца.

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

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

Структура заголовков

Заголовки — это скелет материала и одновременно оглавление, которое читатель видит при беглом просмотре. Правила простые, но нарушаются почти везде.

Заголовок первого уровня на странице один, и это название статьи. Дальше идут разделы второго уровня, внутри них при необходимости — третьего. Уровни не перепрыгиваются: сразу после раздела не должно идти подпункта четвёртого уровня. Заголовки не используются для оформления: если нужно выделить фразу крупным шрифтом, это делается стилями, а не разметкой заголовка, иначе структура документа рассыпается.

По содержанию: заголовок раздела должен быть информативным сам по себе. Читатель, который просмотрел только подзаголовки, обязан понять, о чём материал и что он получит. «Немного теории» и «Общие сведения» этому не отвечают. «Как определить регион сайта» — отвечает. Хорошая проверка: выпишите все заголовки подряд в столбик и прочитайте. Если получился внятный конспект — структура в порядке. Если набор абстракций — переписывайте.

Оптимальный интервал между подзаголовками — примерно 1 200–2 000 знаков. Реже — текст превращается в полотно, чаще — материал рассыпается на обрывки и выглядит как список тезисов.

Абзацы, списки и ритм

Абзац — единица мысли и единица чтения одновременно. Комфортный размер для веба — два-четыре предложения, до 400–600 знаков. Абзац на тысячу знаков в десктопной вёрстке выглядит терпимо, а на смартфоне занимает весь экран и читается как стена. Первое предложение абзаца должно нести его основную мысль: тогда материал читается даже по первым строкам.

Ритм важнее, чем кажется. Пять абзацев подряд одинаковой длины усыпляют. Чередуйте: длинный аналитический абзац, короткий вывод в одну строку, список, снова текст. Однострочные абзацы — сильный инструмент акцента, но работают только пока их немного.

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

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

Таблицы: когда они сильнее текста

Таблица нужна там, где сравниваются несколько объектов по нескольким параметрам. Если параметр один — хватит списка. Если объект один — хватит абзаца. Признак того, что нужна таблица: в тексте появляются конструкции «а вот у второго варианта то же самое, но…» — это верный сигнал, что читатель уже потерял нить и ему нужна сетка.

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

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

Картинки, схемы и подписи

Тип иллюстрации	Когда работает	Типичная ошибка
Скриншот интерфейса	Инструкции, настройки, разбор сервисов	Снимок целого экрана без выделения нужного места
Схема процесса	Объяснение последовательности или связей	Схема перегружена, читается только в увеличении
График	Динамика, сравнение величин	Нет подписи осей и периода, непонятен источник
Фотография работ	Подтверждение реальности, портфолио	Сток вместо собственных фото
Иллюстрация «для красоты»	Практически никогда в экспертном тексте	Занимает экран и отодвигает содержание вниз

Три технических требования, которые важнее художественных. Первое: подпись под изображением. Её читают чаще, чем основной текст, и она должна не описывать очевидное, а добавлять смысл — что именно здесь видно и почему это важно. Второе: атрибут alt с осмысленным описанием, без перечисления ключевых слов. Третье: вес. Картинка на 3 мегабайта убивает скорость загрузки страницы, а скорость влияет и на поведение, и на ранжирование. Разумный ориентир — ширина около 1 200 пикселей, современный формат, вес до 200–300 килобайт, отложенная загрузка для всех изображений ниже первого экрана.

И важное про количество: одна содержательная схема полезнее пяти декоративных фотографий. В экспертном материале иллюстрация должна что-то объяснять, иначе она просто увеличивает длину страницы и отодвигает ответ.

Оглавление и навигация внутри материала

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

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

Отдельно про навигацию по смыслу: в конце разделов уместны короткие резюме в одну-две строки, а в конце материала — блок с выводами. Это не украшение, а функциональность: значительная часть читателей начинает знакомство с материалом именно с конца, и хороший блок выводов часто решает, будут ли читать всё остальное.

Читаемость на смартфоне

Большая часть читателей блога приходит с телефона, а верстают материалы, глядя в широкий монитор. Отсюда почти все проблемы. Ниже — параметры, по которым я проверяю шаблон статьи.

Параметр	Рабочее значение	Что происходит при нарушении
Размер основного шрифта	16–18 пикселей на мобильном	Читатель увеличивает масштаб и уходит
Межстрочный интервал	1,5–1,7 от размера шрифта	Строки слипаются, глаз теряет строку
Длина строки	50–75 символов на десктопе	Слишком широкая колонка утомляет
Контраст текста и фона	Не ниже 4,5:1	Светло-серый текст не читается на солнце
Отступ между абзацами	Не меньше половины высоты строки	Абзацы сливаются в полотно
Поля страницы на мобильном	16 пикселей и больше	Текст упирается в края экрана
Горизонтальная прокрутка	Отсутствует у страницы, допустима внутри таблиц	Сайт воспринимается как сломанный
Всплывающие элементы	Не перекрывают текст при чтении	Баннер закрывает половину экрана, читатель уходит
Начало содержания	Первый абзац виден на первом экране	Огромная картинка отодвигает ответ вниз

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

Оформление, поведенческие факторы и ИИ-ответы

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

Отдельная и относительно новая история — попадание в ответы, которые генерируют поисковые и языковые системы. Здесь оформление внезапно стало техническим фактором. Материал, из которого легко вытащить готовый фрагмент, цитируется чаще. Что этому помогает:

• Прямой ответ в начале раздела. Первый абзац после подзаголовка отвечает на вопрос заголовка целиком, без разгона и без отсылок к предыдущим разделам.
• Заголовки в форме вопроса или задачи. Они совпадают с формулировками, которыми пользуются люди.
• Таблицы и списки настоящей разметкой. Структурированные данные извлекаются гораздо надёжнее сплошного текста.
• Конкретика: числа, сроки, диапазоны цен, названия сервисов. Абстрактные рассуждения не цитируют, потому что из них нечего взять.
• Определения одной фразой. Короткая формулировка «это — то-то» имеет хорошие шансы стать цитируемым фрагментом.
• Самодостаточные разделы. Фрагмент должен быть понятен вне контекста всей статьи.
• Блок выводов в конце. Сжатая выжимка — удобный источник для краткого ответа.

Обратная сторона: материалы без структуры, с длинными вводными и без конкретики в такие ответы не попадают почти никогда, даже если по сути они сильнее. Это тот случай, когда вёрстка напрямую влияет на видимость.

Частые ошибки и проверка перед публикацией

Элемент	Зачем нужен	Как ошибаются
Первый абзац	Удержать читателя и дать суть	Начинают с истории вопроса и общих слов
Заголовки разделов	Навигация и структура для поиска	Абстрактные названия, пропуск уровней, заголовки ради шрифта
Абзацы	Ритм и лёгкость чтения	Полотна по тысяче знаков без разбивки
Списки	Быстрое считывание перечислений	Списком оформляют связный текст, теряя логику
Таблицы	Сравнение по нескольким параметрам	Верстают картинкой или делают восемь колонок
Иллюстрации	Объяснить то, что сложно словами	Декоративный сток вместо схем, тяжёлые файлы
Подписи к изображениям	Читаются чаще текста, добавляют смысл	Отсутствуют или дублируют очевидное
Выделения жирным	Расставить акценты при сканировании	Выделена половина текста, акценты обесценены
Оглавление	Навигация в длинном материале	Ставят в коротких статьях, ломают якоря при правках
Блок выводов	Резюме для тех, кто читает с конца	Пересказ вступления вместо конкретики
Типографика	Опрятность и доверие к тексту	Дефисы вместо тире, кавычки-лапки, заголовки капсом
Мобильная вёрстка	Основная часть аудитории	Проверяют только на широком мониторе

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

Оформление и структуру статей я закрываю при подготовке SEO-текстов. Проверить текущие материалы сайта поможет бесплатный аудит.

Коротко

• Читатель сканирует, а не читает: за несколько секунд он решает по внешним признакам, есть ли здесь ответ.
• Оформление не спасёт слабый текст, но плохая вёрстка гарантированно топит сильный.
• Один заголовок первого уровня, разделы через каждые 1 200–2 000 знаков, заголовки информативны сами по себе; проверка — выписать их в столбик.
• Абзац — два-четыре предложения, до 400–600 знаков, главная мысль в первом предложении; ритм чередуется.
• Списками оформляются настоящие перечисления, пять-девять пунктов; сплошной текст в виде списка теряет логику.
• Таблица нужна при сравнении нескольких объектов по нескольким параметрам: две-пять колонок, настоящая разметка, прокрутка внутри блока на мобильном.
• Иллюстрация должна объяснять, а не украшать: подпись, осмысленный alt, вес до 200–300 килобайт, отложенная загрузка.
• Оглавление — от восьми тысяч знаков, на якорях, свёрнутое на мобильном.
• Мобильные параметры: шрифт 16–18 пикселей, интервал 1,5–1,7, контраст от 4,5:1, никакой горизонтальной прокрутки страницы.
• В ИИ-ответы попадают материалы с прямым ответом в начале раздела, вопросительными заголовками, таблицами, конкретными числами и самодостаточными разделами.

Если нужно раскрутка сайта в Яндексе — помогу вывести сайт в топ Яндекса и удержать позиции.