- Чому це важливо Сьогодні в мережі все частіше можна зустріти не тільки окремі сторінки, зверстаний...
- Плюси і мінуси використання AJAX для формування сторінок
- Плюси використання:
- Мінуси використання:
- Як показати пошуковику, де знаходиться контент сторінки на AJAX?
- 1. Використання HIJAX (застарілий спосіб)
- 2. Використання знака «!» Як покажчика для пошукової системи в URL-адресу (актуальний спосіб)
- Деякі додаткові особливості
- «Підводні камені» при використанні AJAX
- висновок
Чому це важливо
Наша команда-партнер Artmisto
Сьогодні в мережі все частіше можна зустріти не тільки окремі сторінки, зверстаний за допомогою технології 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. Незважаючи на це, описані нами механізми повністю підтримуються пошуковою системою і залишаються стабільно робочими до сьогоднішнього дня.
Зручно?Як показати пошуковику, де знаходиться контент сторінки на AJAX?
Html?
Com/?
