Дизайн сайта для SEO: танец по страницам поиска

дизайн сайта для SEO

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

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

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

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

Бесконечный скроллинг

бесконечный скроллинг

Если вам необходимо поместить весь контент в пределах одной страницы, технология нескончаемой перемотки страницы как у Facebook, Twitter и Instagram вам отлично подходят. Суть ее заключается в том, что пользователь прокручивает контент, и опускаясь, переходит на все новые разделы сайта. Теперь не нужно возвращаться в главное меню и искать нужный раздел, он сам прогрузится по мере скроллинга.

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

Что касается его влияния на SEO, проблем быть не должно, если вы используете такие фреймворки, как Backbone, Bootstrap.Они, в свою очередь, используют код Ajax, а он очень даже дружит с поисковыми ботами.

Фиксированное меню

фиксированное меню

Источник изображения

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

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

Parallax-scrolling

параллакс скроллинг

Скриншот главной страницы сайта

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

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

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

Кстати, вот несколько примеров такого дизайна, вдохновляйтесь с удовольствием )

Инфографика

инфоргафика

Причем инфографика к дизайну целого сайта, спросите вы, ведь это всего лишь элемент визуализации определенной части контента. Но мы заметили, что некоторые сайты начали использовать инфографику…внимание – вместо текстового контента. Скажем больше. Такой метод только набирает обороты. А знают ли вебмастера, что в погоне за новинкой, они рискуют потерять топовые позиции?

Необходимо понимать, что инфографика – это всего лишь изображение, которое или не индексируется вообще, или индексируется на уровне картинки. Да, вы можете проставить ключи в атрибутах Alt и Title, но этого критически мало, если вы стремитесь занять топовые позиции в выдаче. Так что обязательно сопровождайте инфографику качественно написанными текстами с релевантными ключевыми словами и делайте страницы сайта максимально понятными для поисковых ботов.

Адаптивный дизайн

адаптивный дизайн

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

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

Что касается SEO, наличие адаптивного дизайна дает следующие преимущества в выдаче:

    • Улучшенное юзабилити. Google стремится максимально оправдывать поисковые надежды пользователей. И если у вашего сайта высокий показатель отказов (bounce rate), поисковая система получает сигнал о том, что с сайтом что-то не так и он не соответствует ожиданиям пользователей. Учитывая тот факт, что более 80% процентов пользователей имеют смартфоны, отдельная мобильная версия – это неоправданный риск, который увеличивает показатель отказов. В то время, как адаптивный дизайн гарантирует бесперебойную работу сайта с любого устройства
    • Сам Google заявляет, что оптимизированные под мобильный поиск сайты имеют преимущество в ранжировании, так что адаптивность сайта автоматически ставит его выше конкурентов
    • О дублировании контента также можно не переживать, ведь адаптивный дизайн не разделяет версии сайта и все информация надежно хранится в одном месте
    • Экономия бюджета. Имея один адаптивный сайт, вам не нужно тратиться на создание, правки и доработки отдельных версий сайта, рассчитанных на разные виды устройств.

Читайте также:

Искать будет еще легче: новый мобильный индекс от Google

Мобильные страницы с ускоренной загрузкой (Google AMP) и будущее мобильного Интернета

К выводам

Дизайн сайта для SEO – это обширный и комплексный вопрос, задаться которым должен каждый владелец бизнеса с сайтом. Важно помнить, что дизайн – это не просто красивая картинка, а непосредственный способ влияния как на поисковые системы, так и на целевую аудиторию. Юзабилити всегда на первом месте. Удобство использования ресурса посетителями напрямую влияет на место в выдаче, а индексирование сайта зависит от уровня оптимизации элементов.

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

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

  • время на сайте
  • количество просмотров страниц
  • глубина просмотров страниц
  • источники трафика
  • показатель отказов
  • упоминания сайта

Читайте также:

Один за всех и все за веб-дизайн: 7 трендов 2017 года

7 признаков SEO-самоубийцы: ошибки при продвижении сайта

9 эффективных приемов для повышения СЕО-кликабельности


admin

Мы - сертифицированные партнеры Google Adwords

google partner

У нас есть сертифицированные специалисты Google Analytics

yandex

У нас есть сертифицированные специалисты Яндекс Директ

google partner

Мы - сертифицированные партнеры 1С-Битрикс

Контакты





Адрес:
Украина, Одесса,
Адмиральский проспект дом. 33-А, офис 401

info@singree.com
chief@singree.com

Тел: +38 (048) 795 - 87 -13
+38 (044) 362 - 38 - 61
Факс: +38 (048) 749 - 19 - 05
Моб: +38 (067) 556 - 24 - 87
map