Server-side rendering, SEO та правильні прев’ю для публічних сторінок
Оновлення

Server-side rendering, SEO та правильні прев’ю для публічних сторінок

ICanUp отримав Inertia SSR і серверний рендеринг SEO-метаданих. Публічні сторінки стали зрозумілими не лише браузеру, а й пошуковим системам, Telegram, LinkedIn та іншим платформам.

Публічна сторінка може чудово виглядати у браузері й водночас майже нічого не повідомляти системі, яка отримує лише початковий HTML.

Для ICanUp це стало важливим наступним кроком: сайт мав бути зрозумілим не тільки людині після виконання JavaScript, а й пошуковим роботам, preview crawlers та іншим зовнішнім платформам.

У липні 2026 року в проєкті з'явився Inertia SSR і server-rendered metadata layer.

Що змінив server-side rendering

Initial HTML

Критичні metadata доступні одразу у відповіді сервера без необхідності виконувати JavaScript.

Search Engines

Пошукові системи отримують title, description, canonical, robots і structured data у серверній відповіді.

Social Previews

Open Graph і Twitter metadata формують основу для preview cards у Telegram, LinkedIn, WhatsApp та інших платформах.

Localized Pages

Українська й англійська версії отримують власні локалізовані metadata та правильні URL.

SEO перестало залежати від того, чи виконає crawler JavaScript

До SSR частина client-side застосунку могла бути повністю готовою для звичайного користувача, але зовнішній crawler мав інший сценарій роботи.

Після переходу на SSR основні SEO-дані можна було побачити простим HTTP-запитом до сторінки. Це стало важливою архітектурною межею: SEO більше не було окремим набором client-side доповнень.

  • Title і description рендеряться сервером.
  • Canonical URL доступний у початковому HTML.
  • Robots metadata не залежить від hydration.
  • Open Graph і Twitter Card metadata доступні preview bots.
  • Structured data також потрапляє у server-rendered document.

Preview-картка стала частиною публічної сторінки

Absolute URLs

Canonical і preview images використовують абсолютні HTTPS URL, які можуть відкрити зовнішні crawlers.

Real Image Metadata

Для preview важливі реальні розміри, MIME type та доступність самого зображення.

Localized Metadata

Заголовок, опис і image alt можуть відповідати конкретній мовній версії сторінки.

No Duplicate Head Tags

SSR і подальша Inertia navigation не повинні створювати дублікати SEO та social metadata.

Після появи SSR ця сама основа була додатково перевірена й посилена для social preview crawlers. Особлива увага була потрібна не самому дизайну картки, а тому, що бачить зовнішня платформа: правильний URL, доступне зображення, коректний Content-Type і metadata у початковому HTML.

Telegram уже міг формувати preview, а наступні перевірки допомогли зробити поведінку стабільнішою для LinkedIn, WhatsApp та інших платформ.

Це стало основою подальшого SEO ICanUp

Цей етап був важливий не через кількість meta tags.

Головна зміна полягала в тому, що ICanUp почав віддавати зовнішньому світу повноцінне представлення своїх публічних сторінок ще на рівні серверної відповіді.

Від цього моменту сайт став однаково серйозно ставитися до трьох аудиторій: людей, пошукових систем і платформ, через які сторінками діляться.