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

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

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

Screenshot_1

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

Screenshot_2

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

Заголовки

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

h1h2

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

h2h3

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

h2

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

Списки

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

spisok2607
Screenshot_7

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

Screenshot_3

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

Изображения

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

Screenshot_6

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

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

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

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

Screenshot_slider

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

Содержание

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

Screenshot_8

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

Screenshot_9
Screenshot_10

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

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

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

Видео

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

Screenshot_11

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

Цитаты

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

Screenshot_5

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

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

Карты

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

Вкладки

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

Таблицы

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

ЗапросСтраницаСсылокИз них работают
продвинуть сайт дешево/deshevo/500
продвинуть сайт за 100 рублей/100rublej/300
продвинуть сайт бесплатно/eshe-tupee/100
Как видите, тут даже сортировка есть.

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

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

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

Спойлеры

Нажмите, чтобы прочесть

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

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


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

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

На том же htmlbook описано, как надо разбивать текст на колонки. Однако это уже если совсем больше нечего хотеть.
В принципе это опять-таки решается за счет Shortcodes Ultimate.

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

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

Дешево и все работает, без падений и геммороя. Я с него начинал
И я в том числе. Они номер 1 по надежности и по примочкам
Которые мне пишут тексты сотнями. Рефам даю подсказки в скайпе
Добавить в закладки
Голосовать ПРОТИВГолосовать ЗА 0
Загрузка...
Комментарии посетителей
Авторам лучших комментариев и дополнений к статье пишу на почту и иногда палю кое-какие темы
  1. 0
    +

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

  2. 0
    +

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

Добавить комментарий

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: