Next.js SEO: Rendering, metadata, sitemaps og en blog, der rangerer

Hurtig quiz

Passer SEO til dig, og hvordan skal du starte?

Spørgsmål 1 af 425%

Søger folk på Google efter det, du sælger?

Ja, det tror jegNej, det er nyt eller meget nicheprægetJeg ved det ikke

Next.js SEO handler mest om at træffe det rigtige valg pr. route: hvad der renderes på serveren, hvad der caches, og hvad der når HTML'en, før et script kører. Google forklarer i sine grundlæggende principper for JavaScript-SEO, at det behandler JavaScript-apps i tre faser (crawling, rendering, indeksering), og at „server-side rendering eller prerendering stadig er en god idé“. Next.js gør det som standard. Denne guide dækker App Router (Next.js 13 og nyere), med noter til den ældre Pages Router.

Er Next.js godt for SEO?

Ja. En almindelig React-app bygget med rendering i klienten sender en næsten tom HTML-fil og bygger siden i browseren; søgemaskiner skal rendere den, og mange bots gør aldrig det. Next.js renderer React på serveren, så HTML-svaret allerede indeholder overskrifterne, teksten, links og metadata. Vores guide til JavaScript-SEO forklarer, hvorfor forskellen betyder noget for indekseringen.

I App Router er komponenter Server Components som standard. Selv komponenter markeret med 'use client' prerenderes til HTML på serveren. Det svage punkt er data: alt, du henter i useEffect, eller kun indlæser efter et klik, mangler i den første HTML. Hent indhold i Server Components, og behold klientkomponenter til interaktivitet.

SSG, SSR, ISR eller CSR: hvilken renderingsmetode skal du vælge?

Next.js lader dig blande metoderne route for route. Valget påvirker friskhed, hastighed og det, crawlere modtager.

Next.js-dokumentationen for ISR beskriver fordelene: opdatér statisk indhold „uden at bygge hele sitet igen“ og håndtér store mængder sider uden lange byggetider. En route med export const revalidate = 3600 regenereres højst én gang i timen; for præcis styring kalder du revalidatePath eller revalidateTag, når indholdet ændres. Bemærk, at ISR ikke virker med en statisk eksport (output: 'export'). For apps, der skal forblive renderet i klienten, dækker vores guide til SEO for single page applications workarounds.

Hvordan sætter du titler, beskrivelser og canonicals med Metadata API'et?

Metadata API'et erstatter next/head i App Router. Ifølge Next.js-dokumentationen for metadata eksporterer du et statisk metadata-objekt fra en layout eller side, eller en generateMetadata-funktion, når værdierne afhænger af data, og Next.js genererer head-tagsene. Begge understøttes kun i Server Components.

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

Fem regler, der forebygger de fleste problemer:

• Sæt metadataBase i root-layoutet (dit produktionsdomæne), så relative canonicals og Open Graph-URL'er bliver absolutte.
• Brug en titelskabelon i root-layoutet, for eksempel '%s | Brand', så hver side får en unik titel, og brandnavnet kun står én gang.
• Giv hver side, der kan indekseres, en selvrefererende canonical via alternates.canonical; den beskytter mod dubletter, som query-parametre og afsluttende skråstreger skaber. Vores ordbogsside om canonical-tagget gennemgår reglerne.
• Skriv en beskrivelse pr. side, genereret ud fra indholdet i generateMetadata, aldrig én fælles standard for hele sitet.
• Tilføj Open Graph-billeder med en opengraph-image-fil i route-mappen, og kontrollér resultatet med et værktøj til forhåndsvisning af Open Graph.

På dynamiske sider streamer Next.js metadata efter de første bytes for at fremskynde renderingen. Dokumentationen oplyser, at streaming er slået fra for bots, der forventer metadata i head'en, og at de registreres ud fra user agent (Bingbot, Twitterbot og Slackbot er blandt eksemplerne), og at indstillingen htmlLimitedBots tilpasser listen. Hvis du er afhængig af en crawler, der ikke er med, så tilføj den. I Pages Router svarer det til komponenten Head fra next/head, med en key-attribut for at undgå dublerede tags.

Hvordan genererer du sitemap.xml og robots.txt i Next.js?

Begge er særlige filer i app-mappen. En sitemap.ts-fil, der eksporterer en funktion, som returnerer URL'er, bliver til /sitemap.xml; en robots.ts-fil bliver til /robots.txt. Sitemap-referencen oplyser, at filen caches som standard, og at Googles grænse er 50.000 URL'er pr. sitemap; over det deler generateSitemaps listen op i flere filer.

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

