Astro SEO: zo laat je een Astro-site ranken in Google en citeren door AI

Korte quiz

Is SEO iets voor jou, en hoe begin je?

Vraag 1 van 425%

Zoeken mensen in Google naar wat je verkoopt?

Ja, ik denk het welNee, het is nieuw of heel nicheWeet ik niet

Astro SEO is het werk dat van die schone HTML pagina's maakt die ranken. De gids van Google over de basisprincipes van JavaScript-SEO legt uit dat JavaScript-sites in drie fasen worden verwerkt (crawlen, renderen, indexeren) en stelt dat server-side rendering of pre-rendering nog altijd een prima idee is, omdat niet alle bots JavaScript uitvoeren. Astro begint standaard op dat punt. Deze gids behandelt de rest, instelling per instelling, en elk gedrag is gecontroleerd in de officiële Astro-documentatie. Ter info: de site sorank.com die je nu leest, draait op Astro.

Is Astro goed voor SEO?

Ja, technisch gezien wel. Astro rendert componenten tijdens de build naar HTML en verwijdert de JavaScript die frameworks als React of Vue normaal naar de browser sturen. Zo vermijd je de klassieke problemen uit onze gids over JavaScript-SEO: lege HTML-schillen, inhoud die pas na het renderen verschijnt, links die geen echte ankertags zijn. Ook de routingvalkuilen van een single-page application blijven je bespaard, want elke Astro-route is een echte URL met een eigen HTML-bestand.

Wat Astro niet doet, is net zo belangrijk. Er is geen ingebouwde SEO-plugin, geen automatische metabeschrijving, geen automatische canonical-tag en geen gestructureerde gegevens. De tabel scheidt wat je gratis krijgt van wat je zelf bouwt.

Statisch of server-rendering: welke modus is beter voor SEO?

De Astro-documentatie over on-demand rendering is duidelijk: standaard worden pagina's, routes en API-endpoints tijdens de build vooraf gerenderd als statische pagina's. Voor SEO is statische output de veiligste standaard: elke URL is een kant-en-klaar HTML-bestand, geleverd via een CDN, snel en identiek voor elke bezoeker en elke bot.

On-demand rendering (op de server) vraagt om een adapter voor je hosting (bijvoorbeeld Node, Netlify, Vercel of Cloudflare). Daarna haal je één route uit de pre-rendering met export const prerender = false, of zet je het hele project om met output: 'server' en schakel je statische pagina's één voor één weer in. Beide modi leveren volledige HTML, dus Google ziet hetzelfde. De verschillen zitten elders:

• Snelheid: een statisch bestand wordt meteen geleverd; een server-gerenderde pagina hangt af van de responstijd van de server, die meeweegt in de Largest Contentful Paint.
• Actualiteit: server-rendering past bij pagina's die steeds veranderen (voorraad, prijzen, zoekresultaten), waar een nieuwe build te traag zou zijn.
• Tools: sommige integraties, zoals de sitemap, zien dynamische serverroutes niet (zie hieronder).

De vuistregel: houd marketingpagina's, blogartikelen en documentatie statisch, en render alleen routes met live gegevens on demand. De Astro-documentatie raadt hetzelfde aan: blijf bij de standaard statische modus tot de meeste pagina's on-demand rendering nodig hebben.

Hoe stel je metatags en canonical-URL's in Astro in?

Maak één SEO-component (vaak BaseHead of Seo genoemd) en neem die op in de head van elke layout. De component krijgt een titel, een beschrijving, een optionele afbeelding en een optionele noindex-vlag, en geeft het volgende uit:

1. de title-tag, uniek per pagina, met het belangrijkste zoekwoord vooraan;
2. de metabeschrijving, per pagina met de hand geschreven (dat is je snippet in de zoekresultaten);
3. de canonical-tag, als absolute URL opgebouwd uit Astro.url.pathname en de waarde site uit je configuratie;
4. Open Graph- en social-tags (titel, beschrijving, afbeelding, URL) voor linkvoorbeelden;
5. een robots-metatag als een pagina buiten de index moet blijven.

