Astro SEO: jak dostat web postavený na Astro na Google a do citací AI

Rychlý kvíz

Hodí se vám SEO a jak začít?

Otázka 1 z 425%

Hledají lidé na Googlu to, co prodáváte?

Ano, myslím siNe, je to nové nebo velmi úzkéNevím

SEO pro Astro znamená proměnit toto čisté HTML ve stránky, které se umisťují. Oficiální průvodce základy SEO pro JavaScript od Googlu vysvětluje, že weby s JavaScriptem zpracovává ve třech fázích (procházení, vykreslení, indexování), a uvádí, že „vykreslování na serveru nebo předem vykreslování je pořád skvělý nápad“, protože ne všichni roboti umějí spouštět JavaScript. Astro od této pozice vychází ve výchozím nastavení. Tento návod pokrývá zbytek, nastavení po nastavení, a každé chování je ověřeno oproti oficiální dokumentaci Astro. Pro úplnost: web sorank.com, který čtete, běží na Astro.

Je Astro dobrý pro SEO?

Z technického hlediska ano. Astro vykresluje komponenty do HTML již při sestavení a odstraňuje JavaScript, který by frameworky jako React nebo Vue běžně posílaly do prohlížeče. Výsledkem je, že se vyhnete klasickým problémům popsaným v našem průvodci SEO pro JavaScript: prázdné HTML kostry, obsah, který se objeví až po vykreslení, odkazy, které nejsou skutečnými kotvami. Vyhnete se také pastím směrování u jednostránkové aplikace, protože každá trasa v Astro je skutečná adresa s vlastním HTML souborem.

To, co Astro nedělá, je stejně důležité. Nemá žádný zabudovaný plugin pro SEO, nevytváří automatický meta popis, automatickou kanonickou značku ani strukturovaná data. Tabulka níže odděluje to, co dostanete zdarma, od toho, co musíte vytvořit.

Statické, nebo serverové vykreslování: který režim je pro SEO nejlepší?

Dokumentace Astro k vykreslování na vyžádání je jasná: stránky, trasy a koncové body API se ve výchozím nastavení předem vykreslují jako statické stránky již při sestavení. Pro SEO je statický výstup nejbezpečnějším výchozím nastavením: každá adresa je hotový soubor HTML podávaný z CDN, rychlý a stejný pro každého návštěvníka i pro každého robota.

Vykreslování na vyžádání (serverové) vyžaduje adaptér pro vašeho hostitele (například Node, Netlify, Vercel nebo Cloudflare). Pak jednu trasu vyjmete z předběžného vykreslování pomocí export const prerender = false, nebo přepnete celý projekt přes output: 'server' a statické stránky zase vrátíte. Oba režimy vytvářejí plné HTML, takže Google vidí totéž. Rozdíly jsou jinde:

• Rychlost: statický soubor se podá okamžitě; stránka vykreslovaná na serveru závisí na době odezvy vašeho serveru, což se projevuje na Largest Contentful Paint.
• Aktuálnost: serverové vykreslování se hodí pro stránky, které se neustále mění (skladové zásoby, ceny, výsledky vyhledávání), kde by přestavba celého webu byla příliš pomalá.
• Nástroje: některé integrace, například mapa webu, nevidí dynamické trasy na serveru (viz níže).

Praktické pravidlo: marketingové stránky, blogové příspěvky a dokumentaci držte jako statické a na vyžádání vykreslujte jen trasy, které potřebují živá data. Dokumentace Astro doporučuje totéž a radí ponechat výchozí statický režim, dokud většina vašich stránek nepotřebuje vykreslování na vyžádání.

Jak nastavit meta značky a kanonické adresy v Astro?

Vytvořte jednu komponentu SEO (často se jmenuje BaseHead nebo Seo) a vložte ji do hlavičky každého rozvržení. Přijímá titulek, popis, volitelný obrázek a volitelný příznak noindex a vypisuje:

