+7 (499) 372-13-69

Может ли параллакс-эффект оказывать негативное влияние на SEO сайта?

04 декабря 2014 Источник: Роман Попов в рубрике: Энциклопедия SEO

«Что это и как можно научиться создавать подобное?»

Это первая мысль, которая может прийти вам в голову, если вы попали на сайт, в дизайне которого присутствует параллакс-эффект. Такие сайты, как правило, очень красивы на вид и могут быть совершенно потрясающими - с точки зрения пользовательского опыта (UX). Взгляните, к примеру, на страницу сайта Honda CRV. Или упрощённую версию параллакс-эффекта на странице HubSpot' State of Inbound Marketing (посмотрите – обязательно).

Как параллакс-эффект на сайте влияет на его SEO-продвижение

Разнообразие фонов, движущиеся изображения, видео и интерактивные точки доступа (фрагменты интерактивного изображения, с которым ассоциирован адрес URL) напоминают цифровую версию книги из серии «Выбери себе приключение» (Choose Your Own Adventure). С точки зрения дизайна, параллакс-эффект выглядит весьма впечатляюще. Однако некоторые маркетологи неоднократно поднимали тему проблем, которые возникают якобы из-за параллакс-эффекта.

Положительный эффект параллакс - в визуальном оформлении, которое радует глаз и выгодно выделяет дизайн сайта среди конкурентов. Основные минусы – снижение доступности для поиска, санкции Google и другие проблемы SEO.

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

Принцип действия параллакс-эффекта

Параллакс-эффект перекочевал в дизайн сайтов из видеоигр типа Супер Марио, где разные слои графики двигались с разной скоростью. Цель - изобразить глубину в 2D игре.

Как параллакс-эффект на сайте влияет на его SEO-продвижение

Так выглядят слои, используемые для параллакс-скроллинга/прокрутки, в видеоигре – «в разрезе»:

Как параллакс-эффект на сайте влияет на его SEO-продвижение

На сайтах с параллакс-эффектом, пользователь сам управляет скоростью перехода между элементами дизайна.

Аргументы противников параллакс-эффекта

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

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

Наиболее привлекательный контент сайтов, в дизайне которых присутствует параллакс-эффект, размещается на одной странице, с единственной ссылкой, единственным набором метаинформации и единственным эффективным h1 тегом. Что это значит? Поисковые системы – вроде Яндекса и Google – индексируют в результатах поиска только одну страницу такого сайта. Это может существенно снизить уровень его доступности (для поиска) при использовании органического поиска. Показатели доступности такого сайта для поиска ниже показателей сайтов с большим количеством страниц. Кроме того, уменьшение количества внутренних ссылок ведет к снижению эффективности поисковой оптимизации (SEO).

2) Сайты с параллакс-эффектом загружаются слишком медленно.

Противники использования параллакс-эффекта в дизайне сайтов напоминают, что даже несложные мультимедиа-эффекты увеличивают время загрузки сайта, что уж говорить об интерактивных сайтах с параллакс-эффектом. Задержка загрузки даже на 1 - 2 секунды раздражает многих пользователей сайта. Они могут покинуть сайт, не дожидаясь его полной загрузки и больше никогда не вернуться. По данным Gomez, среднестатистический посетитель сайта не желает ждать более 2 секунд. Если загрузка страницы длится дольше 3 секунд, 40% пользователей покидают сайт. Не стоит забывать, что время загрузки страницы является важным показателем для алгоритма Google - с 2010 года.

3) Дизайн с параллакс-эффектом «не работает» на мобильных устройствах.

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

Используем параллакс-эффект без вреда для SEO

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

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

Эксперты не рекомендуют располагать на странице раздела «О нас» всю информацию о целях и процессе продвижения вашего проекта, втискивая туда, кроме всего прочего, ещё и контактную информацию. Целесообразнее, разделить контент на несколько отдельных страниц, особенно если, это предметные исследования

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

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

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

Параллакс-эффект действительно делает дизайн этого сайта более привлекательным.

О мобильной версии сайта?

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

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

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

Оцените статью:
Читайте также:
Контактная информация
ООО "СКАЙГАРАНТ ДИДЖИТАЛ"
ОГРН: 35628549492874656
ИНН: 45638599
Адрес: г. Москва, ул. Орджоникидзе, 11с11, офис 211
(м. Ленинский проспект)
Телефон: +7 (800) 333-82-76