Оптимізація під SEO: як підготувати вебзастосунок до органічного трафіку

Що в застосунку заважає пошуковику і як це виправляють: DOM-структура, серверний HTML, канонічні адреси та розмітка JSON-LD.

Оптимізація під SEO: як підготувати вебзастосунок до органічного трафіку
INGELLO / BUSINESS3047

Вебзастосунок може бути зручним, швидким і повним корисного контенту, але не отримувати з пошуку жодного переходу. Причина зазвичай не в текстах, а в тому, як сторінку влаштовано технічно: робот бачить порожній каркас, однакові заголовки або десятки адрес з одним і тим самим вмістом. SEO-оптимізація вебзастосунку прибирає ці перешкоди, щоб контент, який у Вас уже є, почав приводити клієнтів без оплати кожного кліку в рекламі.

Це напрям із блоку корпоративного розвитку. Його підключають, коли продукт уже працює і переходить від MVP до MMP (версії, яку можна впевнено продавати) та MLP (версії, яку обирають і радять іншим). Орієнтир вартості напряму в прайсі Ingello: $4700.

Чому застосунок не видно в пошуку

Вебзастосунок і сайт влаштовані по-різному, і пошуковик це відчуває. Інтерфейс, зібраний заради зручності користувача, часто виявляється непрозорим для робота. Контент існує, але у видачі його немає. Найчастіше заважає щось із цього:

  • Контент з'являється лише після виконання скриптів, а у вихідній відповіді сторінки його немає.
  • Одна адреса віддає різний вміст, а одна й та сама сторінка живе за десятком адрес із параметрами фільтрів, сортування та рекламних міток.
  • Заголовки й описи однакові на сотнях сторінок, і пошуковику нема за чим обрати потрібну.
  • Швидкість відмальовування головного екрана просідає настільки, що сторінка втрачає позиції незалежно від змісту.
  • Мовні версії не пов'язані між собою, і україномовний користувач потрапляє на російську сторінку.

Що входить у роботу

У прайсі напрям описано двома пунктами: оптимізація DOM-структури та підготовка до отримання органічного трафіку з пошуку. За кожним стоїть конкретний набір змін у коді.

Робота з DOM-структурою

  • Публічні сторінки віддають основний текст, заголовки й посилання вже у вихідному HTML, без очікування скриптів.
  • На кожній сторінці один заголовок H1 та ієрархія H2 і H3, яка відображає зміст, а не оформлення.
  • Навігацію зібрано зі справжніх посилань, якими робот може пройти, а не з кнопок з обробниками.
  • Зображення віддаються файлами з підписами alt і розмірами, а не вбудовуються в розмітку.
  • Блоки, які не потрібні на першому екрані, завантажуються пізніше й не затримують відмальовування.

Підготовка до органічного трафіку

  • Шаблони title і description збираються з даних сторінки й не повторюються.
  • Канонічні адреси без параметрів фільтрів і міток, щоб одна сторінка не розпадалася на дублі.
  • Карта сайту й robots.txt, закриті від індексації кабінети, внутрішній пошук та адмінка.
  • Зв'язка мовних версій через hreflang, якщо продукт працює кількома мовами.
  • Структуровані дані JSON-LD: організація, послуги чи товари, статті, поширені запитання. Ці ж дані читають ШІ-асистенти, коли відповідають користувачеві з посиланням на джерело.

Що Ви отримуєте на виході

  • Публічні сторінки, які робот бачить так само повно, як людина.
  • Змінені шаблони й серверний вивід контенту всередині Вашого коду, а не зовнішню надбудову, яка зламається з наступним релізом.
  • Налаштовані карту сайту, robots.txt, канонічні адреси та розмітку.
  • Правила для команди: які поля заповнювати під час створення нової сторінки, щоб вона одразу була готова до індексації.

Скільки коштує і від чого залежить

Орієнтир у прайсі: $4700 за напрям. Обсяг визначає не кількість сторінок, а кількість різних шаблонів: каталог, картка, стаття, профіль, посадкова. Десять тисяч карток на одному шаблоні простіші, ніж двадцять сторінок, кожна з яких зібрана по-своєму.

Другий чинник: як зараз виводиться контент. Якщо застосунок уже віддає HTML із сервера, робота зводиться до шаблонів і розмітки. Якщо інтерфейс повністю малюється в браузері, для публічних сторінок потрібен серверний вивід, і це зачіпає логіку інтерфейсів. Якщо систему робила інша команда, першим кроком іде аудит: $800 за текстовий звіт або $2400 з раннім прототипом доопрацювання.

