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

При використанні цього способу в кеші пошукової системи буде зберігатися 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 явно говорить про те, що слыд використовувати посилання лише з додатком #!:

 00

«Підводні камені» при використанні AJAX

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

До них можна віднести такі:

  • Непрогнозовані наслідки для ранжування. Якщо потрібно, наприклад, для тисячі однотипних товарів змінити URL-адреси, організувавши їхній вивід за допомогою AJAX, то навіть при налаштуванні посторінкових 301 редиректів ресурс може сильно «качнути» в пошуковій видачі. Вірогідність таких наслідків непрогнозована, оскільки заплановані зміни не йдуть врозріз із вимогами пошукових систем. Але на прикладі ряду сайтів можна стверджувати, що проблеми цілком вірогідні. В цьому випадку можна рекомендувати лише поступове впровадження, розбите на декілька ітерацій.
  • Незрозумілий механізм розрахунку швидкості сторінки. Цей параметр є непрямим чинником ранжування сайту пошуковими системами, однак його вплив достатньо великий. У випадку з AJAX-сторінками неясно, на підставі завантаження якої з версій проводиться розрахунок швидкості завантаження – версії для користувачів або html-версії для пошукового робота, а значить, на цей параметр складніше впливати. Єдиною рекомендацією тут може бути наступне: робити максимально швидкими обидві версії.

Висновок

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

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

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

Якщо ви хочете працювати з нами,
давайте почнемо з обговорення завдання

Обговорити задачу

Отримуйте новини інтернет-маркетингу

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

Отримуйте новини інтернет-маркетингу