Эта статья – свободный перевод следующей публикации:  http://www.webdeveloperjuice.com/2013/01/13/parallax-scrolling-vs-seo/. Перевод дополнен собственными размышлениями, а также успешным примером продвижения одностраничного сайта с parallax эффектом.  

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

Что такое parallax эффект? 

Эффект parallax – это перемещение нескольких объектов на странице с разной скоростью, что создает иллюзию 3-х измерений. В свое время этот эффект активно использовался в простых компьютерных играх далеких 90-х годов. 

С каждым днем эта технология становится все более популярной в интернете. К примеру, вы можете увидеть parallax на сайте NIKE Activate – http://activatedrinks.com. При переходах по страницам сайта вы видите, как объекты двигаются по горизонтали и вертикали с разной скоростью, создавая иллюзию трехмерного измерения. 

Как работает parallax эффект? 

Для достижения такого эффекта разработчики используют JavaScript, CSS3 и HTML5. Они просто создают фон и объекты, двигающиеся с разной скоростью. Как правило, разработчики создают простой файл HTML, в который загружается все содержимое сайта.

Для некоторых CMS (к примеру, WordPress) существуют готовые шаблоны, благодаря которым вы можете сделать себе сайт с parallax-эффектом, даже не умея программировать. 

Parallax – проблемы эффекта 

Использование HTML5, CSS3 и JavaScript не является проблемой само по себе, но это становится проблемой, когда разработчик создает такую конструкцию в одном HTML-файле, что изначально подразумевает полное игнорирование SEO. 

Теперь у вас есть представление о parallax-эффекте. Ниже приведены проблемы сайтов с parallax-эффектом для поисковой оптимизации: 

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

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

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

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

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

6. Только один комплект метатегов (title, keywords, description). На одном url мы можем использовать их только 1 раз. В отличие от вашего сайта, сайты конкурентов имеют много страниц со своими уникальными метатегами для разных страниц. Чем больше у вас страниц, тем больше будет список ключевых слов, которые вы можете распределить по всему сайту. 

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

Решение проблемы 

Решение оказывается довольно простым: создается сайт с эффектом parallax, но содержимое файлов должно загружаться из разных HTML-файлов, все данные не должны быть в одном файле. Нужно создать для вашего сайта разные файлы. После этого вы добавляете содержимое в каждый отдельный файл (например: /, about.html, contacts.html, catalog.html, articles.html и т.д.). 

Таким образом, у вас будет несколько страниц с соответствующими метаданными, текстами, url-адресами. 

О загрузке внешнего содержимого 

Есть несколько способов загрузки внешнего содержимого: 

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

$stream = fopen("file.php","r");
$string = stream_get_contents($stream);
fclose($stream);

2) JQuery – это более быстрый способ. Используйте Javascrip и AJAX:

(function($) {
$(document).ready(function() {
$('#contents').load('content.html');
});
})(jQuery);

Вы можете использовать наиболее удобный для вас способ.

Заключение

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

Пример из нашей практики

Был создан сайт с parallax-эффектом - www.mksm.ru.

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

Фактически ресурс сейчас состоит из 6 отдельных страниц, которые закрыты от индекса и имеют свои индексируемые алиасы (страницы) и мета теги:

• mainpage.php/ - Главная
• about.php /about/ - О компании
• catalog.php - /catalog/ - Каталог
• service.php /service/ - Услуги
• articles.php /articles/ - Статьи
• contacts.php /contacts/ - Контакты

Страницы (/, /about/, /catalog/, /service/, /articles/, /contacts/) индексируются поисковыми роботами. Такие страницы как /catalog/ и /articles/ имеют внутреннюю разделяемую структуру. Они генерируются с помощью символьного кода Битрикс и .htaccess Mod Rewrite.

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

и содержимое (текст и ссылки) других блоков и страниц закрывается от поиска.

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

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

Оригинал: http://www.webdeveloperjuice.com/2013/01/13/parallax-scrolling-vs-seo/

Антон Пономарев
Арт-директор в qb-interactive

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

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

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

— Иллюзия пространства возникает не за счет количества слоев, а за счет пространственной перспективы. Тот же Nike немного лажанулся на своем сайте http://activatedrinks.com — во всяком случае, это мое мнение. На этом скриншоте видно, что средний слой с белыми квадратиками имеет тень. В то же время позади мы видим шарики в резкостной перспективе. Не может быть тень на воздухе, это не реальная физика. Поэтому это чуть-чуть режет глаз и убивает напрочь «пространство». Декоративные тени хорошо дополняют эффект, но только тогда, когда они стоят в нужном месте и в нужном слое, например, тут: http://www.ok-studios.de/home/. Иногда 3D-пространство можно разбавлять и плоским параллаксом, и даже выбивать его из физики, но на фоне правильности всего сайта это смотрится оригинальной фишкой.

— Фон — очень важный момент. Он не должен быть однородным, тогда при прокрутке страницы и наезде бэков друг на друга у нас будет виден этот самый эффект наезжания. Если фоны двух слайдов будут сделаны просто разными цветами, оно не будет смотреться. Если же положить градиентик, а еще лучше — неоднородную текстуру, то у нас будет открываться не «плоскость», а «новая локация», например, на нашем сайте http://www.qb-interactive.ru. На некоторых слайдах есть впечатление, будто фон практически однородный, но это далеко не так. Если убрать эти градиентики и текстуры, эффект будет совсем-совсем другой. Именно за счет этого кажется, что слайд наезжает на слайд и возникает пространство. Убрать их — и будет просто череда слайдов.

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

— Как замечено в статье, меню-«прилипалка» действительно является обязательным элементом, иначе мы очень сильно теряем в юзабельности.

Вообще о разработке параллакс-сайтов можно написать книгу, поэтому приближусь к теме статьи. У одностраничника очень много плюсов, но, конечно, есть и небольшие минусы, которые, правда, можно нивелировать. Один из легко решаемых недостатков одностраничных сайтов — это отсутствие ссылок на конкретные разделы страницы. Эта проблема решается с помощью hash-навигации или HTML5 History API, когда при прокрутке до определенного места к ссылке будет дописываться hash (например: www.super-parallax.net/#!/contacts/) или полноценная ссылка (www.super-parallax.net/contacts/). И пользователь будет видеть ссылку в адресной строке, перейдя по которой, сразу попадет к нужному разделу сайта.