SEO + AJAX: как им ужиться?

Почему это важно

Сегодня в сети все чаще можно встретить не только отдельные страницы, свёрстанные при помощи технологии AJAX, но и целые сайты, использующие этот способ вывода контента. Это продиктовано тем, что AJAX набрал большую популярность среди web-разработчиков как более современный и совершенный путь решения сложных задач динамического вывода контента и его визуализации.

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

Причины популярности технологии AJAX среди разработчиков

Одной из основных тенденций в разработке юзер-ориентированых сайтов, является их физическое ускорение. Во внимание берётся всё: время загрузки страницы, элементов на ней, скорость реакции на взаимодействие, совершаемое пользователем. При этом любая технология, которая позволяет качественно ускорить любую из составляющих сайта или отдельных его страниц, сразу после появления взлетает на пик популярности у веб-разработчиков. Это объясняется весьма просто: умея создавать более быстрые и удобные для пользователей сайты, вы получаете преимущество перед конкурентами.

AJAX как раз и является одной из технологий, внедрение которой можно назвать прорывом в сайтостроении. Ключевая особенность AJAX в том, что он позволяет сделать интерфейсы сайта асинхронными, т.е. уйти от классической модели работы «запрос – ответ – запрос», когда браузер не может выполнять никаких операций, пока не получит ответ от сервера. В итоге пользователь вынужден ждать пока «прогрузится» интерфейс.

AJAX же позволяет динамически изменять содержание страницы без полной перезагрузки, т.е. пользователю нет необходимости ждать, пока сайт «замер» в ожидании ответа от сервера. Простой пример прикладного использования: вы пишете письмо или текстовое сообщение какому-нибудь пользователю и хотите прикрепить к нему фото, картинку или видеоролик. Процесс загрузки ролика, как правило, не очень быстрый и в обычной ситуации вам пришлось бы ждать, пока он завершится, чтобы продолжить писать. С технологией AJAX вы можете параллельно набирать текст, не дожидаясь окончания загрузки. Удобно? Безусловно. И это лишь маленький бытовой пример, в то время как специалист по юзабилити сможет привести таких примеров сотни. Все эти факторы и обусловили то, что AJAX стал востребован и популярен как у разработчиков, так и у рядовых пользователей.

Однако у любой медали есть две стороны. Предоставляя определенные преимущества, AJAX накладывает и ряд ограничений, с которыми нужно считаться.

Плюсы и минусы использования AJAX для формирования страниц

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

Плюсы использования:

  • Экономичность. Ввиду того, что при запросе AJAX-страницы серверу нет необходимости заново «перегружать» весь контент и повторно генерировать всю страницу, а только часть ее (ту, которая изменяется/подгружается AJAX-скриптом), происходит значительная экономия web-трафика и снижается количество запросов-обращений на сервер.
  • Снижение серверной нагрузки. Данное преимущество вытекает из первого, когда за счет снижения количества запросов, посылаемых на сервер, снижается и нагрузка. Это особенно актуально на крупных сайтах, где количество генерируемых запросов пользователями может стать серьезной проблемой, ставящей под угрозу работоспособность.
  • Ускорение загрузки страницы. Отсутствие необходимости в перезагрузке страницы, позволяет добиться того, что конечный пользователь, значительно быстрее увидит результат своего взаимодействия с интернет-ресурсом.

В то же время AJAX может в буквальном смысле «похоронить» всю работу SEO-специалиста при некорректном использовании. Поэтому  о минусах использования данной технологии говорят обычно именно оптимизаторы.

Минусы использования:

  • Страницы сайта не индексируются поисковыми системами. Это одна из основных проблем использования AJAX. Особенно она актуальна, если принимается решение о реализации динамической подгрузки содержимого на уже оптимизированных сайтах. Некорректное использование может привести к тому, что проиндексированные страницы, которые и создают трафик, просто исчезнут из результатов поиска.
  • Искажение данных статистики. Так как поисковые системы перестают «видеть» AJAX-страницы, данные от счетчиков, установленных на них, передаются некорректно. Для крупных ресурсов, особенно работающих в нише e-commerce, это такая же большая потеря, как и исчезновение посадочных страниц из выдачи.

