AJAX (від англійської Asynchronous Javascript and XML) – це технологія динамічного підвантаження даних на сайті, наприклад, для нескінченного завантаження контенту на головній або іншій сторінці. Характерний маркер AJAX – безперервне підвантаження контенту. Простими словами, AJAX – оновлення сторінки без її перезавантаження.
Фоновий обмін даними з сервером покращує досвід користувача, адже не потрібно витрачати час на підвантаження сторінки і, як правило, натискання кнопок пагінації. Для впровадження динамічного підвантаження даних до шаблону сайту необхідно додати відповідний скрипт.
Порівняно з іншими веб-технологіями, АЯКС доволі молодий: вперше про нього як самостійний підхід до формування інтерфейсів веб-додатків заговорили в 2005 році. Автором технології прийнято вважати Джессі Джеймса Гаррета.
Як влаштований AJAX технічно
В AJAX використовується кілька технологій: підхід Dynamic HTML для постійної зміни вмісту веб-сторінки та відразу кілька технологій динамічного звернення до сервера. Зокрема, динамічна генерація тегів img та script та динамічна генерація побічних фреймів.
Що стосується форматів даних, то для їх передачі в AJAX можна використовувати XML, стандартний текст, JSON та стандартний HTML.
AJAX та SEO: проблеми з індексуванням
Чи може Google сканувати контент AJAX? Коротка відповідь: так, може. Довша відповідь — так, але краулерам робити це складніше. Односторінкові веб-застосунки, що використовують фреймворки АЯКС, історично були дуже проблематичними з точки зору SEO. Ось їх основні недоліки:
- Проблеми із скануванням. Важливий для краулерів контент був прихований усередині JavaScript, який відображався лише на стороні клієнта, а це означало, що роботи Google по суті бачили порожній екран.
- Проблеми з навігаційною панеллю (Кнопка «Назад» не працює в браузері або працює некоректно).
- Маскування. При AJAX-підході вебмайстри створювали дві версії контенту. Першу – для користувача, другу – для пошукових систем. А це заборонено та карається санкціями.
Протягом багатьох років Google радив вебмайстрам використовувати відповідну схему сканування AJAX — щоб повідомляти краулерів про те, що на сайті є контент AJAX. Схема сканування AJAX за допомогою параметра _escaped_fragment дозволяла Google отримувати попередньо оброблену версію сторінки.
Така версія мала стандартний статичний HTML-код, який Google міг легко аналізувати та індексувати. Іншими словами, сервер давав вказівку краулерам сканувати сторінку, відмінну від тієї, яка була доступна у вихідному коді.
Все змінилося у 2015 році. Google оголосив, що тепер його краулери навчилися сканувати, читати та аналізувати контент усередині JavaScript без будь-яких проблем, що зробило застосування схеми сканування AJAX із параметром _escaped_fragment застарілою.
Що відбувається з індексацією AJAX-сторінок
Google часто лукавить. Сьогодні він заявляє, що жодних складнощів з обходом та індексуванням AJAX-сайтів у нього немає. Але було б ризиковано просто вірити йому на слово та втратити роками набраний трафік та позиції сайту.
Дійсно, Google може індексувати динамічний контент AJAX. Але є неочевидні моменти:
- Прихований HTML. Якщо важливий контент захований у JavaScript, краулерам може буде складніше отримати до нього доступ. Індексування (і наступне ранжування) може бути припинено штучно. Щоб уникнути цього, переконайтеся, що важливий для користувача вміст зберігається у форматі HTML. У цьому випадку краулери Google і його легко проіндексують.
- Відсутні посилання. Google використовує внутрішні посилання як сигнал для встановлення зв’язку між сторінками сайту. А зовнішні посилання — як один із чинників ранжування. Іншими словами, коли контент якісний, експертний – на нього посилаються інші трастові домени. Дуже важливо, щоб посилання на сайті були доступні для краулерів і не ховалися у JavaScript.
Як AJAX впливає на SEO
Виходить, дотримуючись вищезгаданих умов, можна зовсім не турбуватися про індексацію AJAX-контенту?
Для цього повернемося в минуле і знайдемо офіційну відповідь Google, з цього приводу:
«…поки ви не блокуєте Googlebot від сканування JavaScript або CSS, Google відображатиме ваші сторінки в результатах пошуку».
Формулювання дещо туманне, але суть ясна. Google ніби каже: “Це не наша проблема, а ваша”. Таким чином, більше не потрібно використовувати обхідні шляхи та «милиці», щоб дати зрозуміти пошуковику, де AJAX-контент, а де звичайний. Він уміє сканувати його самостійно.
Google активно виступає за контент та користувальницький досвід. AJAX-контент дещо суперечить цьому підходу: взяти хоча б некоректну URL-адресу сторінки, яка формується за такого підходу. А для краулерів це важливо: URL має відображати реальне розташування сторінки!
Щоб вирішити проблему з URL-сторінок під час AJAX-підходу, потрібно використовувати History API з функцією pushState(). Вона змінює URL-адресу, що виводиться на стороні клієнта.
Використання pushState дозволяє зберегти АЯКС-контент на сайті та вирішує проблему некоректної URL-сторінки.
Ще одна річ, на яку Google звертає увагу — це hashbang (#!). Гугл шукає параметри з хешбенгом для ідентифікації динамічних URL-адрес та їх обробки (різними способами). Краулер сканує все, що йде після хештегу і передає це як параметр URL, а потім просто запитує статичну версію сторінки, яку він може прочитати, проіндексувати та ранжувати.
Як зробити AJAX-контент доступним для Google
Ось ще кілька порад, які допоможуть зробити AJAX-сторінки та AJAX-контент доступними для пошукових систем.
- Оптимізувати структуру URL. Рекомендуємо використовувати метод History API c pushState замість протоколу_escaped_fragment (який вже застарів, як ми пам’ятаємо).
PushState оновлює URL-адресу в адресному рядку, щоб будь-який контент, що знаходиться у JavaScript, виводився без будь-яких проблем.
- Оптимізувати швидкість сайту. Коли браузер на стороні клієнта створює DOM (інтерфейс програмування додатків) — велика ймовірність створення роздутого коду всередині HTML. Такий код знизить швидкість завантаження сторінки і, отже, ускладнить роботу краулерів Google. А ви пам’ятаєте, що у них, до того ж, існують ще й ліміти за кількістю звернень до сайту при скануванні, так званий Crawl Budget?
Краулінговий бюджет – ліміт пошукового робота за кількістю звернень до певного домену.
Так що переконайтеся, що ви видалили всі ресурси, які блокують рендеринг, щоб Google міг ефективно аналізувати CSS на сторінці і всі скрипти.
Сайти повністю на AJAX довгий час були головним болем для власників, адже пошукові системи не вміли індексувати їх коректно. Зараз проблему індексування AJAX-контенту успішно вирішено.
Тим не менш, AJAX-підхід, як і раніше, може бути дещо громіздким для великих сайтів і навіть шкідливим для SEO, якщо ви не знаєте, як правильно впроваджувати такий контент.
Використовуйте функцію History API та всі поради, які ми дали вище: так ви застрахуєте свій сайт від проблем з індексацією та зможете використовувати всі переваги технології без страху санкцій. А prerender допоможе переконатися, що AJAX-контент доступний при кожному зверненні Googlebot’а.
Prerender або попередній рендеринг — це процес попереднього завантаження всіх елементів на сторінці для підготовки до їх перегляду пошуковим роботом. Служба пререндерингу перехоплює запит сторінки, щоб дізнатися, чи є user-agent (що переглядає ваш сайт) ботом
Якщо так, пререндер відправить кешовану версію вашого сайту (для показу з усіма JavaScript, зображеннями тощо). Це буде статична сторінка. Якщо user-agent не є ботом — все завантажується як завжди. Таким чином, пререндер використовується для оптимізації взаємодії лише з ботами.
Чому у пошукових систем виникали серйозні труднощі при спробі індексації сайтів із AJAX? Щоб відповісти на це питання, необхідно розглянути, як саме відбувається взаємодія клієнта із сервером.
Послідовність звернення до сервера: стандартний та AJAX
Стандартний підхід до побудови інтерфейсу веб-додатку передбачає наступну послідовність взаємодії клієнта та сервера:
- Користувач відкриває сторінку сайту.
- Відбувається взаємодія із будь-яким елементом на сторінці.
- При відповідному кліку браузер створює HTTP-запит.
- Сформований HTTP-запит надсилається на сервер.
- Сервер створює нову версію сторінки.
- Браузер отримує відповідний запит і перезавантажує початкову версію веб-сторінки, щоб вивести сторінку зі змінами.
AJAX ж підхід передбачає зовсім іншу послідовність взаємодії клієнта та сервера:
- Користувач відкриває сторінку сайту.
- Відбувається взаємодія із будь-яким елементом на сторінці.
- Скрипт на сайті ідентифікує тип даних, який потрібний для отримання оновленої версії веб-сторінки.
- Браузер або інший веб-клієнт посилає всередині запиту HTTP необхідний тип даних.
- Сервер відповідає, повертаючи документ не повністю, а лише ту частину, яка необхідна для оновлення сторінки
- Скрипт на сайті видозмінює вміст сторінки з урахуванням даних, отриманих у HTTP-запиті, який прийшов з сервера.
Переваги AJAX
AJAX-підхід особливо цінний для медіаконтенту. Якщо на сайті використовується відео або аудіоплеєр, то AJAX дозволяє транслювати потік безперервно. Ця технологія використовується великими проектами, як SoundCloud, Last.fm, YouTube, Vimeo.
YouTube досі використовує AJAX-підхід на всіх сторінках сервісу
Ось ще три сценарії, коли AJAX буде особливо актуальним на сайті для користувача та вебмайстра:
- Користувач не може завантажувати великі обсяги трафіку. Сайти, створені повністю на AJAX, завантажуються набагато швидше і економлять трафік користувача.
- Вебмайстер хоче запровадити вікно з динамічними даними. Наприклад, зробити показ залишку товару в інтернет-магазині чи вікно з підказками. AJAX ідеальний для виведення таких даних. Контент при цьому виводиться миттєво, без затримок чи підвантажень.
- Вебмайстер зіткнувся з перевантаженістю сервера. У більшості випадків AJAX дозволяє істотно знизити навантаження сайту, що створюється на сервері. Справа в тому, що підвантажується лише змінена частина сторінки або навіть голий набір даних, який пізніше змінюється за рахунок скрипту.
Недоліки AJAX
Насамперед недоліком AJAX можна назвати труднощі індексування сторінок. Такі проблеми можуть виникати за недостатньо продуманого впровадження підходу і без відповідної підготовки: наприклад, через установку плагіна, що додає динамічне підвантаження контенту.
Ось ще кілька недоліків AJAX для вебмайстра:
- URL-сторінки не відображає її реальне розташування всередині сайту.
- Відвідування сторінок AJAX може не фіксуватися веб-аналітикою. Справа в тому, що браузер не записує їх як відвідані в силу технічні особливості взаємодії ланцюжка «клієнт-сервер», які ми вже описували на початку.
- Не весь контент AJAX може бути проіндексований.
- JS має бути активований у браузері. Дуже непрямий недолік, тому що сьогодні без увімкненого JavaScript ви просто не відкриєте жоден сучасний сайт.
- У користувача недоступна браузерна функція «Назад».
- Краулерам може відображатися зміст сторінки, яку користувачі не побачать. За правилами пошукових систем це серйозне порушення
Резюме: Правильний AJAX для SEO
Щоб підсумувати все сказане вище і не заплутатися, ось головні висновки:
- Google вже вміє індексувати AJAX-контент. Але в особливо складних технічних випадках індексація AJAX-сторінок справді може бути складною. Вирішити ці проблеми, а також впровадити інструменти на основі AJAX допоможуть плагіни незалежних розробників для CMS.
- Якщо ніякі способи не допомагають вашому сайту і AJAX-контент ПС наполегливо не бачать – налаштуйте prerender. Цей спосіб гарантує, що краулери будуть бачити HTML-код сторінки навіть за активного AJAX. Впровадити prerender не складе жодної складності: для популярних CMS доступні плагіни сторонніх розробників.
- Після виконання всіх вищезгаданих дій заново згенеруйте або оновіть XML-карту. Так ви значно полегшите завдання краулерам.
Останні коментарі