SEO на Astro: як вивести сайт на Astro в топ Google і потрапити в цитати ШІ

Швидкий тест

Чи підходить вам SEO і з чого почати?

Питання 1 з 425%

Чи шукають люди в Google те, що ви продаєте?

Так, думаю, що такНі, це щось нове або дуже нішевеНе знаю

SEO на Astro означає перетворити цей чистий HTML на сторінки, які ранжуються. Посібник Google про основи SEO для JavaScript пояснює, що сайти на JavaScript обробляються у три етапи (сканування, рендеринг, індексування), і стверджує, що серверний або попередній рендеринг досі чудова ідея, адже не всі боти виконують JavaScript. Astro за замовчуванням стартує саме з цієї позиції. Цей посібник розбирає решту, налаштування за налаштуванням, і кожну поведінку ми звірили з офіційною документацією Astro. До речі, сайт sorank.com, який ви зараз читаєте, працює на Astro.

Чи добрий Astro для SEO?

Так, із технічного боку. Astro рендерить компоненти в HTML під час збирання і прибирає JavaScript, який фреймворки на кшталт React чи Vue зазвичай надсилають у браузер. Так ви уникаєте класичних проблем із нашого посібника з SEO для JavaScript: порожніх HTML-оболонок, контенту, що з’являється лише після рендерингу, посилань, які не є справжніми тегами-якорями. Немає й пасток маршрутизації односторінкового застосунку: кожен маршрут Astro це справжній URL із власним HTML-файлом.

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

Статичний чи серверний рендеринг: який режим кращий для SEO?

Документація Astro про рендеринг на вимогу однозначна: за замовчуванням сторінки, маршрути й ендпоінти API заздалегідь рендеряться під час збирання як статичні сторінки. Для SEO статичний вивід це найнадійніший варіант за замовчуванням: кожен URL є готовим HTML-файлом, який віддається через CDN, швидким і однаковим для будь-якого відвідувача й будь-якого бота.

Рендеринг на вимогу (на сервері) потребує адаптера для вашого хостингу (наприклад, Node, Netlify, Vercel або Cloudflare). Потім ви виключаєте окремий маршрут із попереднього рендерингу через export const prerender = false або переводите весь проєкт на output: 'server' і повертаєте статичні сторінки по одній. Обидва режими видають повний HTML, тож Google бачить те саме. Відмінності в іншому:

• Швидкість: статичний файл віддається миттєво; сторінка, що рендериться на сервері, залежить від часу його відповіді, а він впливає на Largest Contentful Paint.
• Актуальність: серверний рендеринг підходить для сторінок, які постійно змінюються (залишки, ціни, результати пошуку), де перезбирання сайту було б надто повільним.
• Інструменти: деякі інтеграції, наприклад карта сайту, не бачать динамічних серверних маршрутів (див. нижче).

Практичне правило: маркетингові сторінки, статті блогу й документацію залишайте статичними, а на вимогу рендерте лише маршрути з живими даними. Документація Astro радить те саме: залишатися в статичному режимі за замовчуванням, доки більшості сторінок не знадобиться рендеринг на вимогу.

Як налаштувати мета-теги й канонічні URL в Astro?

Створіть один SEO-компонент (його часто називають BaseHead або Seo) і підключіть його в head кожного шаблону. Він приймає заголовок, опис, необов’язкове зображення й необов’язковий прапорець noindex та виводить:

1. тег title, унікальний для кожної сторінки, з основним ключовим словом ближче до початку;
2. мета-опис, написаний вручну для кожної сторінки (це ваш сніпет у видачі);
3. тег canonical як абсолютний URL, зібраний з Astro.url.pathname і значення site у конфігурації;
4. теги Open Graph і соцмереж (заголовок, опис, зображення, URL) для превʼю посилань;
5. мета-тег robots, якщо сторінка має залишитися поза індексом.

Спершу задайте опцію site в astro.config.mjs: від неї залежать canonical, карта сайту й теги соцмереж. Потім оберіть правило trailingSlash ('always' або 'never') і дотримуйтеся його, щоб /blog/post і /blog/post/ ніколи не конкурували як дві версії однієї сторінки. Прибирайте параметри запиту з canonical, щоб мітки відстеження не породжували дублікатів.

Як згенерувати карту сайту й robots.txt в Astro?

Використовуйте офіційну інтеграцію, описану на сторінці @astrojs/sitemap. Команда npx astro add sitemap встановлює її й додає до конфігурації. Інтеграція вимагає опцію site і під час збирання записує файл sitemap-index.xml, що посилається на пронумеровані файли (sitemap-0.xml і наступні на великих сайтах). Кожен файл за замовчуванням вміщує до 45 000 записів, це значення задає опція entryLimit. Якщо формат для вас новий, наша стаття глосарію про XML-карту сайту пояснює, що Google із нею робить.

Для SEO важливі три налаштування:

• filter: функція, яка отримує URL кожної сторінки; повертайте false для сторінок подяки, внутрішнього пошуку, чернеток і всього з noindex, щоб у карті лишалися тільки адреси, придатні для індексування.
• i18n: зіставляє мовні папки з кодами мов і додає до кожного запису альтернативи hreflang.
• customPages: додає URL, яких інтеграція не може знайти сама.

