SEO w Astro: jak wypozycjonować stronę Astro w Google i trafić do cytatów AI

Szybki quiz

Czy SEO jest dla Ciebie i jak zacząć?

Pytanie 1 z 425%

Czy ludzie szukają w Google tego, co sprzedajesz?

Tak, chyba takNie, to coś nowego lub bardzo niszowegoNie wiem

SEO w Astro to praca, która zamienia ten czysty HTML w strony zdobywające pozycje. Przewodnik Google po podstawach SEO dla JavaScriptu wyjaśnia, że strony w JavaScripcie są przetwarzane w trzech fazach (indeksowanie przez robota, renderowanie, dodawanie do indeksu), i stwierdza, że renderowanie po stronie serwera lub wstępne renderowanie to nadal świetny pomysł, bo nie wszystkie boty uruchamiają JavaScript. Astro domyślnie startuje właśnie z tego miejsca. Ten przewodnik omawia resztę, ustawienie po ustawieniu, a każde zachowanie sprawdziliśmy w oficjalnej dokumentacji Astro. Na marginesie: strona sorank.com, którą właśnie czytasz, działa na Astro.

Czy Astro jest dobre dla SEO?

Tak, od strony technicznej. Astro renderuje komponenty do HTML podczas budowania i usuwa JavaScript, który frameworki takie jak React czy Vue zwykle wysyłają do przeglądarki. Dzięki temu unikasz klasycznych problemów opisanych w naszym przewodniku po SEO dla JavaScriptu: pustych szkieletów HTML, treści widocznej dopiero po renderowaniu, linków, które nie są prawdziwymi znacznikami kotwic. Omijasz też pułapki routingu aplikacji jednostronicowej, bo każda trasa w Astro to prawdziwy adres URL z własnym plikiem HTML.

Równie ważne jest to, czego Astro nie robi. Nie ma wbudowanej wtyczki SEO, automatycznego opisu meta, automatycznego tagu canonical ani danych strukturalnych. Tabela oddziela to, co dostajesz za darmo, od tego, co musisz zbudować.

Renderowanie statyczne czy serwerowe: który tryb jest lepszy dla SEO?

Dokumentacja Astro o renderowaniu na żądanie jest jednoznaczna: domyślnie strony, trasy i endpointy API są wstępnie renderowane podczas budowania jako strony statyczne. Dla SEO wynik statyczny to najbezpieczniejszy wybór domyślny: każdy adres URL to gotowy plik HTML serwowany z CDN, szybki i identyczny dla każdego odwiedzającego i każdego bota.

Renderowanie na żądanie (na serwerze) wymaga adaptera dla Twojego hostingu (na przykład Node, Netlify, Vercel lub Cloudflare). Potem wyłączasz pojedynczą trasę z wstępnego renderowania przez export const prerender = false albo przełączasz cały projekt przez output: 'server' i włączasz strony statyczne z powrotem jedna po drugiej. Oba tryby dają pełny HTML, więc Google widzi to samo. Różnice leżą gdzie indziej:

• Szybkość: plik statyczny jest serwowany natychmiast; strona renderowana na serwerze zależy od czasu odpowiedzi serwera, który wpływa na Largest Contentful Paint.
• Aktualność: renderowanie serwerowe pasuje do stron, które ciągle się zmieniają (stany magazynowe, ceny, wyniki wyszukiwania), gdzie przebudowa witryny trwałaby za długo.
• Narzędzia: niektóre integracje, jak mapa witryny, nie widzą dynamicznych tras serwerowych (patrz niżej).

Praktyczna zasada: strony marketingowe, artykuły blogowe i dokumentację zostaw statyczne, a na żądanie renderuj tylko trasy, które potrzebują danych na żywo. Dokumentacja Astro zaleca to samo: zostać przy domyślnym trybie statycznym, dopóki większość stron nie będzie wymagać renderowania na żądanie.

Jak skonfigurować tagi meta i adresy kanoniczne w Astro?

Utwórz jeden komponent SEO (często nazywany BaseHead lub Seo) i dołącz go do head każdego layoutu. Przyjmuje tytuł, opis, opcjonalny obraz i opcjonalną flagę noindex, a zwraca:

