Автор: Александр Денисенко
Индексация AJAX с точки зрения пользователя и программиста
AJAX — комплексный подход, используемый для реализации интерактивных веб-интерфейсов. Подход заключается в фоновом обмене данными между браузером и веб-сервером, при этом страница не перезагружается полностью, но обновляется частично.
В этом статье хотелось бы рассмотреть AJAX с трех разных позиций:
- как пользователь;
- как программист;
- как поисковый робот.
С позиции пользователя, я представляю себе AJAX как технологию (или подход), при котором можно получить новый контент на странице без перезагрузки всей страницы. Я просто нажимаю на кнопку или ссылку и через секунду получаю уже новые данные.
Рассмотрим простой пример с отправкой формы на сервер. Пользователь заполняет форму и нажимает кнопку «Сохранить». При этом страница перегружается. Это может занять некоторое время (иногда всего пару секунд). Если сайт использует AJAX технологию для общения с веб-сервером, то перезагрузки страницы не произойдет. Страница все время будет открыта и как только сервер обработает запрос, пользователь получит сообщение или новые данные.
Приложения на основе AJAX, отсылают на веб-сервер запросы, извлекающие или отправляющие только те данные, которые требуются в данный момент.
Как программист, я вижу в AJAX средство для построения современного, дружественного и быстрого интерфейса сайта. Такой подход позволяет снизить нагрузку на сервер, так как не надо при каждом запросе отдавать браузеру всю страницу целиком. При сохранении данных такой запрос также будет достаточно небольшим и ответ сервера зачастую будет содержать лишь изменившиеся данные.
В самом простом варианте это выглядит следующим образом:
- http://example.com — главная страница, на которой есть ссылки «About» и «Contacts», каждая из которых меняет URL на следующий;
- http://example.com#about – описание;
- http://example.com#contacts – контакты для связи.
С виду обычная якорная ссылка, но такой вид URL используют и AJAX сайты. Как только изменится хэш-тег, будет сформирован и отправлен запрос для получения соответствующего блока. В адрес страницы, как правило, добавляется соответствующий хэш-тег (#example), но после обновления страница будет недоступна в таком же виде, если ввести получившийся URL в новом окне или вкладке. При правильном подходе изменение на странице (вместе с текущим контентом), сразу должно быть доступно по изменившемуся URL, чтобы не нужно было снова искать нужную AJAX ссылку или кнопку на странице.
Более подробное техническое описание можно найти в Википедии.
AJAX используется такими сайтами, как Gmail, Google Maps, Facebook, Twitter, ВКонтакте. Это самые яркие представители.
Есть и третий взгляд на AJAX технологию — взгляд поисковых систем (ПС)
Индексация AJAX глазами поискового робота
Рассмотрим наглядный пример — стена пользователя или группы ВКонтакте. На странице вы видите только несколько последних записей. Если пролистать страницу вниз, то подгрузятся новые записи. К тому же, чтобы найти информацию месячной давности (не имея прямой ссылки на нее), вам придется долго листать стену вниз. Данные подгружаются средствами JavaScript. Поисковые боты (ПБ) не поддерживают JavaScript. ПБ отличаются от веб-браузеров, и у них нет возможности подгрузить новые данные. Как правило, ПБ не делает клик, а лишь запоминает ссылку для проверки. То есть, будет проиндексирована лишь страница, которую в самом начале отдал веб-сервер.
Поисковый бот при индексации анализирует только часть URL до хэш-тега, отбрасывая лишнее.
Как видите, AJAX может быть как удобен, так и обладать недостатками. Для ПС отсутствие AJAX на страницах было бы предпочтительнее. Этот подход скрывает полезный контент и прячет некоторые страницы от индексации. Для поисковых ботов индексация таких сайтов раньше была попросту невозможной. Пользователи получали более динамичный и анимационный интерфейс, а SEO-специалисты только разводили руками.
Сегодня часто можно встретить «одностраничные» сайты. Загружается главная страница и только потом нужный контент догружается в ответ на действие пользователя с помощью фонового AJAX запроса. Поскольку технология начала набирать популярность, ПС были вынуждены отреагировать.
В 2009-м году в блоге Google появилась публикация с предложением сделать AJAX сайты индексируемыми.
Яндекс публично заявил о способности индексировать динамический контент в мае 2012 года http://webmaster.ya.ru/replies.xml?item_no=13754.
Оба предложенных решения к счастью веб-разработчиков оказались одинаковы.
Вот как описывает свое решение Яндекс в заметке «Индексирование AJAX сайтов»:
Заменить в URL страниц символ # на #!. Так робот будет понимать, что он может обратиться за HTML-версией контента этой страницы.
HTML-версия контента этой страницы размещается на URL, где #! заменен на ?_escaped_fragment_=.
Сразу же в голове возникает мысль, что можно вручную подставлять вместо хэш-тега в URL _escaped_fragment_, однако Google говорит следующее на своем сайте поддержки в ответе на вопрос «Когда нужно использовать _escaped_fragment_ и #! в URL AJAX?»:
«Сайт должен использовать синтаксис #! во всех URL, поддерживающих схему сканирования AJAX. Робот Googlebot не переходит по гиперссылкам в формате _escaped_fragment_.»
Также у Google есть страница с более полным техническим описанием взаимодействия веб-серверов и поисковых ботов, которую можно найти по этой ссылке.
Связка #! нужна для реализации обхода прямой индексации AJAX. Когда поисковый бот встречает эти два символа, то понимает, что эту ссылку проверять в чистом виде бесполезно. Часть контента по этой ссылке будет скрыта. Вместо этого, делается другой запрос на специальный URL, где #! будут заменены на ?_escaped_fragment_=. Технически, вместо AJAX запроса будет сделан прямой запрос по новому URL с заменой, чтобы получить контент этой страницы. Хэш-теги будут работать только в браузере с поддержкой JavaScript.
На самом деле ПС не реализовали нативной, независимой от кода сайта индексации AJAX страниц и ссылок. Но они предложили способ, который работает. Решение выглядит не самым лучшим и многих оно до сих пор не устраивает. Вебмастерам приходится делать лишние ухищрения, чтобы выглядеть профессионалами как в глазах пользователей, так и в глазах ПС. Страницы, которые будут запрашиваться с параметром _escaped_fragment_ зачастую приходится создавать дополнительно, что усложняет внутреннее устройство сайта. Многие (большинство) сайтов даже не реализовывают этот вариант, оставляя динамический контент вне поиска.
Еще одно лаконичное описание, из которого видно, насколько AJAX усложняет жизнь разработчиков на примере Twitter
http://www.tbray.org/ongoing/When/201x/2011/02/09/Hash-Blecch.
PushState — часть HTML5 History API
Кроме подмены URL стандартными средствами JavaScript, в спецификации HTML5 появился метод pushState, который делает использование AJAX более дружественным. Фактически метод только изменяет текущий URL, который отображается в адресной строке браузера.
Недавно на канале Matt Cutts в Youtube появился видеоответ на вопрос
«Should I use pushState to update my URLs instead of using the hashbang (#!) style to manage AJAX navigation?».
В ответе прозвучало, что для Google предпочтительнее встретить на сайте навигацию, сделанную с помощью pushState. В этом случае ПБ не нужно делать дополнительную работу по перестраиванию запроса с отлавливанием связки #! и использованием замены для получения хорошей ссылки. Это уже весьма радостная новость, но в официальных документах Google детального описания метода обработки использования pushState для навигации пока не обнаружено.
Навигация продолжает работать и ссылки не выглядят так ужасно, как в случае использования хэш-тега.
Старый вариант продолжает ормально работать для ПС, но многие сайты сейчас выбирают путь избавления от хэш-тегов в URL.
В частности, Twitter объявил хэш-тегам войну http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html и пошел по пути использования pushState http://engineering.twitter.com/2012/12/implementing-pushstate-for-twittercom_7.html.
Инструменты для SEO специалистов, работающих с AJAX сайтами
Нет идеального инструмента, который сразу сказал бы вам, что все ссылки индексируются правильно. Но есть действительно заслуживающие внимания.
Самый простой способ проверить какие страницы уже проиндексированы на данный момент – ввести запрос «site:домен» в нужной поисковой системе (ПС). Вы увидите статические страницы и страницы, использующие AJAX, если они у вас есть.
Fetch as Googlebot покажет ваш сайт глазами гуглбота. Если вы добавили свой сайт в Google и он прошел проверку, то вы сможете не только убедиться, что ссылка попала в индекс, отправить ее вручную, но и сравнить фактическую страницу с ее снимком в предпросмотре страниц. Например, если вместо нужного контента отображается стандартная заглушка для ненайденной страницы, то вы сможете это исправить прежде чем ссылка будет проиндексирована.
We recommend using Fetch as Google to check the crawlability of your site, along with other tools such as:
- HTML suggestions: See recommendations for improving your title tags, meta descriptions, and other HTML elements that can affect your site’s performance in search
- Crawl errors: See which pages Google had trouble crawling.
Ранее я упоминал, что веб-мастерам приходится делать копию страницы или программное ухищрение, чтобы она попала в индекс с конструкцией _escaped_fragment. Это пример того, как может использоваться «черная» поисковая оптимизация или «клоакинг». Ее основной смысл в том, чтобы подменить контент страницы в глазах ПС. Вместо действительного контента ПБ увидит и проиндексирует совсем другой текст. Таким образом нерадивые SEO-специалисты пытаются повысить рейтинг сайта в поисковой выдаче. Иногда можно пропихнуть в индекс даже сайты, которые были бы заранее отсеяны при проверке или проиндексировать их с другими ключами, которые более популярны. Однако при фиксировании попытки «клоакинга» ПС вовсе удалит вас из базы.
Современные методы использования AJAX диктуют непростые для поисковых систем решения, однако это еще один источник информации и умение ПС работать с ним делает информацию в Интернете более доступной.
Автор: Александр Денисенко
