Сегодня пойдет речь о читабельности текстов, которая хоть и косвенно, но все же влияет на ранжирование сайта.
Прежде чем перейти к детальным пояснениям, давайте для начала зайдем в Google Analytics и посмотрим на постраничную продолжительность сеансов ваших пользователей.
Google Analytics — > Поведение — > Контент сайта — > Все страницы:
Необходимая колонка – «Средняя длительность просмотра страницы». Как видно из принтскрина, пользователь провел на странице максимум 10 секунд, т.е. зашел, бегло просмотрел страницу и вышел. Что это значит?
Есть множество причин, по которым пользователи так быстро покидают страницу/сайт. Самые частые — это:
- Нерелевантная запросу пользователя страница (недостаточно информации, нет цен, страница совсем о другом, высокие цены и прочее)
- Долгая загрузка контента
- Некорректное отображение страницы
- Плохая читабельность предоставляемого контента (шрифт, структура, информативность, цвет и т.д.)
И именно самый последний пункт очень часто недооценивается, а иногда и вообще игнорируется. Итак, что же из себя представляет читабельность (readability)? Посмотрим, что об этом «думает» Google:
С определением тут всё просто и понятно. Пора разобраться с влиянием читабельности на поведенческие факторы и ранжирование сайта.
Влияние readability на ранжирование сайта
Само понятие «читабельность» не считается фактором ранжирования, но пользовательское поведение на сайте – очень даже. Вспомните, как часто вы покидали страницу сайта после прочтения первых нескольких строчек только лишь по причине тяжелого восприятия написанного?
У вас не будет второго шанса произвести первое впечатление
(К. Шанель)
Когда вы улучшаете читабельность контента, то улучшаются и поведенческие характеристики:
- время пребывания на странице;
- глубина скроллинга страницы;
- показатель отказов;
- социальные сигналы.
Как результат, поисковые системы станут ваш сайт ранжировать выше к необходимому ТОПу.
Что важно знать о показателе отказов?
К сожалению, ситуация такова, что даже при длительном нахождении на сайте, показатель отказов может оставаться высоким.
По умолчанию Google Analуtics присваивает высокий показатель отказа страницам, где не было взаимодействия пользователя с контентом. Акцентируем ваше внимание на том, что под взаимодействием здесь подразумевается – переход по ссылке на другую страницу.
В таких ситуациях оптимальным вариантом будет настраивание событий, которые могли бы влиять на показатель отказа. К ним могут относиться:
- просмотр видео;
- клик по изображению для его увеличения;
- клики по кнопкам «Заказать», «Рассчитать стоимость», поделиться в соц.сетях и т.д.
А для блогов и страниц с большим контентом, в качестве события может быть ещё настроен скроллинг или использование вот такой кнопки:
Как улучшить readability страниц сайта?
Используйте изображения
Возможно вы сейчас подумаете, что мультимедийный контент не имеет ничего общего с читабельностью текста, но это не так. Изображения сегментируют текст на разные части и делают контент легким для восприятия. Более того, они делают текст интереснее и разбавляют монотонность.
Не бойтесь использовать большое количество мультимедийного контента (например, на каждые 100 слов). Главное, чтобы изображения были качественные и по теме.
Маленький совет для тех, кто на своих страницах использует изображения из интернета. Очень часто бывает так, что вы размещаете изображение, скачанное из интернета, а потом находится автор изображения, а вместе с ним и проблемы.
Вариантов несколько:
- Указывайте источник изображения
- Используйте фотобанки. Там вы найдете большое количество бесплатных изображений на разную тематику и без надобности указывать авторские права.
Хороший сервис, например, pixabay.com.
Заголовки и подзаголовки
Используйте в тексте кроме основного заголовка еще и подзаголовки. Они служат прекрасным ориентиром в тексте для пользователей и поисковых роботов. Не забывайте о том, что вы делаете заголовки в первую очередь для пользователя, поэтому не переоптимизируйте их ключевыми фразами и используйте по необходимости.
Важно:
Должна соблюдаться последовательность заголовков. Заголовок первого уровня — всегда один на странице и самый первый по иерархии. Потом h2, h3 и т.д. В действительности, достаточно заголовков h1 и h2. Заголовок второго уровня может использоваться несколько раз на странице.
Не делайте заголовки слишком длинными и тем более в две строки.
Хороший пример по структуре и иерархии заголовков:
Списки
Для оформления веб-страницы хорошо использовать нумерованные и маркированные списки.
Во-первых, они привлекают внимание;
Во-вторых, структурируют текст
В-третьих, данные в виде списка усваивается лучше
Шрифт (Font)
Для веб страниц идеальный шрифт – это шрифт без засечек sans serif fonts. К таким относятся:
- Arial,
- Verdana,
- Helvetica,
- Trebuchet,
- Lucida Sans и др.
Использование таких шрифтов облегчит чтение текста с экранов различных устройств. Протестировать каждый из шрифтов вы можете здесь: webfont-test.com
Ни в коем случае, НЕ ПИШИТЕ ПРЕДЛОЖЕНИЯ ЗАГЛАВНЫМИ БУКВАМИ. Такой текст скорее вызовет у пользователей желание уйти со страницы.
Размер шрифта (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”, слева вы увидите, какое соотношение цветов используется у вас на ресурсе.
Там же на странице, но чуть ниже, есть примеры соотношения цвета шрифта и цвета фона. Возможно, вы найдете для себя самое оптимальное сочетание.
И еще пару сервисов, которые могут вам пригодится: раз, два.
Вертикальный ритм
Что из себя представляет вертикальный ритм? Это соотношение размеров шрифта, вертикальных отступов и межстрочных интервалов. По сути, этот ритм расставляет объекты на странице таким образом, чтобы они находились на определенных расстояниях друг от друга и не выходили за указанные пределы базовой сетки сайта.
Использование вертикального ритма позволяет легко читать текст, так как заданные пропорции сохраняются неизменными на странице. При этом изменение шрифта и длины строки не оказывает влияние на этот баланс.
Нашему мозгу нравятся шаблоны, так как они предсказуемыми. Когда мозг видит шаблон, у него возникает чувство, будто перед ним хорошо известная вещь, и он успокаивается. Такой приём с повторениями (читай: ритмом, шаблоном) используется во многих сферах: фотография, музыка, стихосложение и проч.
Ниже вы найдете несколько сервисов, которые могут помочь вашим дизайнерам и веб разработчикам в настраивании вертикального ритма:
- https://drewish.com/tools/vertical-rhythm/
- https://www.gridlover.net/try
- http://soqr.fr/vertical-rhythm/
- http://topfunky.com/baseline-rhythm-calculator/
Неразрывные пробелы
Использование неразрывного пробела решает проблему, которая возникает, когда два и более связанных слова переносятся на разные строки. К примеру, на сайтах, где не используются такие пробелы, можно увидеть следующие проблему: “разрываются” инициалы и фамилия; “разрываются” предлог и слово, к которому он относится; “разрываются” числа и единицы измерения, “разрываются” длинные группы чисел и т.п.
На первый взгляд незначительные изменения могут улучшить читаемость текста. Подробнее с реализацией можно ознакомиться в статье А. Ёжикова здесь habrahabr.ru
Заключение:
Мы очень часто недооцениваем то, как представлен текст на сайте. И иногда именно из-за плохой читабельности контента, теряем пользователей.
Постарайтесь учесть каждый из этих рекомендаций со всеми тонкостями, и в комплексе вы наверняка увидите хороший результат. Под результатом мы имеем в виду увеличение количества посетителей сайта, длительности нахождения на страницах, уменьшение показателя отказов, улучшение позиций сайта.
На заметку: у каждого из перечисленных пунктов есть множество тонкостей. В статье лишь поверхностно раскрыты основные критерии читабельности для веб-контента.
Хорошие статьи в продолжение:
- Идеальная оптимизация страницы сайта — 14 ключевых факторов
- Качественное удержание посетителей для роста SEO трафика
- 11 причин, почему посетители покидают ваш сайт
А что вы думаете по этому поводу? Давайте обсудим в комментариях!
Оцените статью
(24 оценок, средняя: 4,67 из 5)
Загрузка...