Astro til SEO — konfiguration, sitemap og optimering
Astro bygger statisk HTML med nul JavaScript som standard og giver fremragende Core Web Vitals og crawlbarhed. SEO-konfiguration kræver eksplicit implementering af meta tags, sitemap og structured data — men giver til gengæld fuld kontrol.
Astro er en statisk site generator med “zero JavaScript by default”-filosofi. Komponenter renderes til statisk HTML ved build-tid, og JavaScript sendes kun til browseren hvis du eksplicit tilføjer interaktive øer via Astro’s Island Architecture. Det giver fremragende Core Web Vitals-karakteristika for content-orienterede sites.
Stegger.dk er bygget på Astro. Arkitekturen i projektet er et reelt eksempel på Astro-SEO-konfiguration i praksis.
Meta tags og BaseHead-mønster
Astro genererer ikke meta tags automatisk. Standard-mønsteret er en BaseHead.astro-komponent der modtager title, description og OpenGraph-parametre som props og renderer dem i <head>:
---
interface Props {
title: string;
description: string;
image?: string;
}
const { title, description, image = '/og-default.jpg' } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />Alle layouts importerer BaseHead og sender side-specifikke meta-data som props. Dette mønster giver fuld kontrol og ingen magic — meta-data er eksplicit og sporbar.
Sitemap med @astrojs/sitemap
npx astro add sitemapTilføj site URL til astro.config.mjs:
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://stegger.dk',
integrations: [sitemap()],
});Sitemappet genereres automatisk på /sitemap-index.xml. Sider kan ekskluderes ved at sætte sitemap: false i frontmatter eller via filter-funktionen i sitemap-konfigurationen.
Structured data som JSON-LD
Astro har ingen built-in structured data-generator. Implementer JSON-LD direkte i layouts:
<script type="application/ld+json" set:html={JSON.stringify(schema)} />Definer schema-objektet i frontmatter-sektionen af layoutet og indsæt det med Astro’s set:html-direktiv. Dette er præcis den tilgang stegger.dk bruger til Article-schema i BlogPost.astro.
Performance-optimering
Billede-optimering: Astro’s <Image>-komponent fra astro:assets håndterer automatisk billedoptimering, WebP-konvertering og lazy loading med korrekte width og height attributter (forhindrer CLS).
Font-preloading: Tilføj <link rel="preload"> for kritiske fonts i BaseHead for at undgå FOUT (Flash of Unstyled Text) og forbedre LCP.
Prefetch: Astro’s built-in prefetching (prefetch: true i config eller data-astro-prefetch attribut) preloader links ved hover eller scroll-in-view — forbedrer opfattet navigation-hastighed.
Andre artikler i samme emne
Ofte stillede spørgsmål
- Hvordan tilføjer man sitemap til et Astro-site?
- Astro har en officiel sitemap-integration: `@astrojs/sitemap`. Installation: `npx astro add sitemap`. Derefter tilføj `site: 'https://ditdomæne.dk'` til `astro.config.mjs` — sitemap-integrationen kræver en `site`-URL for at generere korrekte absolutte URLs. Sitemappet genereres automatisk på `/sitemap-index.xml` ved build og inkluderer alle sider med `noindex: false` i frontmatter.
- Hvordan implementerer man meta tags i Astro?
- Astro har ingen built-in meta tag-komponent. Standard-tilgang er at oprette en BaseHead.astro-komponent der modtager `title`, `description` og optionelle OG-parametre som props og renderer dem i `<head>`. Alle sider importerer BaseHead i deres layout. Eksempel: `<BaseHead title={frontmatter.title} description={frontmatter.description} />`. Dette er mønsteret stegger.dk bruger.
- Understøtter Astro server-side rendering?
- Ja — Astro understøtter SSR via output-konfiguration: `output: 'server'` i astro.config.mjs aktiverer full SSR. `output: 'hybrid'` giver side-til-side kontrol: de fleste sider er statiske, men specifikke sider kan markeres med `export const prerender = false` for SSR. For SEO-fokuserede informationssite er fuld static generation (`output: 'static'`) standardvalget. SSR er relevant for sider med brugerspecifikt indhold eller realtidsdata.
- Hvad er Astro's performance-fordele sammenlignet med Next.js?
- Astro sender nul JavaScript til browseren per default. Next.js sender altid React-runtime og eventuelle client-side komponenter. For content-sites (blog, ordbog, dokumentation) giver dette Astro en klar performance-fordel: lavere JavaScript-payload, hurtigere TTI (Time to Interactive) og typisk bedre Lighthouse-scores. For applikationer med høj interaktivitet er Next.js mere naturlig fordi React-modellen er bedre til kompleks state management.
- Hvad er Astros primære SEO-begrænsning sammenlignet med WordPress?
- Astros primære SEO-begrænsning er fraværet af en administrerbar backend og redaktørvenligt interface. Alle SEO-felter — meta title, description, canonical — konfigureres i kodebasen, ikke i et GUI. Det gør Astro ideelt til developer-ejede sites men udfordrende i setups hvor ikke-tekniske redaktører skal redigere SEO-metadata løbende. Løsningen er at kombinere Astro med et headless CMS som Sanity eller Contentful der giver redaktørerne et interface, mens Astro leverer statisk HTML med nul JavaScript-payload.