№ 1 по эффективности в рейтинге seo компаний в Санкт-Петербурге за 2018

Все статьи
SEO-блог
SEO-анализ сайта
Как повысить конверсию
Юзабилити сайта

Оформление статей на сайте

21.02.2020

Азы оформления статей на сайте

Скажем сразу, что если Вы читаете данный текст, то Вам точно может быть полезен материал о том, как писать SEO-статьи. Здесь же мы поговорим больше об оформлении, чем о наполнении.

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

Основное правило - нет кирпичам текста.

Старайтесь не допускать более 5 строк голого текста подряд.

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

Визуальное оформление статьи

Визуальное оформление статьи

Как задавать заголовки

Совет 1

С точки зрения SEO-продвижения важно использовать ключевые слова в заголовках.

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

Совет 2

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

С точки зрения SEO важно, чтобы заголовки были не просто выделены бОльшим шрифтом. Нужно их размечать <h1>, <h2>...

При этом должна быть правильная структура:

  • <h3> не может идти после <h1>;
  • <h2> не может быть выше <h1> и так далее.

Использование изображений в статьях

Как мы уже разобрались ранее, статья не должна быть голым текстом. Её обязательно нужно разбавлять визуальными элементами, в частности, картинками. Вот несколько особенностей, которые обязательно нужно учитывать:

  • Заполняйте теги ALT и title при добавлении картинок;
  • Избегайте изображений крайне низкого качества;
  • Сжимайте картинки, это позволит странице быстрее грузиться.
Мне нужно больше картинок

Мне нужно больше картинок

Цитаты в оформлении статьи сайта

Не скупитесь на различные визуальные элементы, разбирающие текст, такие как, например, данная цитата 🙂

В такой тег не обязательно заключать изречения великих людей. Можно просто выделять:

  • Ключевые тезисы в тексте;
  • Интересные факты;
  • Примечания или советы;
  • Призывы к действию и многое другое.

Использование видео в статьях

Последние тенденции в SEO говорят о необходимости использования видео-контента для лучшего ранжирования.

Поэтому старайтесь по-максимуму добавлять видеоролики в статьи.

У Вас есть инструкция в тему - супер используйте её в статье.

Есть видео, показывающее Вашу авторитетность - добавьте его в текст.

О типографской верстке

С общими моментами по оформлению статей разобрались. Теперь поговорим о типографской вёрстке.

Ну, верстка и верстка

Ну, верстка и верстка

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

Заявка на консультацию по Вашему сайту

Шрифт

Используйте в статье 1-3 шрифта. Не более.

Также обращайте внимание на тип шрифта. Это очень важно для восприятия текста.

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

Почему так:

  • Шрифт с засечками помогает акцентировать внимание на каждой букве по отдельности;
  • Замедляет скорость чтения;
  • Побуждает читать, а не просто сканировать текст.
Шрифт с засечками для заголовков

Шрифт с засечками для заголовков

Шрифт без засечек лучше использовать для основного текста.

Почему так:

  • Такой текст облегчает чтение с монитора;
  • Повышает скорость чтения;
  • Позволяет сделать текст более читабельным.
Шрифт без засечек для основного текста

Шрифт без засечек для основного текста

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

Размер шрифта

Размер шрифта выбирается, исходя из общего дизайна страницы сайта.

Для основного текста рекомендуется выбирать 14-18 шрифт. Для заголовков он должен быть в 2 раза больше.

Длина строки

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

Оптимальной является длина строки в 60 символов.

Интерлиньяж

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

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

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

Интервалы между абзацами

Отступ между абзацами должен быть примерно в 1,7-2 раза больше высоты основного текста.

Такой текст будет визуально проще восприниматься.

Отступ между абзацами

Отступ между абзацами

Интервалы между заголовком и абзацами

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

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

Отступ между заголовком и абзацами

Отступ между заголовком и абзацами

Ширина картинок

Картинки не должны быть шире текста. Нужно стремиться к тому, чтобы чтобы изображения были одной ширины с текстом.

Да, не всегда будет получаться растянуть картинку на ширину текста. С особо маленькими изображениями этого делать не нужно. Однако если можно увеличить иллюстрацию на 10-20%, чтобы она стала такой же ширины, как текст, то этим лучше не пренебрегать.

Отступы по ширине и выравнивание текста

Размещайте текст по центру страницы. Не забывайте оставлять отступы по краям текстового поля (слева и справа).

Если разделить экран на 4 равных столбца, то текст должен занимать ширину 2х центральных столбцов.

Не размещайте сайдбар слишком близко к тексту, оставьте больше "воздуха", тогда статья будет проще для восприятия.

При этом не выравнивайте текст по ширине или по центру.

Выравнивайте текст по левому краю.

Выравнивание текста

Выравнивание текста

Правило внутреннего и внешнего

Что-то большее всегда состоит из чего-то меньшего:

  • текст состоит из строк;
  • строки - из слов;
  • слова - из букв;
  • а буквы - из отдельных штрихов.

На основе этого формируется основное правило типографики:

Внутреннее должно быть меньше, либо равно внешнему.

Речь о том, что:

  • отступы между штрихами в конкретной букве не должны быть больше отступов между самих букв;
  • отступы между буквами не должны быть больше отступов между словами;
  • отступы между словами не должны быть больше отступов между строками и т.д.

Поэтому всегда учитывайте правило "Внутреннего и внешнего" при формировании дизайна текстов на сайте.