Из-за этих существенных минусов долгое время AJAX был неким «табу» среди оптимизаторов. Однако сегодня есть достаточно простое и логичное решение, которое может убрать негативный эффект от использования данной технологии и прийти к разумному компромиссу между SEO-специалистом, владельцем сайта, разработчиком и конечным пользователем. То есть, в полной мере использовать вышеперечисленные плюсы AJAXи избавиться от недостатков.

Как показать поисковику, где находится контент страницы на AJAX?

Основной проблемой AJAX является то, что поисковая система не может проиндексировать содержимое динамической страницы. Но для выполнения SEO-задач необходимо каким-то образом предоставить поисковому роботу возможность увидеть этот контент.

На данный момент существует несколько вариантов, как это сделать:

1.   Использование HIJAX (устаревший способ)

Это решение подразумевает использование специальной технологии под названием HIJAX (названа разработчиком, который ее придумал). Суть ее заключалется в том, что одновременно с вызовом AJAX-функции происходит переход по статической ссылке с параметром. Таким образом пользователь получает страницу с динамическим содержимым, а робот, игнорирующий вызов функции, попадает на статическую html-страницу. Выглядит это примерно так:

foo 32

Где, ="ajax.html?foo=32"  – это статическая ссылка для поискового бота, а 'ajax.html#foo=32' – это параметр для вызова AJAX-кода.

В данном случае статическая страница – это «html-слепок» (копия) динамической страницы, которую видит пользователь.

Данное решение, хоть и остается рабочим и эффективным на сегодняшний день, уже несколько устарело. С развитием технологий сайтостроения и все большей популярностью исполняемых Java-скриптов поисковые системы пришли к тому, что необходимо предоставить веб-мастерам более простые и эффективные пути решения проблемы.

2.   Использование знака «!» как указателя для поисковой системы в URL-адресе (актуальный способ)

Более современный способ, позволяющий роботу поисковой системы просканировать и проиндексировать содержимое AJAX-страницы, упростил жизнь веб-мастерам и разработчикам, позволив избежать модифицирования всех ссылок на динамическое содержимое по методу HIJAX.

Теперь для того, чтобы указать поисковому боту на то, что AJAX-страница имеет статический «html-слепок», достаточно добавить в URL восклицательный знак. Выглядит это следующим образом:

http://www.example.com/#stranica – стандартная «ссылка» на AJAX-страницу

http://www.example.com/#!stranica – модифицированный формат «ссылки» на AJAX-страницу

В таком случае как только робот встретит в URL-адресе #!, он запросит у сервера «html-слепок» страницы, который сможет проиндексировать. В то же время пользователю будет показана AJAX-страница.

Единственным условием является то, что «html-слепок» страницы должен быть доступен для поискового бота по URL-адресу, где #!, заменен на ?_escaped_fragment_=.

http://www.example.com/#!stranica – «ссылка» на AJAX-страницу

http://www.example.com/?_escaped_fragment_=stranica – ссылка на html-версию страницы

При использовании данного способа в кэше поисковой системы будет храниться html-версия страницы, доступная по «уродливому», как его называет Google, URL-адресу с ?_escaped_fragment_=, но на выдаче вид ссылки на сайт будет сохранен, то есть в нем будет стоять #!.

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

Некоторые дополнительные особенности

Использование технологии AJAX подразумевает некоторые дополнительные особенности, которые нужно учитывать при разработке нового сайта и при обновлении архитектуры уже существующего. К ним можно отнести следующие:

1. ЧПУ-адреса страниц. В стандартном виде, как было описано в примере выше, адреса страниц все равно получаются не очень красивыми, хоть Googleи называет их prettyURL. То есть, в них все равно будут присутствовать символы #!. Однако эту проблему можно обойти, присвоив стандартные статические ЧПУ (человекопонятные URL-адреса) страницам, использующим AJAX. Единственное, что нужно учесть: при этом способ имплементации «html-слепка» будет отличаться.