1. značku titulku, jedinečnou pro každou stránku, s hlavním klíčovým slovem na začátku;
2. meta popis, napsaný ručně pro každou stránku (je to váš úryvek ve vyhledávání);
3. kanonickou značku, sestavenou jako absolutní adresu z Astro.url.pathname a hodnoty site z vaší konfigurace;
4. značky Open Graph a sociální sítě (titulek, popis, obrázek, adresa) pro náhledy odkazů;
5. značku meta robots, když stránka musí zůstat mimo index.

Nejprve nastavte volbu site v souboru astro.config.mjs: kanonická adresa, mapa webu i sociální značky na ní závisí. Pak zvolte zásadu trailingSlash ('always', nebo 'never') a držte se jí, aby /blog/post a /blog/post/ nikdy nekonkurovaly jako dvě verze téže stránky. Parametry z adresy by měly být z kanonické adresy odstraněny, aby sledovací parametry nevytvářely duplicity.

Jak vytvořit mapu webu a robots.txt v Astro?

Použijte oficiální integraci popsanou na stránce @astrojs/sitemap. Příkaz npx astro add sitemap ji nainstaluje a přidá do konfigurace. Vyžaduje volbu site a při sestavení zapíše soubor sitemap-index.xml, který odkazuje na číslované soubory (sitemap-0.xml, na velkých webech další). Každý soubor obsahuje ve výchozím nastavení až 45 000 položek, což určuje volba entryLimit. Pokud s tímto formátem začínáte, náš slovníkový pojem mapa webu XML vysvětluje, co s ní Google dělá.

Pro SEO jsou důležitá tři nastavení:

• filter: funkce, která přijímá adresu každé stránky; vraťte false u stránek s poděkováním, interního vyhledávání, konceptů nebo čehokoli s noindex, takže mapa webu uvádí jen adresy, které lze indexovat.
• i18n: mapuje vaše jazykové složky na kódy jazyků a přidá ke každé položce alternativy hreflang.
• customPages: přidává adresy, které integrace sama neobjeví.

U robots.txt na většině webů stačí statický soubor ve složce public. Pokud se obsah liší mezi testovací a produkční verzí, vygenerujte jej místo toho z koncového bodu (src/pages/robots.txt.ts). V obou případech přidejte řádek Sitemap, který ukazuje na sitemap-index.xml, a výsledek před spuštěním ověřte kontrolérem robots.txt. Stejnou technikou koncového bodu vznikne soubor llms.txt; náš návod jak nainstalovat soubor llms.txt popisuje jeho obsah.

Jak zvládnout hreflang a vícejazyčné weby v Astro?

Vestavěné směrování i18n v Astro řeší stránku s adresami. V konfiguraci deklarujete defaultLocale a seznam jazykových verzí a zvolíte, zda výchozí jazyk dostane také předponu (prefixDefaultLocale). Pomocné funkce, například getRelativeLocaleUrl, sestavují lokalizované odkazy a Astro.currentLocale říká každé stránce, v jakém jazyce je.

Průvodce směrováním nepokrývá značky hreflang v hlavičce, takže je naplánujte sami do komponenty SEO: pro každou stránku jeden alternativní odkaz na jazykovou verzi, plus x-default, všechny jako absolutní adresy, a každá verze musí uvádět všechny ostatní (zpětné odkazy). Generování z téhož seznamu jazyků jako směrování zabrání nejčastější chybě, alternativě, která ukazuje na neexistující stránku. Logiku ověříte na několika adresách: náš generátor hreflang vypíše celou sadu značek pro stránku. Poté zapněte volbu i18n u mapy webu jako druhý signál.

Jak obrázky a ostrovy ovlivňují rychlost a Core Web Vitals?

Rychlost je oblast, kde Astro získává nejvíce, a je to vidět v Core Web Vitals. Průvodce obrázky v Astro popisuje komponentu Image z astro:assets: optimalizuje místní obrázky, převádí jejich formát, nastavuje líné načítání a asynchronní dekódování a odvozuje rozměry obrázků, aby se zabránilo Cumulative Layout Shift. Atribut alt je u ní povinný, což vynucuje základní pravidlo SEO obrázků. Komponenta Picture jde dál a podává AVIF nebo WebP se záložní variantou.

