SEO-checklist voor de App Router: metadata en generateMetadata, metadataBase, titeltemplates, canonical, hreflang, sitemap.ts, robots.ts en OG-afbeeldingen, met code.
In de App Router komen SEO-tags uit een geëxporteerd metadata-object of een generateMetadata-functie in layout- en pagebestanden, die alleen in Server Components werken. Stel metadataBase één keer in de root layout in, voeg app/sitemap.ts en app/robots.ts toe, geef elke route een canonical via alternates en zet een opengraph-image-bestand naast pagina's die er een nodig hebben.
Waar elk onderdeel staat
De App Router heeft ingebouwde oplossingen voor bijna elke technische SEO-taak, maar ze staan verspreid over een tiental documentatiepagina's. Deze checklist zet ze op volgorde, met kopieerbare code per onderdeel, en met de vinkjes houdt u gaandeweg uw eigen project bij.
Nee. Het metadata-object en generateMetadata worden alleen ondersteund in Server Components, omdat Next.js ze op de server moet oplossen voordat er wordt gerenderd. Houd de pagina een Server Component en importeer een clientcomponent voor de interactieve delen.
Huidige versies van Next.js geven params en searchParams door als Promises, dus u schrijft const { slug } = await params binnen een async generateMetadata. Code voor oudere versies die params.slug direct leest, moet worden bijgewerkt.
Gebruik generateSitemaps in een sitemap.ts-bestand. Die geeft een lijst id's terug, en de default export bouwt per id één sitemap. In Next.js 16 komt de id binnen als Promise. De bestanden worden geserveerd op paden zoals /product/sitemap/1.xml.
Niet tenzij u er een instelt. Voeg alternates.canonical toe aan de metadata van elke route, meestal als relatief pad zoals /blog/my-post, en laat metadataBase er een volledige URL van maken.
Nee, een routesegment kan het een of het ander exporteren. Gebruik het statische object als niets afhangt van het verzoek of opgehaalde data, en generateMetadata als dat wel zo is.
Eén keer instellen in app/layout.tsx. Onderliggende pagina's die title: "Pricing" exporteren, worden weergegeven als Pricing | Northside.
Op params wordt gewacht met await. getPost staat voor uw eigen datafunctie.
Geeft per URL één regel terug. changeFrequency en priority zijn optioneel en Google negeert ze, dus ze zijn weggelaten.
Genereert robots.txt in de root van de site.
Tekent een deelafbeelding van 1200 bij 630 op basis van de posttitel met ImageResponse uit next/og. De exports alt, size en contentType worden og-tags.
Deelafbeeldingen op basis van bestanden
metadataBase ingesteld in app/layout.tsx
Laat elk ander URL-veld een relatief pad zijn
Titeltemplate plus standaardwaarde in de root layout
Geeft elke pagina een vast achtervoegsel zoals | Acme
Unieke titel en beschrijving op elke pagina
Statische metadata of generateMetadata per route
Canonical op elke indexeerbare route
hreflang voor vertaalde routes
alternates.languages, of in de sitemap
app/sitemap.ts bevat alleen live canonieke URL's
Splits met generateSitemaps als hij groot is
app/robots.ts met een sitemapregel
Blokkeert alleen gebieden zoals /admin of /api
Open Graph-afbeelding voor belangrijke routes
opengraph-image-bestand met alt-tekst
noindex op dunne of privéroutes
robots: { index: false } in de metadata van die route
Inhoud op de server gerenderd
Controleer de paginabron, niet alleen de browserweergave
{count} van {total} klaar
Gratis beginnen · Geen creditcard nodig