Parallax Scrolling и SEO — решение проблем

Parallax Scrolling и SEO — решение проблем

Parallax Scrolling является одной из последних тенденций в веб дизайне, но на большинстве сайтов реализация является совсем не SEO-friendly.

Ниже представлена статистика из Google Trends, которая отражает увеличение популярности Parallax Scrolling

5329e54da4abd7.23235422

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

Как создать parallax scrolling на сайте для поисковых систем

Прежде чем разрабатывать сайт с parallax прокруткой, нужно учитывать следующее:

  • parallax scrolling это метод отображения страницы, при котором различные слои контента, изображений и фона двигаются с различными скоростями;
  • начинать следует с SEO архитектуры сайта, а лишь затем производить разработку сайта под эту архитектуру;

Ниже описаны 3 основных метода, как сделать parallax scrolling понятным для поисковых систем.

Одностраничный parallax scrolling используя Jquery

Решение состоит в том, чтобы использовать PushState в JQuery. Это позволит «разрезать» одну страницу со скролингом на несколько отдельных, каждая из которых будет иметь собственный URL и мета данные. В результате, одна страница будет проиндексирована несколько раз с различным контентом.

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

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

Вот пример такого сайта: http://flowerbeauty.com/

QIP Shot - Screen 019

Многостраничная parallax прокрутка с учетом архитектуры ЧПУ сайта

Эта техника очень проста. Прежде всего, нужно отталкиваться от архитектуры ЧПУ,  и лишь затем на каждый отдельный URL создавать отдельные страницы прокрутки и дизайн.

Вот пример такого сайта: http://www.xdawson.com/

Данный сайт имеет ярко выраженную структуру SEO ЧПУ  и на каждой внутренней странице проекта реализована прокрутка.

QIP Shot - Screen 020

Плюсы — хорошо для сбора аналитики, каждая страница имеет свое содержимое и URL, легко в реализации.

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

Прокрутка на главной странице сайта и обычная SEO архитектура

Данный способ соединяет предыдущие два. Он заключается в том, что создать parallax scrolling на главной странице сайта, а внутренние страницы сайта сделать обычными.

About the Author
Nikita Sawinyh

Занимаюсь SEO с 2006 года. Сейчас специализируюсь на продвижении многостраничных проектов. Основатель и руководитель sawinyh.ru

comments powered by Disqus