Next.js SEO: rendering, metadata, sitemaps en een blog die scoort

Kort gezegd: Next.js is een van de beste React-frameworks voor SEO, omdat het crawlers volledige HTML stuurt in plaats van een lege schil. Wilt u goed scoren, prerender dan contentpagina's (statische generatie of ISR), definieer titels, beschrijvingen en canonicals met de Metadata API, genereer sitemap.xml en robots.txt vanuit de app-map, gebruik echte links en correcte statuscodes, en houd de belangrijkste content buiten code die alleen in de browser draait, want de meeste AI-crawlers voeren geen JavaScript uit.

Bij Next.js SEO draait het vooral om de juiste keuze per route: wat wordt op de server gerenderd, wat wordt gecachet en wat staat in de HTML voordat er ook maar één script draait. Google legt in de basisprincipes van JavaScript-SEO uit dat JavaScript-apps in drie fasen worden verwerkt (crawlen, renderen, indexeren) en dat server-side rendering of prerendering "nog steeds een goed idee" is. Next.js doet dat standaard. Deze gids behandelt de App Router (Next.js 13 en hoger), met opmerkingen over de oudere Pages Router.

Is Next.js goed voor SEO?

Ja. Een gewone React-app met client-side rendering stuurt een bijna leeg HTML-bestand en bouwt de pagina in de browser op; zoekmachines moeten die renderen, en veel bots doen dat nooit. Next.js rendert React op de server, dus de HTML-respons bevat al koppen, tekst, links en metadata. Onze gids over JavaScript-SEO legt uit waarom dat verschil telt voor indexering.

In de App Router zijn componenten standaard Server Components. Zelfs componenten met 'use client' worden op de server naar HTML geprerenderd. Het zwakke punt is data: alles wat u in useEffect ophaalt, of pas na een klik laadt, ontbreekt in de initiële HTML. Haal content op in Server Components en gebruik clientcomponenten alleen voor interactiviteit.

SSG, SSR, ISR of CSR: welke rendermodus kiest u?

Met Next.js kunt u modi per route combineren. De keuze bepaalt actualiteit, snelheid en wat crawlers ontvangen.

De Next.js-documentatie over ISR noemt de voordelen: statische content bijwerken "zonder de hele site opnieuw te bouwen" en grote aantallen pagina's beheren zonder lange buildtijden. Een route met export const revalidate = 3600 wordt hooguit eens per uur opnieuw gegenereerd; voor exacte controle roept u revalidatePath of revalidateTag aan wanneer content verandert. ISR werkt niet met een statische export (output: 'export'). Voor apps die client-side gerenderd moeten blijven, beschrijft onze gids over SEO voor single page applications de oplossingen.

Hoe stelt u titels, beschrijvingen en canonicals in met de Metadata API?

De Metadata API vervangt next/head in de App Router. Volgens de Next.js-documentatie over metadata exporteert u een statisch metadata-object uit een layout of pagina, of een functie generateMetadata als de waarden van data afhangen, en Next.js genereert de head-tags. Beide worden alleen ondersteund in 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] },
  }
}

Vijf regels die de meeste problemen voorkomen:

• Stel metadataBase in in de root-layout (uw productiedomein), zodat relatieve canonicals en Open Graph-URL's absoluut worden.
• Gebruik een titelsjabloon in de root-layout, zoals '%s | Merk', zodat elke pagina een unieke titel krijgt met het merk één keer.
• Geef elke indexeerbare pagina een naar zichzelf verwijzende canonical via alternates.canonical; die beschermt tegen duplicaten door URL-parameters en slashes aan het eind. Onze woordenlijst over de canonical tag zet de regels op een rij.
• Schrijf een beschrijving per pagina, in generateMetadata uit de content gegenereerd, nooit één standaardwaarde voor de hele site.
• Voeg Open Graph-afbeeldingen toe met een bestand opengraph-image in de routemap, en controleer het resultaat met een Open Graph-previewtool.

Op dynamische pagina's streamt Next.js de metadata na de eerste bytes om het renderen te versnellen. Volgens de documentatie is streaming uitgeschakeld voor bots die metadata in de head verwachten, herkend aan de user agent (Bingbot, Twitterbot en Slackbot staan bij de voorbeelden), en past de optie htmlLimitedBots de lijst aan. Ontbreekt een crawler die voor u belangrijk is, voeg hem dan toe. In de Pages Router is het equivalent de Head-component uit next/head, met een key-attribuut tegen dubbele tags.

Hoe genereert u sitemap.xml en robots.txt in Next.js?

Beide zijn speciale bestanden in de app-map. Een bestand sitemap.ts dat een functie met URL's exporteert, wordt /sitemap.xml; een bestand robots.ts wordt /robots.txt. De sitemapreferentie vermeldt dat het bestand standaard wordt gecachet en dat de limiet van Google 50.000 URL's per sitemap is; daarboven splitst generateSitemaps het in meerdere bestanden.

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,
  }))
}

