7 ошибок дизайна, которые могут навредить SEO

Мануалы
4Нравится
Комментарии
Поделиться
7 ошибок дизайна, которые могут навредить SEO

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

  • 1. Плохо реализована навигация
  • 2. Много навязчивых поп-апов
  • 3. Перегрузка таблицами стилей CSS и JS
  • 4. Отсутствие адаптивной вёрстки
  • 5. Не оформлена 404 страница
  • 6. Слишком большие изображения
  • 7. Текст только на изображениях

1. Плохо реализована навигация

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

Плохой пример навигации:

Плохой пример навигации

Хороший пример:

Хороший пример навигации

2. Много навязчивых поп-апов

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

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

Сайт с множеством навязчивых поп-апов

Плохой пример использования всплывающих окон

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

Ещё несколько советов по созданию ненавязчивого поп-апа:

  • он должен занимать максимум 20% от всего экрана;
  • помещайте только важную информацию, которая может заинтересовать посетителя;
  • дайте пользователям немного освоиться, а уже потом показывайте поп-ап: он не должен появляться в первые секунды после открытия сайта.

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

При грамотном использовании поп-апы могут смотивировать пользователей совершить целевое действие!

Всплывающие окна на странице сайта

Хороший пример использования всплывающих окон

3. Перегрузка таблицами стилей CSS и JS

При внедрении JavaScript и CSS на сайте стоит помнить, что они могут замедлить загрузку страниц сайта. Зачастую, чтобы «облегчить страницу», веб-разработчики прибегают к удалению:

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

В минификации CSS вам могут помочь специальные сервисы:

  • CSS Compressor. Помогает моментально удалить лишние символы в коде. Имеет четыре уровня сжатия: низкий, стандартный, высокий и высочайший.

    Сервис минификации CSS Compressor

  • CSS Minifier. Удобный и интуитивно понятный сервис, позволяющий очистить код от символов.

    Сервис минификации CSS Minifier

Минифицировать JavaScript вам помогут инструменты:

  1. Google Closure Compiler. Инструмент предназначен не только для сжатия, но и обфусикации и модуляризации JavaScript. Сервис сложный, и чтобы в нём разобраться, необходимо знать основы программирования.

    Google Closure Compiler

  2. JavaScript Minifier. Простой в усвоении, но по функционалу уступает сервису Google Closure Compiler.

    JavaScript Minifier

Чтобы найти медленные страницы на сайте, код которых можно минифицировать, воспользуйтесь Netpeak Spider. Краулер определит страницы с большим объёмом кода и медленной загрузкой контента. Для проверки в программе выполните следующие действия:

  1. Отметьте параметры «Размер HTML» и «Размер контента» в разделе «Показатели».

    Параметры в Netpeak Spider

  2. Также отметьте «Время ответа сервера».

    Параметр  «Время ответа сервера» в Netpeak Spider

  3. Введите начальный URL и запустите анализ.
  4. По завершении сканирования изучите отчёт на наличие ошибки «Большое время ответа сервера». Если такая найдена, кликните по ней, и в таблице отсортируются URL, которые медленно загружаются. Такие страницы стоит оптимизировать.

    Ошибка «Большое время ответа сервера» в Netpeak Spider

  5. Также обратите внимание на показатели «Размер контента» и «Размер HTML».

    Показатели «Размер контента» и «Размер HTML» в Netpeak Spider

  6. Чтобы скопировать код страницы для минификации, кликните по URL правой кнопкой мыши и в контекстном меню нажмите на «Исходный код и HTTP-заголовки».

    Как скопировать код страницы для минификации в Netpeak Spider

  7. Затем выделите и скопируйте содержимое поля «Исходный код» открывшегося окна инструмента или воспользуйтесь кнопкой «Сохранить исходный код».

    Окно инструмента «Исходный код и HTTP-заголовки» в Netpeak Spider

4. Отсутствие адаптивной вёрстки

Google уже давно отдаёт приоритет мобильной версии сайта для индексации и ранжирования. Если ваш сайт не оптимизирован для мобильных устройств, не стоит надеяться на высокие позиции.

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

Расскажу о некоторых преимуществах адаптивного дизайна:

  1. Он позволяет подгонять сайт под размер любого экрана.
  2. Экономит время и деньги — достаточно один раз потрудиться над разработкой и внедрением адаптивного дизайна, и больше не нужно внедрять версии под разные устройства и диагонали экранов. Разработка мобильной версии, как правило, имеет высокую стоимость.
  3. Адаптивный дизайн очень схож с основной версией, поэтому мобильным пользователям будет привычнее и легче ориентироваться.
  4. Не приводит к проблемам с дублированным контентом в отличие от мобильной версии, для которой нужно создавать отдельный URL-адрес.
  5. Поисковые боты быстро и легко могут сканировать сайты с адаптивным дизайном, что позволяет избежать проблем с индексацией.

При разработке адаптивного дизайна важно помнить о том, что:

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

5. Не оформлена 404 страница

Как бы усердно вы ни избавлялись от битых ссылок, страниц с 404 ошибкой не избежать: любая опечатка в URL-адресе — и пользователь наткнётся на несуществующую страницу. Очень важно, чтобы после этого посетитель не подумал, что сайт перестал работать, и не покинул его.

Пример не оформленной 404 страницы

Во избежание такой ситуации следует грамотно оформить страницу 404 → тогда пользователь не растеряется и сможет найти то, что ему нужно. Вот несколько рекомендация по оформлению:

  1. Дизайн 404 страницы не должен сильно отличаться от общей версии сайта: так пользователь поймёт, что всё ещё пребывает на сайте, а не за его пределами.
  2. Напишите, что ничего страшного не произошло, и окажите посетителю помощь: например, предоставьте ссылку на главную страницу, поиск по сайту, HTML-карту со всеми главными разделами, а также контакты для обратной связи.
  3. Не упускайте возможность пошутить. Это не только позволит избежать негатива, но может поднять настроение посетителю и оставить хорошее впечатление о вашем сайте.

Предлагаю посмотреть несколько примеров креативных 404 страниц:

  • 404 страница на сайте Marvel

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

  • Пример оформления 404 страницы

    Также интересный пример — помимо юмора и красивого оформления на странице настроено автоматическое перенаправление на главную через 10 секунд. Для тех, кто не хочет ждать, есть кнопка, которая также приведёт на главную.

  • Пример геймифицированной страницы 404 страницы

    А вот пример геймифицированной страницы, на которой есть и навигационное меню, и ссылки на важные страницы.

Ещё больше интересных примеров вы найдёте в посте «Как креативно оформить 404 страницу: 53 примера для вдохновения».

6. Слишком большие изображения

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

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

7. Текст только на изображениях

Если вы используете текст на изображениях (картинки к постам, инфографика и т.д.) важно сопровождать эти картинки HTML-текстом, чтобы поисковые системы смогли распознать то, о чём вы пишете.

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

Подводим итоги

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

  • на сайте логически и понятно реализована навигация;
  • количество всплывающих окон минимально, и они не раздражают пользователей;
  • таблицы стилей CSS и JS не перегружены и не снижают скорость загрузки страниц;
  • внедрена адаптивная вёрстка;
  • правильно и интересно оформлена страница 404;
  • все изображения сайта оптимизированы;
  • текст присутствует не только на изображениях, но и в HTML виде.

А какие частые ошибки дизайна встречались вам? Буду рада, если поделитесь в комментариях 😊