Как оформлять статьи на сайте так, чтобы их читали

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

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

Согласно исследованию «How Users Read on the Web» от Nielsen Norman Group, пользователи чаще просто просматривают текст, а не читают его вдумчиво. Они быстро выхватывают ключевые слова, заголовки и элементы списков, чтобы найти нужную информацию.

Поведение при чтении на сайте напоминает форму буквы F и проходит 3 этапа:

1. сначала взгляд скользит по верхней строке;
2. затем движется по более короткой второй строке;
3. после — идет вниз вдоль левой части страницы.

Краткий, четко структурированный текст с подзаголовками, списками и выделением важных моментов помогает быстрее воспринимать информацию.

В статье мы рассмотрим только упаковку текста, а не его пользу.

Мы упоминали ранее, что экспертный контент должен быть в первую очередь качественным: легко восприниматься, нести ценность для читателя, быть достоверным и уникальным. Однако в этой статье мы рассматриваем только оформление и не будем касаться вопроса качества материала. А о том, как создавать качественный контент, можно почитать в нашей статье «Как создать качественный текст для сайта: практическое руководство».

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

Структура статьи играет решающую роль в её восприятии — отдельно рассмотрим разные структурные элементы.

Заголовок — первая точка касания читателя со статьей. Если он не заинтересует, то материал может остаться непрочитанным.

Пример заголовка в статье блога Serenity «SEO для интернет-магазина: как мы окупили затраты в 8 раз».

Хороший заголовок соответствует теме, содержит ключевые слова и привлекает внимание читателя.

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

Пример навигации в статье блога Tilda Education.

Можно также использовать другие способы навигации:

1. Закрепите шапку страницы, чтобы пользователь смог беспрепятственно перейти к форме обратной связи или номеру телефона.
2. Добавьте кнопку «наверх».
3. Продумайте перелинковку. Больше о ней рассказываем в разделе SEO.

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

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

Смысловые блоки делим на абзацы. Чтобы они были информативными, но не перегруженными, придерживаемся правила: «одна мысль — один абзац».

Больше о том, какой должна быть статья, мы писали в статье «Продвижение сайта статьями: экспертный контент, который работает».

Они помогают:

• показать последовательность действий;
• перечислить товары, ингредиенты в рецептах, задачи и много другое;
• оформить подборку или топ.

Пример списков в статье блога Serenity «Секреты успешного кейса от тим-лидера аккаунтов Serenity».

Благодаря этим элементам, удобно представить информацию ясно и доступно, упорядочивая ее в сознании пользователя, например:

• таблицы — для технических характеристик и сравнений;
• графики и диаграммы — для отслеживания динамики величин, их соотношений и взаимозависимости.

Пример графика в кейсе Serenity «SEO для интернет-магазина: как мы окупили затраты в 8 раз».

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

Пример цитаты в статье блога Serenity «Ашан: цифровые технологии и развитие клиентоцентричности».

Картинки, аудио или видео помогают визуализировать информацию: лучше один раз показать, чем несколько раз рассказать.

Пример визуализации информации в статье блога Serenity «Сергей Прусс: из чего состоит сильный маркетинг».

Отдельные фразы, цитаты удобно выделять одним из способов:

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

Шрифты и их размер играют важную роль в оформлении статьи. Простота, читаемость — главные критерии выбора. Важно, чтобы текст не вызывал усталость глаз.

Размер шрифта также имеет значение: слишком мелкий текст может быть трудночитаемым, а слишком крупный — перегружать страницу. Цвет шрифта также имеет значение.

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

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

Пример контрастной визуализации на странице услуги стратегии продвижения бренда на сайте Serenity.

Современные технологии позволяют добавлять интерактивные элементы в статьи, например, опросы, тесты или интерактивные графики.

Например, издание Quartz успешно интегрируют технологии в статьи и превращают чтение в увлекательный процесс. Они используют слайдшоу, опросы, диаграммы.

Пример интеграции слайд-шоу в статье издания Quartz.

Оптимизированная статья не только хорошо воспринимается поисковыми системами, но и читателями. Какие технические нюансы стоит учесть?

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

Ссылки необходимо правильно оформить: прикрепить к слову или предложению.

Пример перелинковки вы видите сейчас: мы ссылаемся на материал в нашем блоге о том, как можно увеличить трафик сайта.

Кросс-платформенная адаптация — мастхэв. Контент сайта должен отображаться на любом устройстве: от широкоформатных мониторов до компактных смартфонов.

Чтобы проверить, насколько страница адаптирована под мобильные устройства, посмотрите раздел «Удобство для мобильных» в Google Search Console.

Если сайт загружается долго, вероятно, статью не прочитают.

Лучше всего проверять, насколько быстро загружается страница через сервис PageSpeed Insights. Он покажет, если есть проблемы с загрузкой, и предложит способы решения проблемы.

Верстка страницы также важная часть оформления, которая влияет на восприятие статьи. Вот несколько деталей, которые помогут улучшить материал.

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

Пример визуализации статье блога Avito.

Комментарии — это важный канал общения с вашей аудиторией. На площадках vc.ru и habr.com, к примеру, активность в комментариях напрямую влияет на то, насколько высоко ваш материал поднимется в топе.

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

Пример в статье блога Serenity «Стратегия в таргете: 5 шагов к запуску рекламной кампании».

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

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

Привлечь внимание к перегруженному, не структурированному тексту будет сложно, даже если он экспертный и полезный.

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

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