Основные тезисы, которые нужно запомнить

  • Прописные буквы нужно разрежать;
  • Строчные буквы нельзя разрежать;
  • Разрядка прописных букв должна быть меньше междустрочного интервала;
  • Пробел между строками прописных букв должен быть НЕ меньше высоты самой буквы;
  • Междустрочное расстояние должно быть больше меж­с­лов­ных пробелов;
  • Чем длиннее строка, тем должно быть больше междустрочное расстояние;
  • Междустрочное расстояние не должно быть больше внешних полей;
  • Элементы списка должны иметь между собой дополнительный отступ - больше междустрочного расстояния.

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

Руководитель проекта
Технический специалист

Заказать звонок руководителя проектов

Консультация технического специалиста

Тэги статьи

seo блог продвижение сайтов
аудит конверсии сайта
лучшее продвижение сайтов
оформление статей на сайте
оформление текста на сайте
продвижение сайта 2019
продвижение сайта в гугл
требования к оформлению статьи на сайт

Самые читаемые статьи

по интернет-маркетингу:

Читать

Эксперимент по выводу страниц в ТОП

Читать

Обязанности интернет-маркетолога

Читать

Интеграция Битрикс24 с сайтом

Читать

Оформление статей на сайте

Читать

Продвижение сайта детских товаров — кейс

Читать

SEO продвижение сайта на Bitrix

Читать

Настройка целей в Яндекс Метрике

Читать

Настройка целей в Гугл Аналитикс

Читать

Как писать SEO-статьи

Читать

Как сделать карту сайта — создание sitemaр.xml и html-карты

Читать

Продвижение сайта в регионах

Читать

Перелинковка сайта — самое полное руководство

Читать

Особенности продвижения интернет-магазина бытовой техники

Читать

Продвижение сайтов недвижимости

Читать

Продвижение сайта строительной компании

Читать

Продвижение сайта турфирмы

Читать

Продвижение сайта доставки еды

Читать

Продвижение сайта по продаже авиабилетов

Читать

Продвижение автомобильных сайтов

Читать

Продвижение сайта ДЖУМЛА

Читать

Кейс по контекстной рекламе магазина спорттоваров

Читать

Продвижение магазина мебели

Читать

Эффективное продвижение сайтов по ремонту квартир

Читать

Продвижение сайта B2B. Кейс по сайту лазерных станков

Читать

Как правильно прописать title на сайтах — 21 совет

Читать

Продвижение сайта на MODX Revolution

Читать

Как увеличить конверсию сайта – 32 способа

Читать

Продвижение сайтов OpenCart

Читать

Как управлять маркетологом

Читать

Анализ юзабилити сайта. Доскональный разбор главной страницы

Читать

Сео-аудит с расчетом рентабельности Ваших вложений!

Читать

Выход на зарубежный рынок. Кейс по рекламе на Ютьюбе и Фейсбуке!

Читать

Продвижение сайтов на Вордпресс. Советы SEO-специалиста

Читать

Как сделать правильную структуру сайта для seo

Читать

Перенос сайта на другой домен для WordPress и других CMS

Читать

Как повысить конверсию сайта? Готовая схема проработки посадки под вашу аудиторию!

Читать

Увеличение конверсии сайта на 50% благодаря читабельному тексту!

Читать

Повышение конверсии сайта — 3 визуальных правила первого экрана!

Читать

Продающий текст для карточки товара интернет-магазина: 3 подхода

Читать

Как правильно писать тексты копирайтеру. Грамотная разметка кодом

Читать

Как создать идеальную карточку товара для интернет магазина?

Читать

Санкции на сайте! Как про это узнать и вывести из-под санкций с первого раза!

Читать

Что такое мета тег — простое доступное объяснение с 1 главным правилом!

Читать

Как заказать эффективный seo аудит, не разбираясь в сео?

Читать

Анализ скорости загрузки сайта. Как выявить и решить проблему

Читать

Технический SEO-аудит сайта — как его провести. Часть 1.

Читать

Как сделать перенос сайта

Читать

Сервисы для проверки скорости загрузки сайта. Что не так c Google Page Speed Insights?

Читать

От чего зависит скорость загрузки сайта

Читать

Редизайн сайта — как перенести сайт без потери позиций

Читать

Как раскрутить блог и получать с него конверсии!

Читать

Seo продвижение сайта. Как качественно проработать семантику.

Читать

Seo оптимизация блога. Идеальный шаблон страницы для вывода в топ!

Читать

Стратегия продвижения сайта на примере компании по продаже бизнеса.

Читать

Как выбрать адрес сайта

Читать

Стратегия seo продвижения. Анализируем конверсионные запросы в сео!

Читать

Семантическое ядро сайта — как его составить и сделать кластеризацию?

Читать

Как Яндекс.Директ усиливает SEO

Читать

Seo продвижение по запросам. Как обойти конкурентов на мелочах!

Читать

Поисковое продвижение веб сайтов

Читать

Размещение SEO статей на сторонних ресурсах

Читать

Как купить ссылки для продвижения сайта. Несколько простых советов

Читать

Seo анализ сайта

Читать

Как узнать количество посещений сайта в Яндекс.Метрике

Хотите мы напишем статью по продвижению сайта с ответом на Ваш вопрос?

Хочу статью!
РАЗДЕЛЫ БЛОГА
Все статьи
SEO-блог
SEO-анализ сайта
Как повысить конверсию
Юзабилити сайта
SEO АУДИТ
в подарок
до конца месяца
Узнать детали
Разбор кейса
выход на
зарубежный
рынок
Узнать детали
Как управлять
маркетологом
...
Инструкция
по применению
Узнать детали
Разбор кейса
Перенос сайта
без потери
позиций
Узнать детали

Получайте бесплатные уроки и фишки

Подпишитесь сейчас

Ваши данные в сохранности