Зміст
Здавалося б, що Ajax-технології і JavaScript фреймворки – не найкраще рішення для сайту. Але з кожним роком такі проекти зустрічаються набагато частіше. Воно й не дивно, адже в боротьбі за увагу цільової аудиторії потрібно дивувати, і подібне рішення може стати ключовим фактором, що дає перевагу над конкурентами. Але на ділі, SPA сайт може стати величезною проблемою. Особливо в частині просування в пошукових системах.
По суті своїй, SPA (Single Page Application) є односторінковим JS-додатком, який запускається і працює за допомогою браузера. І на відміну від «класичних» сайтів, архітектура таких проектів базується на рендерінгу сторінки за допомогою обробки через «залізо» користувача.
Простими словами, переходячи на такий ресурс, ви запускаєте додаток, написаний на мові JavaScritp, а вже він, з використанням Ajax-технологій, динамічно завантажує весь вміст з серверів. Обробка ж проходить на потужностях Клієнта, за рахунок чого користування сайтом не вимагає перезавантаження сторінок. Це дозволяє істотно прискорити роботу, а також поліпшити User Expirience. І сильно заважає просуванню, оскільки підхід до їх оптимізації відрізняється від усього, до чого звикли нинішні СЕО-фахівці.
Але це не означає, що SPA-проектам світить вигнання на задвірки пошукової видачі, а скоріше навпаки – при грамотному підході і хорошою оптимізації, такі Сайти сильно перевершують своїх «традиційних» конкурентів по цілому ряду параметрів. Тому команда SEO-відділу студії digital-маркетингу EcKit вирішила розповісти все, що потрібно знати про односторінкові додатки, а також про те, як «подружити» їх з пошуковими системами.
Плюси SPA сайтів
Швидше за все, ви користувалися односторінковими сайтами-додатками, навіть не підозрюючи про це. Мова йде про більшість популярних сервісів Google – Перекладач, Карти, Gmail. Враховуючи, що навіть медіагігант використовує технологію Single Page Application – це саме те, за чим стоїть майбутнє індустрії веб-розробки, важливо згадати про переваги даної технології. А саме:
- Доступність. Використовувати такі сервіси можна практично з будь-якого пристрою, що має доступ до Інтернету і вбудований браузер;
- Швидкість. Одна сторінка з усім необхідним економить час на повторному завантаженні інформації, а також підвищує продуктивність самого сайту;
- Відсутність обмежень. Зокрема, пов’язаних з пам’яттю пристрою, адже всі фреймворки, що відповідають за їх роботу « “довантажуються” з серверів один раз;
- Перспективність. SPA-технологія з відкритим кодом і великим ком’юніті, постійно розвиває цей напрямок.
Принцип роботи односторінкових додатків
Завантаження і рендеринг вмісту таких ресурсів має свій алгоритм:
- Запит HTML-вмісту;
- Надсилання JS-програми у відповідь;
- Скрипт визначає сторінку і контент для відображення;
- AJAX “завантажує” необхідний вміст;
- Javascript обробляє отримані дані і виводить їх на сторінку браузера.
Такий підхід дозволяє виключити необхідність в постійному оновленні всієї сторінки, завантажуючи тільки необхідний вміст, а отже – економить багато часу.
Які можуть бути мінуси SPA сайтів
Оскільки ми стоїмо на зорі розвитку технології односторінкових сайтів-додатків, не дивно, що у неї є і мінуси.
По-перше, для роботи з ними необхідно постійне і стабільне Інтернет-з’єднання. І хоча сьогодні проблем з цим практично немає, виключати сценарії з відсутністю Інтернет-підключення не варто.
По-друге, більшість популярних пошукових систем обробляють виключно HTML-код, ігноруючи всі вбудовані Java-скрипти. А це вже створює труднощі для СЕО-фахівців, оскільки має на увазі кардинально інший підхід до розкрутки.
По-третє, левова частка користувачів все-таки відключають JS або обмежують його роботу інструментами браузера, що обмежує доступ до односторінкових сайтів-додатків до включення JavaScript вручну.
Звичайно ж, цей список можна продовжити і поганою якістю розробки через відсутність досвіду у девелоперів, проте в нашому випадку на трьох пунктах можна закінчити, тому що ми розглядаємо особливості самої технології, а не «косяки» розробників.
SEO просування SPA сайтів
Одна з головних «проблем» в розкрутці подібних проектів полягає в їх новизні. Адже станом на початок 2024 року, тільки пошукові боти Google вміють АДЕКВАТНО рендерити вміст таких сайтів. Але лише в разі, якщо їх структура відповідає певним правилам.
Раніше, це «обходилося» за рахунок створення HTML-копії, але з 2018 року роботи Гугла почали використовувати виключно рендеринг. З огляду на, що більшість сео-фахівців забороняють індексування JS і CSS, претендувати на вихід в топи видачі важкувато, тому що вони просто не будуть проіндексовані.
Але ми цілком можемо «змусити» їх виконувати свою роботу та індексувати перспективні сторінки на AJAX за рахунок:
- Команди «?_escaped_fragment_=», що генерує HTML-копію (знімок) сторінки за окремим URL. Для цього необхідно використовувати посилання з хешбенгамі (#!) або прописати мета-теги для кожного розділу сторінки;
- Виявляти роботів по user-agent’у і віддавати йому HTML-копію статичної сторінки. Доступно тільки для сайтів, що використовують «традиційні» url без хешів і хешбенгів.
Рендеринг HTML-копій
Щоб «подружити» ботів пошукових систем з вашим SPA-сайтом доведеться навчити останній «відмальовувати» статичні, отрендеренные версії сторінок, а також розставити «дорожні знаки» для роботів. Реалізувати подібний трюк можна:
- На своїх серверах. Підходить для великих проектів, що володіють власними обчислювальними потужностями;
- На аутсорсі. Має на увазі настройку копіювання статичних HTML-версій сторінок «на стороні»;
- Через ізоморфний JavaScript, що дозволяє «рендерити» сторінку не тільки в браузері користувача, а відразу на сервері.
Останній примітний тим, що» видає «користувачеві класичну HTML-сторінку з JS-додатком, «довантажуючи» динамічні елементи після формування копії. Але боти пошукових систем отримають саме те, що їм потрібно.
Обробка 404 сторінок у SPA сайтів
Через специфіку технології SPA, що має на увазі рендеринг на стороні клієнта, неіснуючі сторінки і «биті» посилання, які, по-хорошому, повинні видавати помилку 404, будуть віддавати код ОК – 200.
Тому, в першу чергу, при оптимізації потрібно позбутися від цього непорозуміння, внісши Додаткові доопрацювання в код відповіді. На щастя, багато розробників фреймворків зуміли позбутися помилки. Що не скасує факту її поширеності на вже існуючих проектах.
Налаштування Google Analytics для SPA сайту
Окремий «гемморой» при оптимізації односторінкових сайтів-додатків – встановити і налаштувати інструменти аналітики. Адже для «класичних» ресурсів, код виконується при завантаженні кожної сторінки. Але через те, що контент підвантажується динамічно, Analytics не може обробляти кожен перехід без додаткової настройки лічильника під активацію кожен раз, коли движок змінює URL.
Налаштувати «аналітику» можна двома способами:
- Tag Manager і тригер «History». Для коректної роботи Google Analytics на SPA-сайтах можна скористатися HTML5 History API, «активує» тег «аналітик» при кожному оновленні в історії браузера;
- Ручна передача даних. Для оновлення лічильника при зміні url можна задати команду «set», вказавши значення змінної «page», «прив’язуючи» наступні звернення до формованих посиланнях.
Замість підсумків
Щоб «подружити» SPA-сайт з SEO, достатньо використовувати «традиційні» url, налаштувати ізоморфний JavaScript або правильну генерацію HTML-копій сторінок, виправити помилку з заголовками неіснуючих сторінок при віддачі 404-го коду, а також налаштувати роботу Google Analytics. В цьому випадку, односторінковий сайт-додаток стане не тягарем, а ключовою конкурентною перевагою в боротьбі за топи пошукової видачі і увагу аудиторії.