Medtag kun canonical, indekserbare URL'er, der returnerer 200, og brug den rigtige opdateringsdato i lastModified. Sitemappet accepterer også alternates.languages til flersprogede sites. I robots.ts peger du på sitemappet og beslutter, hvilke AI-bots der må crawle sitet; vores artikel om robots.txt for AI-crawlere lister dem. Mere om formatet i vores ordbogsside om XML-sitemap.

Hvilke tekniske detaljer bryder Next.js SEO oftest?

Disse problemer reducerer alle crawlbarheden: en crawler skal kunne opdage hver URL via links og få en ren statuskode.

Hvordan tilføjer du struktureret data i Next.js?

Next.js-dokumentationen anbefaler at rendere JSON-LD som et script-tag af typen application/ld+json direkte i side- eller layoutkomponenten, bygget ud fra de samme data som siden, og at escape tegnet < i den serialiserede JSON for at forhindre injection. Fordi det renderes på serveren, ser både Google og AI-crawlere det i den rå HTML. Brug Article (eller BlogPosting) til artikler, Organization i root-layoutet, BreadcrumbList til dybe sider og Product til e-handel. En schema-generator giver dig en gyldig startblok, og derefter validerer du siden med Googles Rich Results Test.

Hvordan gør du et Next.js-site hurtigt nok til Core Web Vitals?

Next.js leverer de komponenter, der håndterer de typiske årsager til dårlige Core Web Vitals:

• next/image: skalerer billeder, leverer moderne formater, indlæser dovent som standard og kræver dimensioner, hvilket forhindrer layoutforskydninger. Markér hovedbilledet over foldelinjen med priority, så det ikke indlæses dovent (det er typisk elementet for Largest Contentful Paint).
• next/font: hoster skrifttyper selv og undgår det skift, der opstår ved sene udskiftninger af skrifttyper.
• next/script: indlæser tredjepartsscripts med en strategi (afterInteractive, lazyOnload) i stedet for at blokere siden.
• Mindre JavaScript i klienten: hver 'use client'-grænse tilføjer kode, der skal downloades og hydreres, hvilket belaster Interaction to Next Paint på mobil.

Mål feltdata, ikke kun en laboratoriescore: vores guide til PageSpeed Insights viser, hvordan du læser begge dele.

Hvordan kører du en blog på Next.js, der rangerer?

En Next.js-blog tager typisk en af tre former: MDX- eller Markdown-filer i repositoryet (enkelt, men hvert indlæg kræver en commit og en udrulning), et headless CMS (Sanity, Contentful, Strapi, Payload) hentet i Server Components, eller en udgivelses-webhook, der modtager artikler fra et eksternt værktøj. I alle tre tilfælde er SEO-mønsteret det samme: en dynamisk route app/blog/[slug] med generateStaticParams, generateMetadata og ISR, sitemappet fødet fra samme kilde og en indeksside, der linker til alle indlæg.

Webhook-mønsteret holder udgivelsen uden for din udrulningscyklus. En Route Handler modtager artiklen, gemmer den og revaliderer de berørte sider:

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

Hvordan hjælper Next.js SEO med, at AI-assistenter citerer dig?

Server-rendering er den første betingelse for GEO (generativ motoroptimering). Vercels analyse fra december 2024, Fremkomsten af AI-crawlere, fandt, at „ingen af de største AI-crawlere i dag renderer JavaScript“, og nævnte GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot og PerplexityBot. Den målte også 569 millioner hentninger fra GPTBot og 370 millioner fra Claude på sit netværk på én måned. En Next.js-side, der prerenderer sin tekst, sine overskrifter og sin JSON-LD, kan læses af alle dem; en side renderet i klienten kan ikke.

Den anden betingelse er indhold, der er værd at citere: artikler, der besvarer ét spørgsmål pr. afsnit, med kilder, tal og klare definitioner, og som udgives regelmæssigt. Det er den del, som Sorank, vores produkt, automatiserer. Sorank er software, der kører på autopilot til SEO og GEO: den finder dine søgeord, og dens artikelgenerator til blog skriver 20, 60 eller 120 artikler om måneden med kilder, interne links og billeder. På et Next.js-site forbindes den via den brugerdefinerede webhook, der beskrives på installationssiden: din Route Handler modtager hver artikel, gemmer den og revaliderer bloggen. Overvågning af AI-omtaler tjekker derefter hver måned, om ChatGPT, Claude og Gemini citerer dit brand.

Den korte version: prerender hver side, du vil have fundet, definér metadata på serveren, og fød sitemappet fra samme kilde som indholdet. Next.js giver dig værktøjerne; rangeringer og AI-citater kommer fra det, du udgiver med dem. For at holde en Next.js-blog forsynet med artikler, se Soranks priser, fra 49 USD pr. måned med en gratis prøveperiode på 3 dage.