Що ламається, якщо заощадити

  • Реклама лишається єдиним джерелом клієнтів: кожен відвідувач коштує грошей, і потік зупиняється разом із бюджетом.
  • Статті та кейси пишуться, але не індексуються, бо робот бачить порожній каркас.
  • Дублі ділять позиції між собою, і у видачу потрапляє не та сторінка, на яку Ви ведете клієнта.
  • ШІ-асистенти не знаходять про компанію фактів, які можна перевірити, і цитують конкурентів, у яких ці факти розмічено.
  • Після редизайну все доводиться лагодити наново, бо правила не закріпили в шаблонах.

Приклад із практики

Для сайту художниці Narine Arakelian на Readymag завдання полягало не в підборі ключових слів, а в машинному читанні. Конструктор віддає частину даних лише після виконання клієнтського коду, тому ми порівнювали сирий HTML із відмальованою сторінкою, перевіряли robots.txt, карту сайту й доступність усіх адрес. Роботу почали в режимі лише читання, спірні факти спершу затвердила клієнтка.

Після впровадження єдиного шару JSON-LD усі 45 із 45 адрес карти сайту отримали розмітку і в сирому, і у відмальованому HTML, власні описи замість спільного шаблону та нуль помилок розбору. У живому графі 174 вузли даних. Подробиці в кейсі про AI SEO та GEO.

Тих самих правил ми дотримуємося на власних сайтах: канонічні адреси без параметрів, зв'язка української, російської та англійської версій, відкритий доступ для пошукових і ШІ-краулерів, закриті службові розділи.

Чому цей напрям іде після запуску

Доки немає реального контенту, оптимізувати нічого. Але структуру, яка робить контент видимим, закладають раніше, на верстці інтерфейсів. Тут ми доводимо її до стану, в якому пошук починає приносити переходи.

Теми для контенту варто брати з перевіреного семантичного ядра. У нашому валідаторі ключів у зрізі за транспортом із 496 ключів 47% довелося переписати. А регулярний випуск матеріалів можна поставити на потік, як у кейсі про автоматизацію постингу контенту.

Куди далі

Суміжні напрями: оптимізація сервера, яка впливає на швидкість відповіді, і документування, де закріплюються правила створення сторінок. Мапа всіх етапів у стратегії розробки застосунку.

На безкоштовній консультації архітектор Ingello подивиться, як Ваш застосунок бачить пошуковик, і назве шаблони, які треба змінити. Після неї Ви отримуєте розрахунок ціни й термінів за етапами. Обговорити органічний трафік.

Поширені питання

01Чи можна просувати в пошуку вебзастосунок, а не звичайний сайт?

Ingello готує до індексації публічну частину вебзастосунку: каталоги, картки, статті та посадкові сторінки. Особисті кабінети, адмінка та внутрішні екрани в пошуку не потрібні й закриваються від робота. Якщо інтерфейс повністю малюється в браузері, для публічних сторінок робиться серверний вивід HTML, а решта застосунку працює як раніше.

02Скільки коштує SEO-оптимізація вебзастосунку в Ingello?

У прайсі Ingello напрям «Оптимізація для SEO» має орієнтир $4700, точний обсяг фіксується після розбору задачі. Ціна залежить від кількості різних шаблонів сторінок і від того, як зараз виводиться контент. Якщо систему писала інша команда, спершу проводиться аудит за $800 (текстовий звіт) або $2400 (з раннім прототипом доопрацювання). Перша консультація безкоштовна.

03Чим технічне SEO відрізняється від написання статей і підбору ключів?

Технічне SEO, яке робить Ingello, відповідає за те, щоб пошуковик побачив і правильно зрозумів сторінки: HTML, заголовки, канонічні адреси, карту сайту, розмітку. Тексти й семантичне ядро це наступний шар. Без технічної бази статті пишуться марно, а без контенту технічній базі нема чого показувати, тому обидва шари планують разом, але оцінюють окремо.

04Як підготувати сайт до відповідей ChatGPT та інших ШІ-асистентів?

Ingello розмічає факти про компанію, послуги й матеріали в JSON-LD, відкриває доступ ШІ-краулерам у robots.txt і перевіряє, що розмітка є і в сирому, і у відмальованому HTML. Після викладки відповіді перевіряють через ШІ-пошук із вебдоступом. Миттєвого оновлення пам'яті всіх моделей це не гарантує, але дає їм коректне джерело для цитування.

05Коли чекати результату після технічної SEO-оптимізації?

Ingello не обіцяє позицій і термінів виходу в топ, бо їх визначають пошукова система та конкуренція в ніші. Технічний результат перевіряють одразу після викладки: сторінки доступні, віддають контент у HTML, мають унікальні заголовки й розмітку без помилок. Зростання переходів потім відстежують у Search Console, порівнюючи покази й кліки кожної сторінки до і після робіт.