Dva zvyky celý obraz doplňují. Obrázky, které je třeba optimalizovat, držte v src (soubory ve složce public se podávají beze změny, bez zpracování). A hlavní obrázek v horní části stránky nenačítejte líně: dejte mu okamžité načítání, aby nezdržoval Largest Contentful Paint.

Architektura ostrovů drží JavaScript pod kontrolou. Komponenta je statické HTML, dokud nepřidáte direktivu klienta: client:load ji okamžitě oživí, client:idle ve chvíli, kdy je prohlížeč volný, client:visible až po vstupu do zobrazení. Vyhrazení client:load pro to, co musí reagovat hned (nabídka, košík), je nejjednodušší způsob, jak chránit Interaction to Next Paint. Serverové ostrovy (server:defer) nechají personalizovaný blok načíst až po uložené stránce, aniž by zpomalily hlavní obsah.

Jak přidat strukturovaná data na web v Astro?

Astro nemá funkci pro schémata, takže máte plnou kontrolu. Pro každý typ stránky (Article, Product, Organization, BreadcrumbList, FAQPage) vytvořte objekt JavaScriptu a vypište jej do skriptové značky typu application/ld+json, pomocí direktivy set:html s JSON.stringify, aby JSON nebyl escapován. Plňte jej ze stejných dat frontmatter nebo kolekce jako viditelná stránka, takže značka vždy odpovídá tomu, co uživatelé vidí, což je požadavek pokynů Googlu k značkování schémat.

Pro návrh JSON nového typu stránky vám bezplatný generátor schémat dá platný výchozí blok, který pak převedete na šablonu. Po každé změně šablony ověřte vzorek sestavených stránek nástrojem Google Rich Results Test.

Jak zvládnout přesměrování při migraci na Astro?

Migrace z WordPressu nebo Next.js je pro web na Astro nejrizikovější okamžik. Ponechte každou adresu, která má návštěvnost nebo zpětné odkazy, a ostatní jednu po druhé namapujte na nejbližší ekvivalent trvalými přesměrováními, jak je vysvětleno v našem průvodci SEO přesměrováními.

Konfigurace Astro přijímá objekt redirects, který mapuje staré cesty na nové. S adaptérem serveru se z nich stanou skutečná HTTP přesměrování. U čistě statického sestavení Astro místo toho zapíše HTML stránku s meta refresh, kterou Google sice následuje, ale bere ji jako slabší signál než přesměrování 301 na straně serveru. U statického webu proto deklarujte přesměrování ve formátu vlastního hostitele (soubor _redirects na Netlify nebo Cloudflare Pages, soubor vercel.json na Vercelu), aby roboti dostali skutečné přesměrování 301.

Jak Astro pomáhá s SEO a GEO?

Být citován v ChatGPT, Perplexity nebo Gemini začíná tím, že je obsah čitelný. Mnoho robotů AI stahuje surové HTML a nespouští JavaScript, takže web, který odešle celý text v první odpovědi, jak to Astro ve výchozím nastavení dělá, odstraňuje překážku, kterou mají weby vykreslované na klientovi stále. Čisté nadpisy, odstavce s odpovědí na začátku, strukturovaná data a soubor llms.txt pak usnadňují citování každé stránky.

Po spuštění měřte, nehádejte. Přehled GEO a SEO v Sorank spojuje data z Search Console a vaše návštěvy od asistentů AI, takže vidíte, zda si nový web udrží pozice.

Technická kvalita se vyplatí jen s obsahem, který se může umístit. Generátor blogových článků s AI od Sorank píše a publikuje články optimalizované pro Google a asistenty AI a přes webhook se napojí na vlastní web, jako je projekt v Astro.

Astro vám ve výchozím nastavení dává procházitelné a rychlé HTML; pozice však dál závisí na značkách hlavičky, mapě webu, hreflang, strukturovaných datech a přesměrováních, které přidáte navrch. Nejprve nastavte sdílenou komponentu SEO a mapu webu, a pak před spuštěním projděte tabulku výše.