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

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

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

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

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

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

висновок

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

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

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