637 views

1366719973_1255282838

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

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

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

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

Вот несколько наиболее распространенных из них.

#1. Ошибочное использование тегов заголовков

Заголовки (<h1> — <h6>) — базовая составляющая любого HTML-документа и играют важнейшую роль в SEO, поэтому необходимо внимательно подходить к размещению их на странице. Основные ошибки при использовании Н тегов связаны как со структурой готовых шаблонов для сайта, так и желанием придать контенту нужный вид, игнорируя требования ПС.
h-zagolovki
Основные ошибки при использовании Н тегов:

  1. зачастую для придания документу привлекательного с точки зрения пользователя вида на одной странице помещают несколько тегов <h1>, тогда как рекомендуется употреблять его только 1 раз. Во всех стилевых решениях он является наиболее крупным текстовым элементом документа и помимо функции оглавления может, к примеру, выражать уникальное торговое предложение или слоган.
  2. <h2> играет роль подзаголовка внутри блока, озаглавленного <h1> допустимо упоминать его несколько раз в одном документе, но злоупотребление им также недопустимо: к примеру, не стоит оформлять им части текста для стилизации содержимого.
  3. <h3>-<h6> менее значимы для поисковых систем, но это не означает, что страница, состоящая только из заголовков (бывает и такое) будет хорошо ранжироваться. Иногда это происходит потому, что во многих стилях шаблонов эти заголовки по величине практически не отличимы от содержимого тега <p> (абзац) и ошибочно используются в его роли.

Не советуем:

  • засорять страницу лишними заголовками;
  • помещать весь текст страницы в тег заголовка;
  • использовать заголовки только для стилизации текста, без определения структуры страницы.

Руководство по поисковой оптимизации Google.

#2. Размещение текста в графическом контенте

Текст наиболее легко интерпретируемая поисковыми системами часть контента. При этом робот не распознает его, если он размещен в формате картинки. Поэтому наиболее значимый контент всегда должен иметь текстовую форму.
tekst-v-kartinke

Размещение на сайте видео, анимации и другого медиа безусловно важная задача, так мы увеличиваем вовлеченность и улучшаем пользовательский опыт. Но стоит помнить, что описанное выше правило также справедливо для flash, silverlight и видео.

используйте текстовые эквиваленты для всех нетекстовых файлов.

руководство по поисковой оптимизации Google.

В итоге можно выделить 4 основных правила оптимизации нетекстового контента:

  • применять атрибуты alt ко всем изображениям;
  • на каждой странице должна быть по крайней мере одна текстовая ссылка;
  • не размещать важную для бизнеса информацию, к примеру, телефоны, адреса и т.д., внутри картинки;
  • в идеале следует давать изображениям осмысленные имена: вместо Afe3_05T.jpg — opisanie_kartinki.jpg

#3. Использование flash

В предыдущем пункте уже были указаны ошибки размещения нетекстового контента, но именно на flash стоит заострить внимание.

Дело в том, что эта технология является устаревшей и компании одна за другой отказываются от неё в пользу HTML5. Поэтому если есть альтернатива, то использовать флэш-элементы на сайте для демонстрации его текста и навигации не рекомендуется вовсе.

Мы рекомендуем использовать Flash только для украшения сайта, а для размещения содержания и создания средств навигации лучше использовать HTML.

руководство по поисковой оптимизации Google.

Крупнейшая ошибка — это оформить во флэше главную страницу сайта:

image272-700x281.png (700×281) - Google Chrome
Слева — как видит сайт человек, справа — поисковая система

Поисковый робот скорее всего не распознает её содержание.

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

#4. Некорректное отображение страницы 404

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

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

Такая страница может не только поставить пользователя в тупик, но и негативно сказаться на рейтинге сайта в поиске.

404-nepraviln
Красивая страница 404 без ссылок на ней
404-okostroy
Креативная 404 с навигацией

#5 Перегруженность веб-страницы

Графические элементы, видео, неоптимизированный код, чрезмерное количество виджетов — все это способно «утяжелить» страницу и снизить скорость её загрузки. А этот показатель важен не только для пользователя сайта, но и входит в число факторов ранжирования поисковиков.
Так, в июне 15-го года Google начал тестировать надпись «медленная загрузка» (slow to load) в мобильной выдаче:
medlennaiya-zagruzka

Рекомендую проверить скорость загрузки сайта при помощи инструмента PageSpeed insights. Сервис дает исчерпывающую информацию как по скорости загрузке на мобильных устройствах так и на десктопах. А по результатам проверки дает рекомендации относительно повышения показателя:
pagespeed-insights

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

  • Clean CSS (оптимизирует таблицы стилей);
  • Dirty Markup (оптимизация html).

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

В качестве итога

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

При подготовке статьи были использованы следующие источники:
http://static.googleusercontent.com/media/www.google.ru/ru/ru/intl/ru/webmasters/docs/search-engine-optimization-starter-guide-ru.pdf
https://www.seroundtable.com/google-dont-worry-too-much-about-page-speed-21976.html
https://dental-design-products.co.uk/web-design-mistakes-than-can-reduce-your-traffic

5 недочетов дизайна, пускающих под откос ваше SEO