Neem alleen canonieke, indexeerbare URL's op die 200 teruggeven, met de echte wijzigingsdatum in lastModified. De sitemap accepteert ook alternates.languages voor meertalige sites. Verwijs in robots.ts naar de sitemap en bepaal welke AI-bots mogen crawlen; ons artikel over robots.txt voor AI-crawlers zet ze op een rij. Meer over het formaat in onze woordenlijst over de XML-sitemap.

Welke technische details breken de SEO van een Next.js-site het vaakst?

Al deze problemen verminderen de crawlbaarheid: een crawler moet elke URL via links kunnen vinden en een schone statuscode krijgen.

Hoe voegt u gestructureerde data toe in Next.js?

De Next.js-documentatie raadt aan JSON-LD als script-tag van het type application/ld+json direct in de pagina- of layoutcomponent te renderen, op basis van dezelfde data als de pagina, en het teken < in de geserialiseerde JSON te escapen om injectie te voorkomen. Omdat het op de server wordt gerenderd, zien Google en AI-crawlers het in de ruwe HTML. Gebruik Article (of BlogPosting) voor berichten, Organization in de root-layout, BreadcrumbList voor diepe pagina's en Product voor e-commerce. Een schema-generator geeft u een geldig startblok; valideer de pagina daarna met de test voor uitgebreide resultaten van Google.

Hoe maakt u een Next.js-site snel genoeg voor de Core Web Vitals?

Next.js levert componenten die de gebruikelijke oorzaken van slechte Core Web Vitals aanpakken:

• next/image: schaalt afbeeldingen, levert moderne formaten, laadt standaard lazy en vereist afmetingen, wat layoutverschuivingen voorkomt. Markeer de hoofdafbeelding boven de vouw als prioriteit zodat die niet lazy laadt (meestal is dat het element van de Largest Contentful Paint).
• next/font: host lettertypen zelf en voorkomt verschuivingen door een late lettertypewissel.
• next/script: laadt scripts van derden met een strategie (afterInteractive, lazyOnload) in plaats van de pagina te blokkeren.
• Minder client-JavaScript: elke 'use client'-grens voegt code toe die gedownload en gehydrateerd moet worden, wat de Interaction to Next Paint op mobiel belast.

Meet velddata, niet alleen een labscore: onze gids over PageSpeed Insights laat zien hoe u beide leest.

Hoe runt u een Next.js-blog die scoort?

Een Next.js-blog heeft meestal een van drie vormen: MDX- of Markdown-bestanden in de repository (eenvoudig, maar elk bericht vraagt een commit en een deploy), een headless CMS (Sanity, Contentful, Strapi, Payload) dat in Server Components wordt opgevraagd, of een publicatiewebhook die artikelen van een externe tool ontvangt. In alle drie de gevallen is het SEO-patroon gelijk: een dynamische route app/blog/[slug] met generateStaticParams, generateMetadata, ISR, een sitemap uit dezelfde bron en een overzichtspagina die naar elk bericht linkt.

De webhook haalt publiceren uit de deploycyclus. Een Route Handler ontvangt het artikel, slaat het op en revalideert daarna de betreffende pagina's:

// 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 })
}

Hoe helpt Next.js SEO om door AI-assistenten geciteerd te worden?

Server-side rendering is de eerste voorwaarde voor GEO (generative engine optimization). De analyse van Vercel uit december 2024, The rise of the AI crawler, stelde vast dat "geen van de grote AI-crawlers momenteel JavaScript rendert", noemde GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot en PerplexityBot, en telde in één maand 569 miljoen opvragingen door GPTBot en 370 miljoen door Claude op het eigen netwerk. Een Next.js-pagina die tekst, koppen en JSON-LD prerendert, is voor allemaal leesbaar; een client-side gerenderde pagina niet.

De tweede voorwaarde is content die het citeren waard is: artikelen die per sectie één vraag beantwoorden, met bronnen, cijfers en heldere definities, regelmatig gepubliceerd. Dat deel automatiseert Sorank, ons product. Sorank is SEO- en GEO-software op autopilot: het vindt uw zoekwoorden, en de Blogartikelgenerator schrijft 20, 60 of 120 artikelen per maand met bronnen, interne links en afbeeldingen. Op een Next.js-site koppelt het via de aangepaste webhook die op de installatiepagina staat beschreven: uw Route Handler ontvangt elk artikel, slaat het op en revalideert de blog. AI-vermeldingstracking controleert daarna elke week of ChatGPT, Claude en Gemini uw merk citeren.

Samengevat: prerender elke pagina die gevonden moet worden, definieer metadata op de server en voed de sitemap uit dezelfde bron als de content. Next.js levert het gereedschap; posities en AI-citaties komen voort uit wat u ermee publiceert. Om een Next.js-blog doorlopend van artikelen te voorzien, bekijk de abonnementen van Sorank, vanaf 49 € per maand met 3 dagen gratis proberen.