Stel eerst de optie site in astro.config.mjs in: de canonical, de sitemap en de social-tags hangen ervan af. Kies daarna een trailingSlash-beleid ('always' of 'never') en houd je eraan, zodat /blog/artikel en /blog/artikel/ nooit als twee versies van dezelfde pagina concurreren. Haal querystrings uit de canonical, zodat trackingparameters geen duplicaten opleveren.

Hoe genereer je een sitemap en robots.txt met Astro?

Gebruik de officiële integratie die is beschreven op de pagina over @astrojs/sitemap. Met npx astro add sitemap installeer je haar en voeg je haar toe aan je configuratie. Ze vereist de optie site en schrijft tijdens de build een bestand sitemap-index.xml dat naar genummerde bestanden verwijst (sitemap-0.xml, en meer bij grote sites). Elk bestand bevat standaard tot 45.000 vermeldingen, in te stellen met de optie entryLimit. Is het formaat nieuw voor je, dan legt ons woordenlijstitem over de XML-sitemap uit wat Google ermee doet.

Drie instellingen tellen voor SEO:

• filter: een functie die elke pagina-URL ontvangt; geef false terug voor bedankpagina's, interne zoekfunctie, concepten en alles met noindex, zodat de sitemap alleen indexeerbare URL's bevat.
• i18n: koppelt je taalmappen aan taalcodes en voegt aan elke vermelding hreflang-alternatieven toe.
• customPages: voegt URL's toe die de integratie zelf niet kan vinden.

Voor robots.txt volstaat op de meeste sites een statisch bestand in de map public. Verschilt de inhoud tussen staging en productie, genereer het dan via een endpoint (src/pages/robots.txt.ts). Voeg in beide gevallen een Sitemap-regel toe die naar sitemap-index.xml wijst, en test het resultaat vóór de lancering met een robots.txt-checker. Met dezelfde techniek maak je een llms.txt-bestand; onze gids over een llms.txt-bestand installeren beschrijft de inhoud.

Hoe pak je hreflang en meertalige sites aan in Astro?

De ingebouwde i18n-routing van Astro regelt de URL-kant. In de configuratie declareer je een defaultLocale en een lijst locales, en kies je of de standaardtaal ook een prefix krijgt (prefixDefaultLocale). Hulpfuncties als getRelativeLocaleUrl bouwen gelokaliseerde links, en Astro.currentLocale vertelt elke pagina in welke taal ze is.

De routinggids behandelt hreflang-tags in de head niet, dus reken erop dat je ze zelf in de SEO-component schrijft: per pagina één alternate-link per taalversie plus een x-default, allemaal als absolute URL's, en elke versie moet alle andere vermelden (retourlinks). Genereer je ze uit dezelfde talenlijst als de routing, dan voorkom je de meest gemaakte fout: een alternatief dat naar een niet-bestaande pagina verwijst. Wil je de logica op een paar URL's controleren, dan levert onze hreflang-generator de volledige set tags voor een pagina. Zet daarna de i18n-optie van de sitemap aan als tweede signaal.

Wat doen afbeeldingen en islands met snelheid en Core Web Vitals?

Snelheid is waar Astro het meeste wint, en dat zie je terug in de Core Web Vitals. De afbeeldingengids van Astro beschrijft de Image-component uit astro:assets: die optimaliseert lokale afbeeldingen, zet het formaat om, voegt lazy loading en asynchroon decoderen toe en leidt de afmetingen van de afbeelding af om Cumulative Layout Shift te voorkomen. Het alt-attribuut is er verplicht, wat een basisregel van afbeeldings-SEO afdwingt. De Picture-component gaat verder en levert AVIF of WebP met een fallback.

