Верстка статьи для сайта: зачем она бизнесу
Статья на сайте компании нужна не ради самого текста, а ради обращения: звонка, заявки в Telegram, заказа. Человек, который пришёл из поиска или по ссылке из Instagram, не читает подряд. Он пробегает глазами подзаголовки и решает, есть ли здесь ответ. Если перед ним сплошное полотно текста, он закроет вкладку, какой бы полезной ни была статья.
Поисковые системы тоже опираются на структуру. По тегам они понимают, где название, где разделы, где перечисление. Короткий ответ под понятным подзаголовком проще выделить в выдаче, хотя попадание в особые блоки никто не гарантирует.
Заголовки: настоящие теги, а не крупный шрифт
Частая ловушка: в редакторе строку сделали жирной и увеличили — выглядит как заголовок, а для поисковика это обычный абзац. Заголовок должен быть оформлен соответствующим тегом.
- H1 — один на странице, это название статьи с ключевой фразой
- H2 — основные разделы, каждый отвечает на отдельный вопрос
- H3 — подразделы внутри H2, только когда они действительно нужны
- Уровни не пропускаем: после H2 не ставим сразу H4
- Теги заголовков не используем для подписей и надписей на кнопках
Абзацы, списки и выделения
Один абзац — одна мысль, обычно несколько предложений. На экране телефона длинный абзац превращается в стену. Главное ставьте в начало, пояснения — после.
Нумерованный список подходит для шагов, где важен порядок, например для оформления заказа. Маркированный — для вариантов, признаков, преимуществ. Пункты пишите в одной грамматической форме. Но не превращайте всю статью в списки: связки и объяснения должны остаться в тексте.
Жирным выделяйте только ключевые мысли: если жирным набрана половина абзаца, акцента нет. Курсив оставьте для терминов, а подчёркивание — для ссылок.
Таблицы и изображения
Таблица нужна, когда вы сравниваете: материалы, способы доставки, условия оплаты через Click и Payme. Делайте её настоящей HTML-таблицей с понятной шапкой, а не скриншотом: текст внутри картинки поисковик не прочитает, а на телефоне его не увеличить. Столбцов должно быть немного, а широкую таблицу стоит поместить в блок с горизонтальной прокруткой.
Картинку ставьте рядом с текстом, к которому она относится, в alt описывайте содержимое, а подпись добавляйте, если нужно пояснение. Свои фото и схемы убедительнее стоковых: снимок вашего склада или шоурума в Ташкенте говорит больше. Сжимайте файлы и задавайте размеры, иначе страница будет «прыгать», а на медленном мобильном интернете в регионах тяжёлые изображения откроются не сразу.
Мобильная версия и оглавление
Многие откроют статью с телефона, нередко во встроенном браузере Telegram или Instagram. Перед публикацией проверьте страницу сами:
- шрифт читается без увеличения
- таблицы и картинки не выходят за край экрана
- ссылки и кнопки достаточно крупные для пальца
- всплывающие окна не закрывают текст сразу при входе
Частые ошибки
Эти ошибки встречаются чаще всего, и каждая исправляется без переписывания текста.
- Заголовки сделаны жирным шрифтом без тегов
- Таблица вставлена картинкой
- Текст перенесён из Word вместе со стилями, и в коде осталось много мусора
- Длинные абзацы без подзаголовков и списков
- Изображения тяжелее всего остального на странице
Когда проблема не в авторе, а в сайте
Иногда редактор CMS не даёт поставить нормальный заголовок, таблица ломает страницу, а врезки выглядят чужеродно. Тогда дело в шаблоне, и решать это нужно на уровне разработки: шаблон статьи, стили таблиц и врезок, адаптивность под телефон. Лучше заложить это при создании сайта, чем переделывать готовые материалы.
Мы в markdev делаем сайты под ключ в Узбекистане, включая блоги и шаблоны статей. Если хотите обсудить, как оформить ваши материалы или доработать существующий сайт, напишите нам — разберём задачу.
Частые вопросы
Сколько заголовков H1 должно быть в статье?
Один. Он содержит название статьи и ключевую фразу. Разделы внутри оформляйте тегами H2, а подразделы — H3.
Можно ли вставлять таблицу картинкой?
Лучше не стоит. Поисковик не прочитает текст внутри изображения, а на телефоне его трудно увеличить. Используйте обычную HTML-таблицу с горизонтальной прокруткой на узких экранах.
Нужно ли оглавление в каждой статье?
Только в длинных. Если в материале несколько крупных разделов, ссылки вверху помогают быстро перейти к нужному месту. В коротком тексте оно лишнее.
Как проверить верстку после публикации?
Посмотрите структуру H1–H3 в расширении для браузера или в коде: она должна читаться как оглавление. Затем откройте статью с телефона на мобильном интернете.
Разберём вашу задачу бесплатно
Оставьте контакт — за 15 минут созвона покажем, где теряются заявки и что сделать в первую очередь.