1. znacznik title, unikalny dla każdej strony, z głównym słowem kluczowym blisko początku;
2. opis meta, pisany ręcznie dla każdej strony (to Twój fragment w wynikach wyszukiwania);
3. tag canonical jako bezwzględny adres zbudowany z Astro.url.pathname i wartości site z konfiguracji;
4. tagi Open Graph i społecznościowe (tytuł, opis, obraz, URL) dla podglądów linków;
5. tag meta robots, gdy strona ma pozostać poza indeksem.

Najpierw ustaw opcję site w astro.config.mjs: zależą od niej canonical, mapa witryny i tagi społecznościowe. Potem wybierz zasadę trailingSlash ('always' lub 'never') i trzymaj się jej, żeby /blog/artykul i /blog/artykul/ nigdy nie konkurowały jako dwie wersje tej samej strony. Usuwaj parametry zapytania z adresu kanonicznego, żeby parametry śledzące nie tworzyły duplikatów.

Jak wygenerować mapę witryny i robots.txt w Astro?

Użyj oficjalnej integracji opisanej na stronie @astrojs/sitemap. Polecenie npx astro add sitemap instaluje ją i dodaje do konfiguracji. Wymaga opcji site, a podczas budowania zapisuje plik sitemap-index.xml, który wskazuje na ponumerowane pliki (sitemap-0.xml i kolejne na dużych witrynach). Każdy plik mieści domyślnie do 45 000 wpisów, co reguluje opcja entryLimit. Jeśli ten format jest dla Ciebie nowy, nasz wpis w słowniku o mapie witryny XML wyjaśnia, co Google z nią robi.

Dla SEO liczą się trzy ustawienia:

• filter: funkcja, która dostaje adres każdej strony; zwracaj false dla stron z podziękowaniem, wyszukiwarki wewnętrznej, wersji roboczych i wszystkiego z noindex, żeby mapa zawierała tylko adresy możliwe do zaindeksowania.
• i18n: przypisuje foldery językowe do kodów języków i dodaje do każdego wpisu alternatywy hreflang.
• customPages: dodaje adresy, których integracja nie znajdzie sama.

Na większości witryn do robots.txt wystarczy plik statyczny w folderze public. Jeśli treść różni się między środowiskiem testowym a produkcyjnym, lepiej generować go z endpointu (src/pages/robots.txt.ts). W obu przypadkach dodaj wiersz Sitemap wskazujący na sitemap-index.xml i przed startem sprawdź wynik testerem robots.txt. Tą samą techniką powstaje plik llms.txt; nasz przewodnik o tym, jak zainstalować plik llms.txt, opisuje jego zawartość.

Jak obsłużyć hreflang i witryny wielojęzyczne w Astro?

Wbudowany routing i18n w Astro załatwia stronę adresów. W konfiguracji deklarujesz defaultLocale i listę locales oraz decydujesz, czy język domyślny też dostaje prefiks (prefixDefaultLocale). Funkcje pomocnicze, takie jak getRelativeLocaleUrl, budują zlokalizowane linki, a Astro.currentLocale mówi każdej stronie, w jakim jest języku.

Przewodnik po routingu nie omawia tagów hreflang w head, więc zaplanuj, że napiszesz je sam w komponencie SEO: dla każdej strony jeden link alternate na wersję językową plus x-default, wszystko jako adresy bezwzględne, a każda wersja musi wymieniać wszystkie pozostałe (linki zwrotne). Generowanie ich z tej samej listy języków co routing chroni przed najczęstszym błędem, czyli alternatywą wskazującą na nieistniejącą stronę. Aby sprawdzić logikę na kilku adresach, nasz generator hreflang tworzy pełny zestaw tagów dla strony. Następnie włącz opcję i18n mapy witryny jako drugi sygnał.

Jak obrazy i wyspy wpływają na szybkość i Core Web Vitals?

Szybkość to obszar, w którym Astro zyskuje najwięcej, i widać to w Core Web Vitals. Przewodnik Astro po obrazach opisuje komponent Image z astro:assets: optymalizuje lokalne obrazy, konwertuje ich format, dodaje leniwe ładowanie i asynchroniczne dekodowanie oraz ustala wymiary obrazu, aby uniknąć Cumulative Layout Shift. Atrybut alt jest w nim obowiązkowy, co wymusza podstawową zasadę SEO obrazów. Komponent Picture idzie dalej i serwuje AVIF lub WebP z formatem zapasowym.

