Parallax Scrolling против SEO

Содержание

Parallax Scrolling против SEO

Эта статья – свободный перевод следующей публикации: 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, в который загружается все содержимое сайта.

Рис. 1. Эффект глубины создается за счет того, что при прокрутке сайта фон движется медленнее, чем контент. Скриншот — здесь. Сайт — http://www.rowtothepole.com/

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

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

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

Рис. 2. Одностраничный сайт с parallax-эффектом. Скриншот – здесь. Сайт – http://www.balencic.com/. Проиндексированные страницы в Яндексе – http://yandex.ua/yandsearch?text=url%3Awww.balencic.com*%20%7C%20url%3Abalencic.com*&lr=143

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

Весь текст находится на одной странице, что замедляет сайт. Это серьезная проблема, так как скорость загрузки сайта – важный фактор, который нельзя игнорировать. Если вы планируете делать сайт, основной целью которого будет продажа услуг/товаров, то вам уже следует задуматься – нужен ли вам сайт с parallax-эффектом и низкой скоростью загрузки? Но это еще не всё.
Посетителям сразу открывается весь сайт – одна большая страница. И, чтобы добраться до нужного раздела, пользователю придется перелистывать весь сайт, пока он не доберется до интересующего его пункта. Согласитесь, это не очень удобно. Конечно, проблему решает внедрение меню, но при разработке таких сайтов его часто игнорируют, заставляя посетителей листать весь сайт вручную.
Ограниченное количество ключевых слов. Для одной страницы вы можете использовать довольно мало ключевых слов: кто-то рекомендует одно слово, кто-то – три. Напоминаю: при parallax-эффекте сайт представляет собой одну страницу. Это означает, что вы просто не сможете использовать все ключевые слова для своего сайта, вы не сможете оптимизировать страницы под необходимые запросы, потому что страниц нет. Таким образом, вы теряете все преимущества перед конкурентами, которые будут оптимизировать свои страницы привычными методами.
Снова ограничения для ключевых слов. На сей раз это касается заголовка H1, который также должен быть одним на всей странице. В итоге мы можем использовать заголовок H1 всего один раз на всем сайте. И если вы решите использовать много ключевых слов в заголовке, то Google или Яндекс понизят ваш сайт в выдаче за чрезмерное употребление ключевых слов на странице. Вы будете терять позиции, трафик и, как следствие, клиентов. А если вы решите использовать в заголовке одно ключевое слово, то никаких фильтров вы не получите, но при этом весь ваш сайт будет оптимизирован всего лишь под одно ключевое слово.
Другой важный факт – количество проиндексированных страниц. Немного утрируя, можно сказать, что количество проиндексированных страниц влияет на распределение веса страниц по сайту, а это является важным фактором для поисковых систем. Но в случае с parallax мы будем иметь одну проиндексированную страницу.
Только один комплект метатегов (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.

Рис. 3. Скриншот первого экрана сайта. Сайт – 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 имеют страницы статей, основного меню и каталога. Сайт проверялся в нескольких сервисах на работоспособность – результаты одинаково положительные. Робот поисковика адекватно индексирует сайт без каких-либо проблем: в индекс попали все внутренние страницы, которые должны были попасть.

Автор: Стив (Steve), перевод: Яков Коротков, Uplab (специалист отдела поискового продвижения)

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