Next.js SEO: Gjengivelse, metadata, sitemaps og en blogg som rangeres

Rask quiz

Passer SEO for deg, og hvordan bør du starte?

Spørsmål 1 av 425%

Søker folk på Google etter det du selger?

Ja, tror jegNei, det er nytt eller svært nisjepregetJeg vet ikke

Next.js SEO handler mest om å gjøre riktig valg per rute: hva som gjengis på serveren, hva som mellomlagres, og hva som havner i HTML-en før noe skript kjører. Google forklarer i grunnleggende om JavaScript-SEO at de behandler JavaScript-apper i tre faser (gjennomsøking, gjengivelse og indeksering), og at «serverside- eller forhåndsgjengivelse fortsatt er en god idé». Next.js gjør det som standard. Denne guiden dekker App Router (Next.js 13 og nyere), med merknader for den eldre Pages Router.

Er Next.js bra for SEO?

Ja. En vanlig React-app med gjengivelse på klienten sender en nesten tom HTML-fil og bygger siden i nettleseren. Søkemotorene må gjengi den, og mange roboter gjør aldri det. Next.js gjengir React på serveren, slik at HTML-svaret allerede inneholder overskriftene, teksten, lenkene og metadataene. Vår guide til JavaScript-SEO forklarer hvorfor den forskjellen betyr noe for indekseringen.

I App Router er komponentene Server Components som standard. Selv komponenter merket med 'use client' forhåndsgjengis til HTML på serveren. Det svake punktet er data: alt du henter inne i useEffect, eller som først lastes etter et klikk, mangler i den første HTML-en. Hent innhold i Server Components, og bruk klientkomponenter bare til interaktivitet.

SSG, SSR, ISR eller CSR: hvilken gjengivelsesmodus bør du velge?

Next.js lar deg blande modusene rute for rute. Valget påvirker hvor oppdatert innholdet er, hastigheten og hva crawlerne får.

Dokumentasjonen for ISR i Next.js lister fordelene: oppdatere statisk innhold «uten å bygge hele nettstedet på nytt» og håndtere store mengder sider uten lange byggetider. En rute med export const revalidate = 3600 blir generert på nytt høyst én gang i timen. For nøyaktig kontroll kaller du revalidatePath eller revalidateTag når innholdet endres. ISR fungerer ikke med en statisk eksport (output: 'export'). For apper som må være gjengitt på klienten, dekker vår guide til SEO for enkeltsideapplikasjoner omveiene.

Hvordan setter du titler, beskrivelser og canonicals med Metadata API-et?

Metadata API-et erstatter next/head i App Router. Ifølge dokumentasjonen for metadata i Next.js eksporterer du et statisk metadata-objekt fra en layout eller side, eller en generateMetadata-funksjon når verdiene avhenger av data, og Next.js genererer tagene i head. Begge deler støttes bare 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 som forhindrer de fleste problemene:

• Sett metadataBase i rotlayouten (produksjonsdomenet ditt), slik at relative canonicals og Open Graph-URL-er blir absolutte.
• Bruk en tittelmal i rotlayouten, for eksempel '%s | Merke', slik at hver side får en unik tittel med merkenavnet én gang.
• Gi hver indekserbar side en selvrefererende canonical via alternates.canonical. Det beskytter mot duplikater laget av søkeparametere og skråstrek på slutten. Vårt leksikonoppslag om canonical-tagg dekker reglene.
• Skriv en beskrivelse per side, generert fra innholdet i generateMetadata, aldri én felles standard for hele nettstedet.
• Legg til Open Graph-bilder med en opengraph-image-fil i rutemappen, og kontroller resultatet med et verktøy for forhåndsvisning av Open Graph.

På dynamiske sider sender Next.js metadataene som strøm etter de første bytene for å øke gjengivelsestempoet. Dokumentasjonen sier at strømming er slått av for roboter som forventer metadata i head, oppdaget via user agent (Bingbot, Twitterbot og Slackbot er blant eksemplene), og at alternativet htmlLimitedBots tilpasser listen. Hvis du bryr deg om en crawler som ikke er dekket, legg den til. I Pages Router er tilsvarende Head-komponenten fra next/head, med et key-attributt for å unngå dupliserte tagger.

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

Begge er spesialfiler i app-mappen. En sitemap.ts-fil som eksporterer en funksjon som returnerer URL-er, blir til /sitemap.xml, og en robots.ts-fil blir til /robots.txt. referansen for sitemap forklarer at filen mellomlagres som standard, og at Googles grense er 50 000 URL-er per sitemap. Over det deler generateSitemaps listen opp 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,
  }))
}

