Как красиво оформить статью на сайте: инструкция с примерами

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

Заголовок

Это то, что читатель видит в самом начале. Если заголовок не зацепил читателя, вряд ли он ее прочитает. 

Качественный заголовок должен:

• заинтересовать читателя;

Такой заголовок привлечет внимание, так как автор использует смысловой крючок — название одного из крупнейших маркетплейсов

• соответствовать теме контента;

• содержать основные ключевые слова;

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

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

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

Оглавление

Если статья получилась объемной и нужна навигация по тексту, стоит добавить оглавление. Этот элемент позитивно влияет на SEO показатели. От удобства навигации и качества оформления текстов зависит юзабилити сайта в целом. А это основной фактор, который влияет на ранжирование в поисковой выдаче. 

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

Пример удобного оглавления статьи с кликабельными подзаголовками

Метатеги

Чтобы ваш текст хорошо ранжировался в поисковых системах, нужно прописать Title и Description. В них нужно добавить ключевые слова. Чтобы подобрать ключевые фразы и слова, можно использовать сервисы Wordstat, Google Trends и другие SEO-инструменты.

Ключи делают метатеги релевантными поисковым запросам. Они помогают поисковой системе определить тематику ресурса и сортировать в выдаче.

 Как Title и Description отображаются в поисковой системе

Указание автора

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

Удачный пример оформления статьи-кейса в блоге Avito: интересный заголовок с конкретными цифрами, подробное описание эксперта

Рейтинг и счетчик просмотров

С помощью этого инструмента можно оценить популярность статьи. Большое количество просмотров и высокий рейтинг служат социальным доказательством. Читателей привлекает материал, который уже оценили другие пользователи.

Время на прочтение

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

Пример статьи с указанием времени на прочтение

Модуль комментариев

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

Похожие статьи

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

Кнопки шеринга

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

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

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

Пример расположения кнопки шеринга сразу после заголовка на сайте journal.tinkoff.ru

Как правильно оформить текст

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

Предложения и абзацы

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

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

Пример абзацев в статье MANGO OFFICE, которые кратко рассказывают о том, что такое квиз

Нумерованные и маркированные списки

Информация в списках легче воспринимается. С их помощью можно:

• показать последовательность действий;

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

• оформить подборку или топ.

Таблицы, графики, инфографика

Эти элементы позволяют подать информацию в простом и понятном виде, структурировать ее в сознании пользователя.

С помощью таблиц удобно описывать технические характеристики и проводить сравнения.

В этой статье MANGO OFFICE с помощью таблицы сравнивают инструменты маркетинга отношений

С помощью графиков и диаграмм удобно отслеживать изменение величин, их соотношение и взаимозависимость.

Врезки

С их помощью выделяют важные мысли и идеи в тексте. Для оформления врезок используют крупный шрифт, рамки и цветной фон.

В этой статье врезка выделена цветным фоном

Изображения, аудио и видео

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

Пример статьи со стоковой картинкой, которая не соответствует ее теме

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

Выделение текста

Текст можно выделять разными способами:

• Жирным выделяют конкретную мысль или вывод.

• Курсив лучше использовать для цитат или прямой речи, ссылок. 

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

• Маркер используют, чтобы выделить важную мысль.

• Шрифт другого цвета нужен для выделения критической информации или акцента.

Такое форматирование лучше использовать в небольшом количестве и не все вместе. Иначе текст будет плохо читаться.

Ссылки и акронимы

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

• Использовать анкоры — не нужно вставлять ссылку как текст, прикрепите ее к слову или предложению. 

• Подчеркивать или выделять цветом — без этого читатель может ее не найти.

• Анимировать — курсор должен меняться при наведении мыши на ссылку.

Акронимы применяются, чтобы что-то объяснить или расшифровать аббревиатуру. 

Смайлики или эмодзи

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

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

Вывод об оформлении статей на сайте

• Составьте цепляющий заголовок, чтобы читателю захотелось прочитать ваш текст. Добавьте кликабельный заголовок для удобства пользователя.

• Пропишите Title и Description, укажите автора, добавьте счетчики времени и просмотров. Все это повышает юзабилити и влияет на ранжирование сайта в поисковой системе.

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

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

• Выделяйте самое важное и интересное, вставляйте врезки или ссылки. Важно удерживать внимание на протяжении всей статьи.