Для robots.txt на більшості сайтів досить статичного файлу в папці public. Якщо його вміст відрізняється на тестовому й робочому середовищі, краще генерувати його з ендпоінту (src/pages/robots.txt.ts). В обох випадках додайте рядок Sitemap із посиланням на sitemap-index.xml і перед запуском перевірте результат валідатором robots.txt. Тим самим прийомом створюється файл llms.txt; наш посібник про те, як установити файл llms.txt, описує його вміст.

Як працювати з hreflang і багатомовними сайтами в Astro?

Вбудована маршрутизація i18n в Astro розв’язує питання URL. У конфігурації ви оголошуєте defaultLocale і список locales та обираєте, чи отримує префікс мова за замовчуванням (prefixDefaultLocale). Допоміжні функції на кшталт getRelativeLocaleUrl будують локалізовані посилання, а Astro.currentLocale повідомляє кожній сторінці її мову.

Посібник із маршрутизації не стосується тегів hreflang у head, тож закладіть їх написання в SEO-компонент: для кожної сторінки по одному посиланню alternate на мовну версію плюс x-default, усе у вигляді абсолютних URL, і кожна версія має перелічувати всі інші (зворотні посилання). Генерація з того самого списку мов, що й маршрутизація, захищає від найчастішої помилки: альтернативи, яка вказує на неіснуючу сторінку. Щоб перевірити логіку на кількох адресах, наш генератор hreflang видає повний набір тегів для сторінки. Потім увімкніть опцію i18n у карті сайту як другий сигнал.

Як зображення й острови впливають на швидкість і Core Web Vitals?

Швидкість це сфера, де Astro виграє найбільше, і це видно за Core Web Vitals. Посібник Astro із зображень описує компонент Image з astro:assets: він оптимізує локальні зображення, конвертує їхній формат, додає ліниве завантаження й асинхронне декодування та визначає розміри зображення, щоб уникнути Cumulative Layout Shift. Атрибут alt у ньому обов’язковий, що закріплює базове правило SEO для зображень. Компонент Picture йде далі й віддає AVIF або WebP із запасним форматом.

Дві звички довершують картину. Зберігайте зображення, які треба оптимізувати, у src (файли з public віддаються як є, без обробки). І не ставте ліниве завантаження головному зображенню вгорі сторінки: завантажуйте його одразу, щоб воно не затримувало Largest Contentful Paint.

Архітектура островів тримає JavaScript під контролем. Компонент залишається статичним HTML, доки ви не додасте клієнтську директиву: client:load гідрує його одразу, client:idle, коли браузер вільний, client:visible, лише коли він потрапляє в зону видимості. Залишити client:load тільки для того, що має реагувати миттєво (меню, кошик), це найпростіший спосіб захистити Interaction to Next Paint. Серверні острови (server:defer) підвантажують персоналізований блок після закешованої сторінки, не сповільнюючи основний контент.

Як додати структуровані дані на сайт на Astro?

В Astro немає функції для schema, і це дає вам повний контроль. Зберіть JavaScript-об’єкт для кожного типу сторінок (Article, Product, Organization, BreadcrumbList, FAQPage) і виведіть його в тезі script із типом application/ld+json, використовуючи директиву set:html і JSON.stringify, щоб JSON не екранувався. Заповнюйте його тими самими даними frontmatter або колекції, що й видиму сторінку: тоді розмітка завжди збігається з тим, що бачать користувачі, а цього вимагають правила Google щодо розмітки schema.

Щоб накидати JSON для нового типу сторінок, наш безкоштовний генератор schema дасть коректний стартовий блок, який ви перетворите на шаблон. Після кожної зміни шаблону перевіряйте вибірку зібраних сторінок у тесті розширених результатів Google.

Як налаштувати редиректи під час переїзду на Astro?

Переїзд із WordPress чи Next.js найризикованіший момент для сайту на Astro. Збережіть кожен URL із трафіком або зворотними посиланнями, а решту по одному зв’яжіть із найближчим відповідником постійними редиректами, як описано в нашому посібнику з SEO-редиректів.

Конфігурація Astro приймає об’єкт redirects, що зіставляє старі шляхи з новими. З адаптером вони стають справжніми HTTP-редиректами. За суто статичного збирання Astro натомість записує HTML-сторінку з meta refresh: Google нею переходить, але вважає слабшим сигналом, ніж серверний 301. Для статичного сайту оголошуйте редиректи у форматі вашого хостингу (файл _redirects на Netlify або Cloudflare Pages, файл vercel.json на Vercel), щоб краулери отримували справжній 301.

Як Astro допомагає SEO і GEO?

Щоб вас цитували ChatGPT, Perplexity чи Gemini, спершу треба бути читабельним. Багато краулерів ШІ забирають сирий HTML, не виконуючи JavaScript, тому сайт, який віддає весь текст уже в першій відповіді, як Astro за замовчуванням, знімає бар’єр, що досі є в сайтів із клієнтським рендерингом. Чіткі підзаголовки, абзаци, що починаються з відповіді, структуровані дані й файл llms.txt роблять кожну сторінку зручнішою для цитування.

Після запуску вимірюйте, а не вгадуйте. Дашборд GEO / SEO в Sorank поєднує дані Search Console і візити з ШІ-асистентів, щоб ви бачили, чи утримує новий сайт позиції.

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

Astro за замовчуванням дає швидкий HTML, доступний для сканування; позиції й далі залежать від тегів head, карти сайту, hreflang, структурованих даних і редиректів, які додаєте ви. Спершу налаштуйте спільний SEO-компонент і карту сайту, а перед запуском пройдіться по таблиці вище.