Twee gewoontes maken het af. Zet afbeeldingen die geoptimaliseerd moeten worden in src (bestanden in public worden ongewijzigd geleverd). En laad de hoofdafbeelding bovenaan de pagina niet lazy maar meteen, zodat ze de Largest Contentful Paint niet vertraagt.

De islands-architectuur houdt JavaScript in toom. Een component blijft statische HTML tot je een client-directive toevoegt: client:load hydrateert hem direct, client:idle zodra de browser vrij is, client:visible pas als hij in beeld komt. client:load alleen gebruiken voor wat meteen moet reageren (een menu, een winkelwagen) is de simpelste manier om Interaction to Next Paint te beschermen. Server islands (server:defer) laden een gepersonaliseerd blok na de gecachete pagina, zonder de hoofdinhoud te vertragen.

Hoe voeg je gestructureerde gegevens toe aan een Astro-site?

Astro heeft geen schemafunctie, wat je volledige controle geeft. Bouw per paginatype een JavaScript-object (Article, Product, Organization, BreadcrumbList, FAQPage) en zet het in een script-tag van het type application/ld+json, met de directive set:html en JSON.stringify zodat de JSON niet wordt ge-escaped. Voed het met dezelfde frontmatter- of collectiegegevens als de zichtbare pagina: zo komt de markup altijd overeen met wat gebruikers zien, een eis uit de richtlijnen van Google over schema-markup.

Om de JSON voor een nieuw paginatype op te stellen, geeft onze gratis schemagenerator je een geldig startblok dat je daarna tot sjabloon omvormt. Controleer na elke wijziging van het sjabloon een steekproef van gebouwde pagina's met de test voor uitgebreide resultaten van Google.

Hoe ga je om met redirects bij een migratie naar Astro?

Migraties vanaf WordPress of Next.js zijn het riskantste moment voor een Astro-site. Behoud elke URL met verkeer of backlinks en koppel de rest één voor één aan het dichtstbijzijnde equivalent met permanente redirects, zoals uitgelegd in onze gids over SEO-redirects.

De Astro-configuratie accepteert een object redirects dat oude paden aan nieuwe koppelt. Met een adapter worden dat echte HTTP-redirects. Bij een puur statische build schrijft Astro in plaats daarvan een HTML-pagina met een meta refresh, die Google volgt maar als zwakker signaal behandelt dan een server-side 301. Declareer de redirects voor een statische site daarom in het formaat van je hostingpartij (een _redirects-bestand op Netlify of Cloudflare Pages, een vercel.json-bestand op Vercel), zodat crawlers een echte 301 krijgen.

Hoe helpt Astro bij SEO en GEO?

Geciteerd worden door ChatGPT, Perplexity of Gemini begint met leesbaar zijn. Veel AI-crawlers halen de ruwe HTML op zonder JavaScript uit te voeren, dus een site die zijn volledige tekst al in de eerste respons levert, zoals Astro standaard doet, ruimt een drempel op die client-gerenderde sites nog hebben. Duidelijke tussenkoppen, alinea's die meteen antwoord geven, gestructureerde gegevens en een llms.txt-bestand maken elke pagina vervolgens makkelijker te citeren.

Meet na de lancering in plaats van te gokken. Het GEO / SEO-dashboard van Sorank brengt je Search Console-gegevens en je bezoeken vanuit AI-assistenten samen, zodat je ziet of de nieuwe site zijn posities vasthoudt.

Technische kwaliteit loont pas met inhoud om mee te ranken. De Blogartikelgenerator van Sorank schrijft en publiceert artikelen die zijn geoptimaliseerd voor Google en AI-assistenten, en koppelt via een webhook aan een maatwerksite zoals een Astro-project.

Astro geeft je standaard snelle, crawlbare HTML; ranken hangt nog steeds af van de head-tags, sitemap, hreflang, gestructureerde gegevens en redirects die je zelf toevoegt. Zet eerst de gedeelde SEO-component en de sitemap op en loop vóór de lancering de tabel hierboven door.