PRO НАС / Индексируемый AJAX-сайт или HTML5 History API уже сегодня и без ограничений

До недавнего времени flash-сайты были мегапопулярны в качестве промо-сайтов, да и сейчас еще остаются "на плаву". Что сделало их такими популярными для реализации "имиджевых" проектов, помимо плавности загрузки, наличия анимации и сглаженности шрифтов? Одним из ключевых моментов является возможность плавного перехода с одной страницы сайта на другую. Браузер не перезагружает страницу всякий раз при клике на пункт меню. Контент плавно сменяется на новый без "передергивания". Пример из нашего портфолио: сайт ресторана-клуба "НичеGo Личногo" (lichnogo.net) Но почему-же данная технология не используется для разработки "продающих" сайтов: каталогов, интернет-магазинов и т.п.? На создание качественного flash-сайта нужно выделить бюджет, в разы превышающий стоимость разработки обычного html-сайта. К тому же flash-контент до сих пор достаточно проблемно индексируется поисковыми роботами, что затрудняет продвижение flash-сайта. Если и удастся продвинуть такой сайт, то он совершенно точно будет проигрывать html-конкурентам. И да, на некоторых устройствах flash не работает)

Но ведь так хочется плавных красивых анимированных переходов.. И чтобы продвигаться можно было. И технология AJAX делает это возможным.

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

При создании AJAX-сайтов могут использоваться URL с #, но такой URL не используется поисковым роботом. Как правило, часть URL после # отсекается. Поэтому вместо URL вида http://site.ru/#example он обращается к главной странице сайта, расположенной по адресу http://site.ru. Это значит, что контент страницы может не проиндексироваться и, как следствие, не попасть в результаты поиска.
Поэтому, для улучшения индексации AJAX-сайтов поисковые системы внедрили механизм для их индексации. Теперь вебмастер AJAX-сайта может указать поисковому роботу на необходимость индексации, поддержав соответствующую схему в структуре сайта. Для этого нужно:

1. Заменить в URL страниц символ # на #!. Так робот будет понимать, что он может обратиться за HTML-версией контента этой страницы.
2. HTML-версия контента этой страницы размещается на URL, где #! заменен на ?_escaped_fragment_=.

Пример:
URL: http://www.examplesite.ru/#blog
Заменили на: http://www.examplesite.ru/#!blog
Положили HTML-контент на URL: http://www.examplesite.ru/?_escaped_fragment_=blog

3. При этом контент главной страницы должен быть доступен по адресу http://www.examplesite.ru/?_escaped_fragment_=
4. Чтобы робот понимал, что главная страница также на AJAX, нужно разместить мета-тег <meta name="fragment" content="!">. Мета-тег может использоваться на любой странице, сгенерированной с помощью AJAX.

В этом случае страница будет проиндексирована поисковым роботом, а в результатах поиска пользователи увидят «правильные» URL – без
?_escaped_fragment_=.

Но и это решение имеет свои недостатки:

  • По некоторым данным механизм дает сбои и работает некорректно. В индекс попадают неправильные адреса;
  • К тому же, что делать пользователям, у которых отключен JavaScript? Да, таких мало. Очень мало. Но они есть;
  • Нужно затрачивать дополнительные ресурсы для обработки URL-адресов с ?_escaped_fragment_ и генерировать html версию страницы.

А что если отказаться от хэш-навигации? Ведь JavaScript (если он включен) позволяет обработать событие клика по ссылке и выполнить AJAX-подгрузку данных без фактического перехода. Но как же быть с адресом страницы в этом случае? Хотелось бы, чтобы при клике на ссылку "контакты" в браузере пользователя появился адрес "http://www.example.ru/contacts". Возможно ли это? Ответ: да. В браузерах, поддерживающих HTML5. И делается это с помощью HTML5 History API. И мы реализовали это в одном из наших проектов: http://www.portarobusto.ru/

Задача

Реализовать функциональность конфигуратора межкомнатных дверей Porta Robusto с возможностью совершения заказа.

Технологические решения

Решено было не заморачиваться с ?_escaped_fragment_. Все URL сохраняются в привычном виде и свободно индексируются как любой HTML-сайт.

Для работы с HTML5 History API используется немного дописанная библиотека одного из Хабражителей.
Анимация и AJAX-запросы реализуюся с помощью jQuery и jQuery UI, ну куда же без них..

В HTML5-браузерах все очень здорово получается с History API. Мы "перехватываем" клик по ссылке, подгружаем данные, делаем Push в историю и меняем url без фактической перезагрузки. Получается привычная всем ссылка вида http://www.portarobusto.ru/catalog/ без всяких лишних решеток.

Отлично. Но что же делать пользователям, чей браузер еще не обновлен и не поддерживает HTML5? А ведь и там хочется, чтобы все происходило без перезагрузки страницы. Здесь, увы, уже никуда не денешься без решеточки. URL каталога в адресной строке браузера пользователя будет иметь вид http://portarobusto.ru/#!catalog/.

И еще момент. Что делать, если пользователь скопировал URL из HTML4 браузера в HTML5 браузер и наоборот? Тут все просто. В HTML5 браузере мы убираем, а в HTML4 браузере добавляем фрагмент "#!".

Вся "надстройка" для подобного поведения URL отрабатывает на стороне клиента. На стороне сервера мы просто отслеживаем какой запрос пришел. Если это ajax-запрос, выдаем JSON-объект с определенным синтаксисом и парсим его на стороне клиента, "распихивая" содержимое по плэйсхолдерам и выполняя коллбэки нужных функций.

Рабочий проект находится по адресу: http://www.portarobusto.ru/

Автор: Марк Мишко