Кейс: Контентный проект под США. От 0 до 190 000 посетителей в сутки (Апдейт кейса)

Подробнее

Readability (читабельность) — необходимый шаг к успешному ранжированию сайта

Татьяна Одинокова

Сегодня пойдет речь о читабельности текстов, которая хоть и косвенно, но все же влияет на ранжирование сайта.

Readability - необходимый шаг к успешному ранжированию сайта

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

Google Analytics — > Поведение — > Контент сайта — > Все страницы:

Google Analytics - > Поведение - > Контент сайта - > Все страницы

Необходимая колонка – «Средняя длительность просмотра страницы». Как видно из принтскрина, пользователь провел на странице максимум 10 секунд, т.е. зашел, бегло просмотрел страницу и вышел. Что это значит?

Есть множество причин, по которым пользователи так быстро покидают страницу/сайт. Самые частые — это:

  1. Нерелевантная запросу пользователя страница (недостаточно информации, нет цен, страница совсем о другом, высокие цены и прочее)
  2. Долгая загрузка контента
  3. Некорректное отображение страницы
  4. Плохая читабельность предоставляемого контента (шрифт, структура, информативность, цвет и т.д.)

И именно самый последний пункт очень часто недооценивается, а иногда и вообще игнорируется. Итак, что же из себя представляет читабельность (readability)? Посмотрим, что об этом «думает» Google:

что об этом «думает» Google

С определением тут всё просто и понятно. Пора разобраться с влиянием читабельности на поведенческие факторы и ранжирование сайта.

Влияние readability на ранжирование сайта

Само понятие «читабельность» не считается фактором ранжирования, но пользовательское поведение на сайте –  очень даже. Вспомните, как часто вы покидали страницу сайта после прочтения первых нескольких строчек только лишь по причине тяжелого восприятия написанного?

У вас не будет второго шанса произвести первое впечатление

(К. Шанель)

Когда вы улучшаете читабельность контента, то улучшаются и поведенческие характеристики:

  1. время пребывания на странице;
  2. глубина скроллинга страницы;
  3. показатель отказов;
  4. социальные сигналы.

Как результат, поисковые системы станут ваш сайт ранжировать выше к необходимому ТОПу.

Что важно знать о показателе отказов?

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

показатель отказов может оставаться высоким

По умолчанию Google Analуtics присваивает высокий показатель отказа страницам, где не было взаимодействия пользователя с контентом. Акцентируем ваше внимание на том, что под взаимодействием здесь подразумевается – переход по ссылке на другую страницу.

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

  • просмотр видео;
  • клик по изображению для его увеличения;
  • клики по кнопкам «Заказать», «Рассчитать стоимость», поделиться в соц.сетях и т.д.

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

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

Как улучшить readability страниц сайта?

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

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

 

Не бойтесь использовать большое количество мультимедийного контента (например, на каждые 100 слов). Главное, чтобы изображения были качественные и по теме.

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

Вариантов несколько:

  1.     Указывайте источник изображения
  2.     Используйте фотобанки. Там вы найдете большое количество бесплатных изображений на разную тематику и без надобности указывать авторские права.

Хороший сервис, например, pixabay.com.

Хороший сервис, например, pixabay.com.

Заголовки и подзаголовки

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

 

Важно:

Должна соблюдаться последовательность заголовков. Заголовок первого уровня — всегда один на странице и самый первый по иерархии. Потом h2, h3 и т.д. В действительности, достаточно заголовков h1 и h2. Заголовок второго уровня может использоваться несколько раз на странице.

 

 

 

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

Хороший пример по структуре и иерархии заголовков:

Хороший пример по структуре и иерархии заголовков

Списки

Для оформления веб-страницы хорошо использовать нумерованные и маркированные списки.

Во-первых, они привлекают внимание;

Во-вторых, структурируют текст

В-третьих, данные в виде списка усваивается лучше

 

Шрифт (Font)

Для веб страниц идеальный шрифт – это шрифт без засечек sans serif fonts. К таким относятся:

  • Arial,
  • Verdana,
  • Helvetica,
  • Trebuchet,
  • Lucida Sans и др.

Использование таких шрифтов облегчит чтение текста с экранов различных устройств. Протестировать каждый из шрифтов вы можете здесь: webfont-test.com

Шрифт (Font)

Ни в коем случае, НЕ ПИШИТЕ ПРЕДЛОЖЕНИЯ ЗАГЛАВНЫМИ БУКВАМИ. Такой текст скорее вызовет у пользователей желание уйти со страницы.

Размер шрифта (Font size)

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

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

Один из простых способов узнать, какой шрифт используется на вашем сайте — установить расширение для Chrome — WhatFont Tool.

вы сможете увидеть название шрифта

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

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

Подведя курсор к любому тексту на сайте, вы сможете увидеть название шрифта

Длина строки и предложения

 

Оптимальное число слов на строке  — от 9 до 12 слов. Это примерно между 50-60 символами c пробелами. Строки, превышающие данную метрику, затрудняют фокусировку на информации и смысл прочитанного может потеряться.

 

Контрастность (Contrast ratio)

Контрастность или contrast ratio — это соотношение цвета шрифта и цвета фона.

Согласно руководству WCAG 2.01,  контрастность между шрифтом и фоном должна быть минимум 4,5:1, чтобы текст был разборчивым и четким.

Показатель контрастности может принимать значения от 1:1 (отсутствует контрастность) до 21:1 (максимальная контрастность, чёрный цвет на белом фоне). Упомянутое руководство выдвигает следующие требования к контрастности текста:

  • 3:1 — минимальная контрастность. Используется для шрифтов больших размеров (уровень АА)
  • 4,5:1 — минимальная контрастность для обычного текста (уровень АА)
  • 7:1 — повышенная контрастность для обычного текста (уровень ААА)

Более подробную информацию вы можете найти в самом руководстве.

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

http://www.checkmycolours.com/

увидите, где есть проблемные сочетания

Также, полезным инструментом может оказаться и  msfw.com. Здесь необходимо в соответствующих полях указать используемый цвет шрифта и фона. После нажатия на кнопку “Calculate”, слева вы увидите, какое соотношение цветов используется у вас на ресурсе.

вы увидите, какое соотношение цветов используется у вас на ресурсе

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

для себя самое оптимальное сочетание

И еще пару сервисов, которые могут вам пригодится: раз, два.

Вертикальный ритм

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

за указанные пределы базовой сетки сайта

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

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

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

  1. https://drewish.com/tools/vertical-rhythm/
  2. https://www.gridlover.net/try
  3. http://soqr.fr/vertical-rhythm/
  4. http://topfunky.com/baseline-rhythm-calculator/

Неразрывные пробелы

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

На первый взгляд незначительные изменения могут улучшить читаемость текста. Подробнее с реализацией можно ознакомиться в статье А. Ёжикова здесь habrahabr.ru

Заключение:

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

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

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

Хорошие статьи в продолжение:

А что вы думаете по этому поводу? Давайте обсудим в комментариях!

Оцените статью

совсем плохоплохонормальнохорошокласс (23 оценок, средняя: 4,65 из 5)
Загрузка...