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

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

Я не буду обсуждать здесь требования, которые должны быть выполнены еще копирайтерами и озвучены в моей редакционной политике (абзацы, списки и так далее). Речь только о финальном оформлении. И сразу же хочу отметить, что для информационных сайтов на WordPress (а именно по отношению к ним и наиболее актуальная данная статья) абсолютный мастхэв — это плагин Shortcodes Ultimate. Его суть в том, что вы можете моментально сгенерировать какой-нибудь код, который пригодится при оформлении текста. После установки плагина при редактировании поста появляется такая кнопка:

А при ее нажатии всплывает такое окно:

И вы можете вставлять любой из этих элементов. Имеется множество настроек и предпросмотр. Если говорить о других решениях для форматирования, то есть также сервис по оформлению текстов от Темы Лебедева — можно поиграться и выделить что-либо полезное для себя. Впрочем, перейдем к обзору элементов оформления вообще.

Заголовки

Нужно, чтобы даже пользователь мог различить h1 и h2. Если они красиво оформлены — отдельным шрифтом с засечками, с красивой подложкой и так далее — замечательно. Вот пример:

Мы здесь видим, что h1 имеет подложку и вообще красиво отличается от h2. А на этом сайте даже позаботились, чтобы и h3 от h2 можно было отличить:

Это сайты из топа по запросу [как вложить деньги чтобы получить прибыль]. Вот тоже простой, но хороший h2, который под многие тематики подойдет:

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

Списки

На этой же стадии можно позаботиться и об оформлении списков. Вот на такие списки приятно смотреть:

В идеале маркированные и нумерованные списки различаются друг от друга. Они должны выглядеть красиво, выделяться из текста. Каждый пункт списка заканчивается знаком «точка с запятой», кроме последнего пункта — он оканчивается точкой. С помощью Shortcodes Ultimate можно делать списки типа таких:

Выбор иконок там большой — можно найти тематические по отношению к тексту и использовать их.

Изображения

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

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

• Обтекание картинки — о том, как это делается, читаем на htmlbook;
• Подпись к картинке.

Ну и, конечно, надо подобрать эти самые картинки в соответствии с моей инструкцией. Обычно делаем одно изображение на 1500 символов текста. В Title картинки пишем, что изображено на ней, в alt и подписи — ее описание (альт и подпись могут быть идентичными).

Можно делать не просто изображения, а слайдеры. Пример их использования на киносайте:

Слайдеры можно делать с помощью плагина Meta Slider. Также изображения можно оформлять галереями или каруселью.

Содержание

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

Также пример стандарта оглавлений можете глянуть на Википедии. Есть и более интересные решения. Вот например раскрывающееся содержание на javascript:

Но в общем случае для информационного сайта на WordPress хватает функционала плагина Table of Contents. Его просто надо настроить как следует после установки, а дальше он автоматически будет формировать содержания для статей, нужно будет только вставить шорткод , и на его месте в статье появится содержание.

Логическое выделение текста

Общая рекомендация тут — не более 1 выделения жирным (используем только тег strong), курсивом (em) или цитатой (blockquote) на 2000 символов без пробелов. Подчеркивание для выделения текста НЕ используем. Логическое выделение не должно быть похоже на seo юрского периода, когда жирным выделяли ключевики. Выделяем предложение целиком, это должна быть какая-то важная мысль, но желательно без ключевого слова.

Видео

В статью надо обязательно добавлять видео. И, как ни странно, чем оно длиннее, тем лучше. В фильтрах Ютуба (используем в подавляющем большинстве случаев именно Youtube) выбираем следующие:

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

Цитаты

[su_pullquote]В Shortcodes Ultimate можно сделать и такую вот цитату с обтеканием[/su_pullquote]Цитата — это не обязательно цитирование кого-либо. Это может быть также особо важная выдержка из текста, как в журналах. Во многих из них, если вы замечали, выделяют ключевую мысль из текста и оформляют в рамку и крупный шрифт. Можно делать не только цитаты, но и, например, врезки. Некоторые вебмастера делают вместо цитаты, например, совет:

Цитата начинается с большой буквы и заканчивается точкой.

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

Карты

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

Вкладки

[su_tabs][su_tab title=»Первая вкладка»]Средствами Shortcodes Ultimate также можно делать такие вкладки[/su_tab]
[su_tab title=»Прочти еще тут»]Ссылки не работают[/su_tab]
[su_tab title=»Можешь тоже прочесть»]Но те, на которые кликают, работают)[/su_tab][/su_tabs]

Таблицы

Нужны не всегда и их сложно сделать, но в статьях, где идет сравнение, выбор лучшего варианта и так далее они нужны. И они дают реальный плюс. Отличные таблицы получаются за счет плагина TablePress, вот например:
[table id=1 /]
Как видите, тут даже сортировка есть.

Символы Юникод

В тексте можно использовать (если в тему и без чрезмерного усердия) символы Юникод — то есть примерно такие: ☣, ♕, ✪ и так далее. На http://unicode-table.com/ru/sets/ и http://copypastecharacter.com/all-characters их куча. Вообще высший пилотаж — с их помощью формировать сниппеты, повышая кликабельность. И лучше использовать те символы, которые отображаются в выдаче. Какие же из них отображаются?

[su_dropcap]G[/su_dropcap]oogle (это была буквица — еще один инструмент Shortcodes Ultimate) прикрыл свой инструмент rich snippets, поэтому единственный способ проверить, будет ли отображаться символ в выдаче — это скачать Screaming Frog SEO Spider, просканировать страницу и посмотреть в самом низу окна программы вкладку SERP Snippet. Её можно редактировать и вставлять Юникод символы — если они будут отображаться там, то скорее всего, их будет понимать Google, и, вероятно, Яндекс.

Спойлеры

[su_spoiler title=»Нажмите, чтобы прочесть» style=»fancy» icon=»plus-square-1″]Если есть контент, который пользователи могут и не хотеть прочесть, то скрывайте его в спойлер.[/su_spoiler]

Горизонтальные линии

Такими линиями мы разбиваем текст на разные логические блоки. Делается с помощью тега hr. Вот он:

А вот разделитель из шорткода:
[su_divider]

Разбиение на колонки

[su_row]
[su_column size=»1/2″]На том же htmlbook описано, как надо разбивать текст на колонки. Однако это уже если совсем больше нечего хотеть.[/su_column]
[su_column size=»1/2″]В принципе это опять-таки решается за счет Shortcodes Ultimate.[/su_column]
[/su_row]

Контекстные ссылки

Ну и, конечно, последние, но не по значению — это контекстные ссылки. Делайте перелинковку для людей! На этой позитивной ноте завершаю обзор.