AJAX, Google и кнопка Назад

Уже года этак 3 использую элементы AJAX на своих сайта, но только сегодня (24.12.09) я собрал в одном флаконе AJAX, ботов Гугла и кнопки назад-вперёд браузеров.

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

Итак. Что получилось.

Проблема:

• при использовании JavaScript для загрузки страниц/части страницы гугл не видит эти ссылки, т.к. он почти не умеет понимать JavaScript. Но с каждым днём учится всё больше и больше.
  
• при использовании JavaScript кнопка браузера предыдущая страница ведёт черт знает куда, в кнопка следующая страница вообще выпадает из жизни, а народ на них клацает
• если ставить полноценные ссылки для гугла/кнопок браузера ломается весь AJAX

Решение:

1. Все ссылки изначально ставлю как для гугла - старый добрый вид http://server/raz/dva/tri/?param1=value1. Т.е. с индексацией в гугле проблем не будет.

2. При загрузке/в конце документа вешаю свой обработчик, который преобразует ссылки (внешние не трогает) к виду http://server/current_page/#/new/page/address/?param1=value1 и попутно вешает на onclick мой обработчик на JavaScript, который отвечает за AJAX'овую загрузку контента. На этом шаге AJAX уже работает и можно кликать вперёд/назад в браузере по анчорам, но эти анчёры никуда пока не ведут.

3. Разбираюсь с анчёрами. Вешаю методом setInterval() каждую четверь секунды проверку на смену location.href. И если он поменялся, то парсю новый урл и скармливаю часть урла после # (anchor) своей функции, отвечающей за загрузку контента. Чтобы функция лишний раз не дёргалась при работе самой себя ввожу флаг, который говорит, что AJAX уже в работе и ничего грузить не нужно.

Если данные грузятся не по ссылке, то вызываемая функция должна сама позаботится выставить флаг и поменять location.href.

Вот собственно и вся идея.

Осталось разобраться с людьми, которые пришли ко мне по AJAX'ой ссылке и показать нужную им страницу. Для этого в шаблон в месте, которое уже позволяет работать всему моему AJAX'у вставляю проверку на наличие анчора в location.href. И, при наличии оного, скармливаю его моей функции, что приводит к загрузке нужной страницы.

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

Единственный видимый мне недостаток - это внешние ссылки на сайт/букмарки, которые может поставить народ тупо взяв адрес из адресной строки с анчорами для AJAX. Но можно полечить повесив кнопку пермалинк с правильным урлом. Гугл-же по такой ссылке припрётся немного не на ту страницу :(

Посмотреть на достижения можно на сайте www.ekadoo.com.

Если есть более правильное/красивое решение - коменты всегда велком.

PS: Ходят слухи, что для JavaScript изобретут/изобрели событие, которые генерится при нажатии кнопок браузера вперёд - назад, но мне такое пока не попалось. Если кто знает - отпишитесь плиз.

Добавлено: Google умеет замечательно сканировать и индексировать AJAX-сайты, которые сделаны по описанному выше алгоритму, или по рекомендациям от Google для AJAX-сайтов. Но в случае следования рекомендация от Google, Яндекс пока сосёт причмокивая, и для него нужно использовать только описанный мной метод.

Тэги:

Обсуждение:

• Автор: Анонимус
• Отличный материал и хорошие сноски внизу страницы на блог Гугла, спасибо!
• Отправлено: 2011-03-08 22:49:38