Ta bare med kanoniske, indekserbare URL-er som returnerer 200, og bruk den faktiske oppdateringsdatoen i lastModified. Sitemapet støtter også alternates.languages for flerspråklige nettsteder. I robots.ts peker du til sitemapet og bestemmer hvilke AI-roboter som får gjennomsøke nettstedet. Vår artikkel om robots.txt for AI-crawlere lister dem opp. Mer om formatet finner du i leksikonoppslaget om XML-sitemap.

Hvilke tekniske detaljer ødelegger oftest Next.js SEO?

Alle disse problemene svekker gjennomsøkbarheten: en crawler må kunne oppdage hver URL via lenker og få en ren statuskode.

Hvordan legger du til strukturerte data i Next.js?

Dokumentasjonen for Next.js anbefaler å gjengi JSON-LD som et script-element av typen application/ld+json direkte i side- eller layoutkomponenten, bygget fra de samme dataene som siden, og å escape tegnet < i den serialiserte JSON-en for å hindre injeksjon. Fordi det gjengis på serveren, ser både Google og AI-crawlere det i den rå HTML-en. Bruk Article (eller BlogPosting) for innlegg, Organization i rotlayouten, BreadcrumbList for dype sider og Product for netthandel. En skjemagenerator gir deg en gyldig startblokk, og deretter validerer du siden med Googles Rich Results Test.

Hvordan gjør du et Next.js-nettsted raskt nok for Core Web Vitals?

Next.js leverer komponentene som håndterer de vanlige årsakene til dårlige Core Web Vitals:

• next/image: skalerer bilder, serverer moderne formater, laster sent som standard og krever dimensjoner, noe som hindrer layoutforskyvninger. Merk hovedbildet over brettkanten med priority, slik at det ikke lastes sent (det er vanligvis elementet for Largest Contentful Paint).
• next/font: er selvhostet og unngår forskyvningen som kommer av sene skriftbytter.
• next/script: laster tredjepartsskript med en strategi (afterInteractive, lazyOnload) i stedet for å blokkere siden.
• Mindre JavaScript på klienten: hver grense 'use client' legger til kode som må lastes ned og hydreres, noe som trekker ned Interaction to Next Paint på mobil.

Mål feltdata, ikke bare en laboratoriescore: vår guide til PageSpeed Insights viser hvordan du leser begge.

Hvordan driver du en blogg i Next.js som rangeres?

En Next.js-blogg har vanligvis én av tre former: MDX- eller Markdown-filer i repositoriet (enkelt, men hvert innlegg krever en commit og en utrulling), et headless CMS (Sanity, Contentful, Strapi, Payload) som hentes i Server Components, eller en publiseringswebhook som mottar artikler fra et eksternt verktøy. I alle tre tilfellene er SEO-mønsteret det samme: en dynamisk rute app/blog/[slug] med generateStaticParams, generateMetadata, ISR, sitemapet matet fra samme kilde, og en indeksside som lenker til hvert innlegg.

Webhook-mønsteret holder publiseringen utenfor utrullingssyklusen din. En Route Handler mottar artikkelen, lagrer den og validerer deretter de berørte sidene på nytt:

// 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 hjelper SEO i Next.js deg med å bli sitert av AI-assistenter?

Serverside-gjengivelse er første vilkår for GEO (generativ søkemotoroptimalisering). Vercels analyse fra desember 2024, Fremveksten av AI-crawlere, fant at «ingen av de store AI-crawlerne for øyeblikket gjengir JavaScript», og nevner GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot og PerplexityBot. Den telte også 569 millioner GPTBot-hentinger og 370 millioner Claude-hentinger i nettverket sitt på én måned. En Next.js-side som forhåndsgjengir teksten, overskriftene og JSON-LD-en sin, kan leses av alle disse, mens en klientgjengitt side ikke kan det.

Det andre vilkåret er innhold som er verdt å sitere: artikler som svarer på ett spørsmål per avsnitt, med kilder, tall og tydelige definisjoner, publisert jevnlig. Det er delen Sorank, vårt produkt, automatiserer. Sorank er en SEO- og GEO-programvare som kjører på autopilot: den finner søkeordene dine, og generatoren for blogartikler skriver 20, 60 eller 120 artikler i måneden med kilder, interne lenker og bilder. På et Next.js-nettsted kobles den til via den egendefinerte webhooken som beskrives på installasjonssiden: Route Handler-en din mottar hver artikkel, lagrer den og validerer bloggen på nytt. Sporing av AI-omtaler sjekker deretter hver måned om ChatGPT, Claude og Gemini siterer merkevaren din.

Den korte versjonen: forhåndsgjengi alle sider du vil bli funnet på, definer metadata på serveren, og mat sitemapet fra samme kilde som innholdet. Next.js gir deg verktøyene; rangeringer og AI-sitater kommer av det du publiserer med dem. For å holde en Next.js-blogg forsynt med artikler, se prisene til Sorank, fra $49 per måned med en gratis prøveperiode på 3 dager.