Для страницы вида:

http://www.example.com/stranica

«html-слепок» должен находиться по адресу:

http://www.example.com/stranica?_escaped_fragment_=

Т.е. значение параметра будет пустым, но в код самой страницы (в теге <head>) необходимо добавить строку:

 

В «html-слепке» данного тега быть недолжно, иначе он не проиндексируется.

Подобная имплементация будет актуальна и для сайтов, полностью построенных на AJAX, где то же самое придется проделать с главной страницей и любыми другими статическими URL.

2. Формирование файла Sitemap.xml. Поисковая система Yandex в своем руководстве «Помощь Вебмастеру» говорит следующее: «Ссылки, содержащие #!, также можно использовать в карте сайта», подразумевая, что можно использовать и ссылки на «html-слепки», т.е., содержащие ?_escaped_fragment_=. В то же время Google в явном виде говорит о том, что нужно использовать ссылки только с дополнением #!:

00

«Подводные камни» при использовании AJAX

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

К ним можно отнести следующие:

  • Непрогнозируемые последствия для ранжирования. Если нужно, например, для тысячи однотипных товаров поменять URL-адреса, организовав их вывод посредством AJAX, то даже при настройке постраничных 301 редиректов, ресурс может сильно «качнуть» в поисковой выдаче. Вероятность таких последствий непрогнозируемая, так как планируемые изменения не идут в разрез с требованиями поисковых систем. Но на примере ряда сайтов, можно утверждать, что проблемы вполне вероятны. В данном случае можно рекомендовать только постепенное внедрение, разбитое на несколько итераций.
  • Неясный механизм расчета скорости загрузки страницы. Данный параметр является косвенным фактором ранжирования сайта поисковыми системами, однако его влияние достаточно велико. В случае с AJAX-страницами не ясно, на основании загрузки какой из версий производится расчет скорости загрузки – версии для пользователей или html-версии для поискового робота, а значит, на данный параметр сложнее повлиять. Единственной рекомендацией тут может быть следующая: делать максимально быстрыми обе версии.

Вывод

Сегодня использование AJAX уже не является табу для поисковой оптимизации. Более того, при правильном подходе вы можете использовать данную технологию так же эффективно, как и простой html, но при этом получить ряд дополнительных преимуществ, которые дает AJAX.Основной плюс – это возможность строить более быстрые и удобные пользовательские интерфейсы.

Однако стоит помнить, что SEOшники не зря настороженно относятся к данной технологии. При некорректном использовании, без соблюдения требований поисковых систем, AJAX может привести к плачевным последствиям в виде серьезных потерь органического трафика и в ранжировании. Прежде чем «выкатывать» какую-либо из AJAX-разработок на основной домен, стоит удостовериться в том, сделана ли она в соответствии с одним из двух рассмотренных в статье способов. А также проверить, как поисковые боты «видят» данное изменение, например, при помощи инструмента «Посмотреть как Googlebot».

Оба описанных в данной статье способа решения возможных проблем являются рабочими – их использование протестировано на реальных проектах и доказало свою эффективность. Но начиная с октября 2015 года, поисковая система Google не рекомендует использовать описанные в этой статье технологии индексирования AJAXстраниц, о чем было официально написано в блоге GoogleWebmasterCenterBlog. Вместо этого, система предлагает следовать принципам «ProgressiveEnhancement» при создании сайтов, что позволит роботам Google лучше интерпретировать динамический контент – в текущий момент система в состоянии самостоятельно распознать его без дополнительной настройки, интерпретируя .jsи .css. Несмотря на это, описанные нами механизмы полностью поддерживаются поисковой системой и остаются стабильно рабочими до сегодняшнего дня.

Если вы хотите работать с нами,
давайте начнем с обсуждения задачи

Получить консультацию

Получайте новости интернет-маркетинга

Только полезная информация от экспертов Promodo

Если вы хотите работать с нами,
давайте начнем с обсуждения задачи

Получить консультацию

Есть задача?

Давайте обсудим!

Получайте новости интернет-маркетинга