Продвижение сайта на AJAX

Обезумевший древнегреческий Аякс убивает себя. Надеемся, у технологии Ajax судьба будет веселее.

Обезумевший древнегреческий Аякс убивает себя. Надеемся, у технологии AJAX судьба будет веселее.

При раскрутке сайта, сделанного c использованием AJAX, возникают проблемы индексации.

Означает ли это, что нужно отказываться от новых технологий? Вовсе нет. Давайте разбираться.

Что такое AJAX и зачем его используют?

Как работает «обычный» сайт:

  1. В браузере появилась страница.
  2. Пользователь кликает по ссылке.
  3. Старая страница пропадает. Пользователь видит белый лист.
  4. Начинает отрисовываться новая страница.
  5. Переход к п. 1.

Как работает сайт на AJAX:

  1. В браузере появилась страница.
  2. Пользователь кликает по ссылке.
  3. Меняется определенный фрагмент страницы.

На AJAX-странице встроена программа на JavaScript, которая умеет загружать с сервера небольшие порции данных, и показывать их в нужных местах.

Плюсы

  • Почти мгновенная загрузка без мелькания «белого» окна.
  • Снижается нагрузка на сервер.
  • «Бесшовный» пользовательский опыт. Плавный переход от одной странице к другой. Пользователь хочет оставаться на сайте, а не уйти за чаем / в соц. сеть.

Минусы

  • Сайт — это не текст, а программа. Поисковые роботы хотят видеть текст.
  • При отключенном JavaScript (пусть это редкость), пользователь видит пустую страницу.
  • Многократно возрастает сложность проектирования и разработки. Сайт на AJAX стоит дороже.

Пример

Самый впечатляющий пример — это социальная сеть ВКонтакте.

Плеер, который играет даже когда мы ходим со страницы на страницу. Ну не фантастика ли!

Плеер, который играет даже когда мы ходим со страницы на страницу. Ну не фантастика ли!

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

Всё потому что никакой перезагрузки не происходит. Специальный JavaScript умеет переформатировать страницу, и возникает ощущение, будто мы куда-то перешли.

 

Как заставить сайт индексироваться

Раньше поисковики игнорировали сайты на AJAX. Теперь есть несколько способов успешно проиндексироваться и попасть в поисковую выдачу.

1. Способ от Яндекса (и для Яндекса)

С мая 2012 года Яндекс предлагает «фирменный» (то есть работающий только для него) способ индексации AJAX-ресурсов: http://help.yandex.ru/webmaster/robot-workings/ajax-indexing.xml.

Чтобы им воспользоваться, нужно:

  1. Переписать ссылки в приложении. Если они содержат решетку, нужно добавить после неё восклицательный знак. Например:
    http://www.example.com/#blog > http://www.example.com/#!blog

    В поисковой выдаче эти сайты выглядят так:

    Сайты на JavaScript в выдаче Яндекса

  2. Отдавать поисковому роботу AJAX-фрагменты по GET-параметру ?_escaped_fragment_.
    Например, фрагмент AJAX-страницы с адресом «#!blog», нужно продублировать по адресу /?_escaped_fragment_=blog.
  3. На аякс-страницах прописать мета-тег:
    <meta name="fragment" content="!">
  4. В Яндекс.Метрике (если вы ей пользуетесь) включить обработку адресов с хэшем (то есть с «решеткой»):

Передайте вашему программисту инструкции:

Плюсы способа

Это официальный способ, который 100% работает с поисковой системой Яндекс.

Минусы

  • Требует серьезных вложений в программирование.
  • Другие поисковики не научатся понимать ваш сайт.

Думаете, мы горазды только в планшетики тыкать рассуждать да умные статейки пописывать? :)

А вот и нет! Мы поработаем с вашим сайтом бесплатно и проверим с точки зрения SEO и удобства использования:

  • — корректность заголовков, HTML-тегов, верстки;
  • — скорость загрузки страниц;
  • — работу форм;
  • — тексты (орфографию, переспам) и дубликаты страниц (!);
  • — ссылки на сайте — есть ли «путь», который приведет к заказу;
  • — файлы robots.txt, sitemap.xml.

Оставьте контакт для бесплатной проверки сайта:



 

2. Способ от сторонних сервисов

Так как AJAX шагает по планете, появились сервисы, которые «переведут» ваш сайт. Для поисковых роботов он будет не AJAX-программой, а обычным сайтом с текстовыми страничками.

Вот 3 подобных сервиса:

К сожалению, только сервисы только западные.

Плюсы

  • Доступность «из коробки»: ничего не нужно изобретать или программировать. От программиста требуется лишь установка.
  • Бесплатность для небольших сайтов.

Минусы

  • Платно (в валюте) за большие объемы.
  • Черный ящик: как это работает — тайна, покрытая мраком. Есть риск отказа сервиса, с которым нужно мириться.

 

3. «Серединный путь»

Способ, родившийся задолго до того, как поисковики научились хоть как-то понимать AJAX.

Принцип

Показываем обычный сайт, который затем перехватывает управление.

JavaScript-программа соседствует с «классическим» кодом, который полностью отрисовывает страницу на сервере.

