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

1. Почему это важно Сегодня в сети все чаще можно встретить не только отдельные страницы, сверстаны...
2. Преимущества и недостатки использования AJAX для формирования страниц
3. Преимущества использования:
4. Недостатки использования:
5. Как показать поисковике, где находится контент страницы на AJAX?
6. 1. HIJAX (устаревший способ).
7. 2. Использование знака "!" Как указания для поисковой системы в URL (актуальный способ)
8. Некоторые дополнительные особенности.
9. «Подводные камни» при использовании AJAX
10. вывод

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

Сегодня в сети все чаще можно встретить не только отдельные страницы, сверстаны с помощью технологии 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_ =, но на выдаче вид ссылки на сайт будет сохранен, то есть в нем будет стоять #! .

При использовании этого способа в кэше поисковой системы будет сохраняться 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_=

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

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

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

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

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

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

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

вывод

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

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

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

Похожие

Комментарии