Dwa nawyki dopełniają całość. Obrazy do optymalizacji trzymaj w src (pliki w public są serwowane bez przetwarzania). Głównego obrazu na górze strony nie ładuj leniwie, tylko od razu, żeby nie opóźniał Largest Contentful Paint.

Architektura wysp trzyma JavaScript w ryzach. Komponent pozostaje statycznym HTML, dopóki nie dodasz dyrektywy klienta: client:load hydratuje go od razu, client:idle, gdy przeglądarka jest wolna, client:visible dopiero wtedy, gdy pojawi się w widoku. Zarezerwowanie client:load dla elementów, które muszą reagować natychmiast (menu, koszyk), to najprostszy sposób na ochronę Interaction to Next Paint. Wyspy serwerowe (server:defer) ładują spersonalizowany blok po stronie z pamięci podręcznej, nie spowalniając głównej treści.

Jak dodać dane strukturalne do strony w Astro?

Astro nie ma funkcji do schema, co daje Ci pełną kontrolę. Zbuduj obiekt JavaScript dla każdego typu strony (Article, Product, Organization, BreadcrumbList, FAQPage) i umieść go w znaczniku script typu application/ld+json, używając dyrektywy set:html i JSON.stringify, żeby JSON nie został zmieniony przez escaping. Zasilaj go tymi samymi danymi z frontmattera lub kolekcji co widoczną stronę: wtedy znaczniki zawsze odpowiadają temu, co widzą użytkownicy, czego wymagają wytyczne Google dotyczące znaczników schema.

Aby przygotować JSON dla nowego typu strony, nasz bezpłatny generator schema da Ci poprawny blok startowy, który potem zamienisz w szablon. Po każdej zmianie szablonu sprawdź próbkę zbudowanych stron w teście wyników z elementami rozszerzonymi Google.

Jak obsłużyć przekierowania przy migracji do Astro?

Migracja z WordPressa lub Next.js to najbardziej ryzykowny moment dla strony w Astro. Zachowaj każdy adres URL, który ma ruch lub backlinki, a pozostałe przypisz pojedynczo do najbliższego odpowiednika za pomocą przekierowań stałych, jak wyjaśnia nasz przewodnik po przekierowaniach SEO.

Konfiguracja Astro przyjmuje obiekt redirects, który przypisuje stare ścieżki do nowych. Z adapterem stają się one prawdziwymi przekierowaniami HTTP. Przy czysto statycznym buildzie Astro zapisuje zamiast tego stronę HTML z meta refresh, za którą Google podąża, ale traktuje ją jako słabszy sygnał niż serwerowe 301. Na stronie statycznej zadeklaruj przekierowania w formacie swojego hostingu (plik _redirects na Netlify lub Cloudflare Pages, plik vercel.json na Vercel), aby roboty dostawały prawdziwe 301.

Jak Astro pomaga w SEO i GEO?

Cytowanie przez ChatGPT, Perplexity czy Gemini zaczyna się od czytelności. Wiele robotów AI pobiera surowy HTML bez uruchamiania JavaScriptu, więc witryna, która oddaje cały tekst już w pierwszej odpowiedzi, jak Astro domyślnie, usuwa barierę, z którą strony renderowane po stronie klienta wciąż się mierzą. Jasne śródtytuły, akapity zaczynające się od odpowiedzi, dane strukturalne i plik llms.txt sprawiają potem, że każdą stronę łatwiej zacytować.

Po starcie mierz zamiast zgadywać. Panel GEO / SEO w Sorank łączy dane z Search Console i wizyty z asystentów AI, dzięki czemu widzisz, czy nowa witryna utrzymuje pozycje.

Jakość techniczna opłaca się dopiero wtedy, gdy jest treść do pozycjonowania. Generator artykułów blogowych Sorank pisze i publikuje artykuły zoptymalizowane pod Google i asystentów AI, a z witryną tworzoną na zamówienie, taką jak projekt w Astro, łączy się przez webhook.

Astro domyślnie daje szybki HTML dostępny dla robotów; pozycje nadal zależą od tagów head, mapy witryny, hreflang, danych strukturalnych i przekierowań, które dodasz. Najpierw przygotuj wspólny komponent SEO i mapę witryny, a przed startem przejdź punkt po punkcie przez tabelę powyżej.