И здесь нам на помощь может прийти тег <noscript> — брат-близнец тега <script>. Он устанавливается специально для поисковых роботов, а также для пользователей пользователям, у которых отключены скрипты.

Если у пользователя (или робота) нет возможности воспроизвести JavaScript-программу, показывается содержимое <noscript>.

Пример

http://html5.gingerhost.com/seattle — сайт сначала обычный текст, а клики по ссылкам обрабатывает JavaScript.

Плюсы

  • Универсальность.
  • Можно внедрить на существующий сайт (как на классический, так и на AJAX-сайт).

Минусы

  • Двойная работа: нужно написать как «классический» сайт, так и JavaScript-обвязку для работы через AJAX. Удорожание разработки сайта.
  • Усложнение внутренней логики. Удорожание поддержки.

 

А как дела в Google?

Google давно работает над тем, чтобы индексировать AJAX-страницы.

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

Именно поэтому лучше позволять поисковым роботам индексировать все ресурсы: не только страницы, но и скрипты.

 

Кейс: успешная индексация сайта на JavaScript и Flash

В далеком 2006 году «Тойота Екатеринбург Восток» создали изумительный сайт.

Сайт «Тойота Центр Екатеринбург Восток» в 2006 году

Сайт «Тойота Центр Екатеринбург Восток» в 2006 году

Проблема

Продвижение оказалось проблематичным, так как сайт был сделан на полностью «нетекстовых» технологиях: JavaScript и Flash. То есть поисковые роботы видели лишь программный код вместо ожидаемых текстов.

Решение

Был использован способ №3 (двух других пока ещё не было): для каждой страницы изготовили «подложку» внутри <noscript> — и показывали пользователям сайт «во всей красе», а поисковикам — только текстовое содержимое.

Результат: 3-я позиция в Яндексе по запросу «Тойота» по всей России (тогда была ещё общая федеральная выдача без деления на регионы).

 

Вывод

Описанные методы добиваются одного: чтобы поисковый робот видел обычный текст.

Если ваш AJAX-сайт предоставляет информацию для робота в наиболее понятном для них виде, вы получаете:

  • сайт, приятный для пользователя (ведь, вы этого добивались, когда решили использовать AJAX),
  • индексацию поисковиками.

Эта статья поможет вам, когда AJAX решит войти в вашу жизнь.

Сохраните её у себя в Facebook, кликом по ссылке«Поделиться» (внизу слева):

Бая-я-янНе пригодитсяУже слышал об этомПолезноОчень полезно ← Оцените пост
  • А если у меня AJAX реализован так: есть страница, на которой размещен виджет-аккордеон из комплекта JQuery из n секций, настроенный таким образом, что при открытии секции кликом в нее подгружается содержимое некоторой предназначенной для данной секции html-страницы. Разве эту подгружаемую страницу поисковики не проиндексируют в общем порядке? Будет ли достаточно просто поставить на нее редирект, чтобы с выдачи пользователи попадали на ту основную ajax-страницу? И в карте сайта прописать все это дело. И еще: редирект на сами поисковики распространяется или это можно сделать только для пользователей?

    • 1. Когда страница присутствует в sitemap.xml — конечно же, поисковики ее увидят.

      2. Вы предлагаете редирект, чтобы вести пользователя на главную.

      Здесь действительно необходима какая-то обработка — ведь в этом случае поисковый робот дадет ссылку именно на эту страницу, а не на главную (которая вам по идее нужна).

      Если вы делаете редирект серверными средствами, поисковый робот не сможет проиндексировать вашу страницу.

      Если делается редирект через JavaScript — поисковик может расценить это как какой-нибудь черный метод продвижения. Ведь получается что «простой» браузер поисковика не может перейти по редиректу, а полноценный браузер пользователя — может. Не будет ли это чем-то вроде клоакинга? А может быть и сработает.

      Что же делать?

      Вы можете разработать код js, который будет вставлен на каждую страницу, и отрисовывать перед пользователем главную, в которую будет загружен соответствующий контент.

      При этом сам контент должен находиться в теге . А переходы по ссылкам тогда должны отлавливаться через js и HTML5 History API.

      • Не, тогда можно похитрее изощриться: оформить вспомогательные страницы вменяемыми стилями, чтобы пользователь мог ими нормально пользоваться, но дать ссылку на основную страницу на видном месте. При этом данную ссылку обернуть в класс, который не будет отображаться на ajax-странице (специфичный вложенный селектор составить). Заодно жирная перелинковка получится!

    • Есть еще такой момент.

      Sitemap — это всего лишь список. Пусть даже очень полезный для роботов.

      Важно поисковику показывать ещё и перелинковку страниц. Иначе сайт рискует проиграть другим, с перелинковкой.

  • SEO4Ajax

    Hi,

    As the co-founder of SEO4Ajax, I want to thank you for mentioning our service. Your blog post seems really complete and interesting. I just want to note that Google and Bing support the same specification to index Ajax websites: https://developers.google.com/webmasters/ajax-crawling/ http://webmasters.stackexchange.com/questions/45114/do-other-search-engines-support-googles-hash-bang-syntax-for-crawling-ajax-ap

    • Hi,

      Thank you for the information! We will certainly add it to the post.