Artikel

Next.js og SEO — Server-side rendering og SEO

Next.js er den primære React-løsning for SEO-venlig rendering — med App Router, Metadata API og hybrid SSR/SSG i samme projekt. Det eliminerer de fleste JavaScript-SEO-problemer.

Sidst opdateret:

Next.js er det dominerende React-framework til produktionswebsites med SEO-krav. Det løser de grundlæggende JavaScript-SEO-problemer ved at flytte rendering fra browser til server og generere HTML enten ved build-time (SSG) eller per request (SSR). Resultatet er at Googlebot modtager fuldt HTML-indhold ved første crawl uden at vente på JavaScript-rendering — og at metadata, canonical tags og struktureret data er til stede i kildekoden fra start.

Renderingmodi i Next.js

Next.js understøtter tre primære renderingmodi:

Static Site Generation (SSG): HTML genereres ved build-time. Fastest mulig TTFB, optimal for CDN-caching. Bruges til sider med indhold der sjældent ændres: landingssider, blogindlæg, dokumentation. Googlebots modtager komplet HTML på første crawl.

Server-Side Rendering (SSR): HTML genereres per request på serveren. Bruges til sider med dynamisk, brugerspecifikt eller hyppigt opdateret indhold. Langsommere end SSG men stadig hurtigere end CSR for Google.

Incremental Static Regeneration (ISR): Hybridform — statisk genereret men regenereret i baggrunden med definerede intervaller. revalidate: 3600 regenererer siden maksimalt hver time. Ideel til indhold der opdateres regelmæssigt.

Metadata API (App Router)

Next.js App Router har et Metadata API til deklarativ title og meta description:

export const metadata = {
  title: 'Side titel',
  description: 'Meta description her',
  openGraph: {
    title: 'OG titel',
    description: 'OG beskrivelse',
  },
};

Metadata eksporteres fra page.tsx og genereres server-side — ingen klientside JavaScript påkrævet for at Googlebot ser korrekte metadata.

generateMetadata til dynamiske sider

For dynamiske URL’er (fx produktsider) bruges generateMetadata:

export async function generateMetadata({ params }) {
  const product = await getProduct(params.slug);
  return { title: product.name, description: product.description };
}

Google modtager korrekte, side-specifikke metadata ved crawl. → Denne artikel er en del af JavaScript og rendering — Scripts, DOM og CSR vs SSR.

Del af: JavaScript og rendering — Scripts, DOM og CSR vs SSR →

Andre artikler i samme emne

Relaterede begreber

Emne JavaScript og rendering — Scripts, DOM og CSR vs SSR JavaScript er SEOs største rendering-udfordring — forstå CSR vs SSR, DOM, lazy loading og hvad Googlebot faktisk ser. Artikel Server-side rendering — SSR og fordele for SEO SSR leverer færdig HTML fra serveren — Googlebot ser straks indholdet uden rendering-kø, og FCP forbedres markant. Artikel Static site generation — SSG og SEO-fordele ved statiske sider SSG genererer færdige HTML-filer ved build-time — der er ingen server-side rendering ved hvert request, hvilket giver lavest mulig TTFB og optimal crawlbarhed. Artikel React og SEO — JavaScript-rendering og søgesynlighed Ren React (Create React App) er client-side rendered og problematisk for SEO. Løsningen er Next.js (SSR/SSG), Astro (static-first) eller prerendering for eksisterende React-sites. Artikel Prerendering — Forhåndsrenderet HTML til crawlere Prerendering genererer HTML-snapshots af JavaScript-sider til crawlere. Det er en løsning til eksisterende SPA-sites der ikke kan migreres til SSR eller SSG. Artikel Meta tags — Title, description og alle vigtige meta-elementer Meta tags kommunikerer direkte med søgemaskiner og sociale platforme — title og description er de vigtigste for klik og rangering.

Ofte stillede spørgsmål

Er Next.js bedre for SEO end Create React App?
Ja, markant. Create React App (CRA) producerer client-side rendered (CSR) React — alt HTML genereres i browseren. Google renderer CSR-sider men med forsinkelse og ressourcebegrænsning. Next.js producerer HTML server-side (SSR) eller ved build-time (SSG) — Google modtager fuldt renderet HTML ved første crawl. For SEO er Next.js klart overlegen.
Hvad er App Router vs Pages Router i Next.js SEO-sammenhæng?
App Router (Next.js 13+) er den moderne tilgang med React Server Components, streaming og Metadata API til deklarativ metadata-håndtering. Pages Router er den ældre tilgang med `next/head` til metadata. Begge understøtter SSR og SSG — men App Router giver bedre performance (streaming, partial hydration) og renere metadata-API. Nye projekter bør bruge App Router.
Hvad er Incremental Static Regeneration (ISR) og hvornår giver det mening for SEO?
ISR er en hybridform i Next.js der genererer statiske sider ved build-time men regenererer dem i baggrunden baseret på et tidsinterval (revalidate). Det giver SSG-hastighed med regelmæssig indholdsopdatering. For SEO er det ideelt til sider der opdateres jævnligt men ikke kræver real-time data — blogindlæg, produktsider, nyhedssider. Sæt revalidate til 3600 (1 time) eller mere afhængig af opdateringsfrekvens.
Hvordan håndterer Next.js canonical tags korrekt?
Med App Router sættes canonical via Metadata API: `export const metadata = { alternates: { canonical: 'https://eksempel.dk/side/' } }`. Med Pages Router bruges `next/head` med et `<link rel='canonical'>` element. Next.js placerer begge korrekt i `<head>` server-side, så Googlebot ser canonical ved første crawl uden rendering-kø.
Hvad gør generateStaticParams i Next.js for SEO?
generateStaticParams genererer alle dynamiske URL-varianter ved build-time og pre-renderer dem som statiske sider. For en blog med mange indlæg genererer den alle `/blog/[slug]`-sider som statiske HTML-filer. Googlebots modtager fuldt renderet HTML med korrekt metadata og indhold ved første crawl — ingen forsinkelse, ingen render-kø.

Placering i ordbogen

Kode — Webkode og teknisk SEO
JavaScript og rendering — Scripts, DOM og CSR vs SSR
Next.js og SEO — Server-side rendering og SEO