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 Minifier. Удобный и интуитивно понятный сервис, позволяющий очистить код от символов.

  

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

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

   

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

   

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

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

   

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

   

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

   

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

   

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

   

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

   

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

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

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

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

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

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

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

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

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

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

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

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

• 

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

• 

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

• 

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

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

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

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

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

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

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

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

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

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

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