Next.js SEO: Rendering, metadata, sitemaps och en blogg som rankas

Snabbquiz

Är SEO rätt för dig, och hur ska du börja?

Fråga 1 av 425%

Söker folk på Google efter det du säljer?

Ja, jag tror detNej, det är nytt eller mycket nischatJag vet inte

Next.js SEO handlar främst om att göra rätt val för varje rutt: vad som renderas på servern, vad som cachas och vad som når HTML:en innan något skript körs. Google förklarar i sina grunder för JavaScript-SEO att de bearbetar JavaScript-appar i tre faser (genomsökning, rendering, indexering) och att ”server-side- eller förrendering fortfarande är en mycket bra idé”. Next.js gör det som standard. Den här guiden tar upp App Router (Next.js 13 och senare), med noteringar för den äldre Pages Router.

Är Next.js bra för SEO?

Ja. En vanlig React-app med rendering i klienten skickar en nästan tom HTML-fil och bygger sidan i webbläsaren; sökmotorer måste rendera den, och många robotar gör aldrig det. Next.js renderar React på servern, så HTML-svaret innehåller redan rubrikerna, texten, länkarna och metadata. Vår guide till JavaScript-SEO förklarar varför skillnaden spelar roll för indexeringen.

I App Router är komponenterna Server Components som standard. Även komponenter markerade med 'use client' förrenderas till HTML på servern. Den svaga punkten är data: allt du hämtar i useEffect, eller bara laddar efter ett klick, saknas i den första HTML:en. Hämta innehåll i Server Components, och behåll klientkomponenter för interaktivitet.

SSG, SSR, ISR eller CSR: vilket renderingsläge ska du välja?

Next.js låter dig blanda lägen rutt för rutt. Valet påverkar färskhet, hastighet och vad sökrobotar får.

Dokumentationen för Next.js ISR listar fördelarna: att uppdatera statiskt innehåll ”utan att bygga om hela webbplatsen” och att hantera stora mängder sidor utan långa byggtider. En rutt med export const revalidate = 3600 regenereras högst en gång i timmen; för exakt kontroll anropar du revalidatePath eller revalidateTag när innehållet ändras. Observera att ISR inte fungerar med en statisk export (output: 'export'). För appar som måste förbli klientrenderade täcker vår guide till SEO för single page applications lösningarna.

Hur sätter du titlar, beskrivningar och canonicals med Metadata API?

Metadata API ersätter next/head i App Router. Enligt Next.js-dokumentationen för metadata exporterar du ett statiskt metadataobjekt från en layout eller sida, eller en funktion generateMetadata när värdena beror på data, och Next.js genererar head-taggarna. Båda stöds endast 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 förhindrar de flesta problemen:

• Ange metadataBase i root-layouten (din produktionsdomän), så att relativa canonicals och Open Graph-URL:er blir absoluta.
• Använd en titelmall i root-layouten, till exempel '%s | Brand', så att varje sida får en unik titel med varumärket en gång.
• Ge varje indexerbar sida en självrefererande canonical via alternates.canonical; det skyddar mot dubbletter som skapas av frågeparametrar och avslutande snedstreck. Vårt ordboksavsnitt om canonical-taggen går igenom reglerna.
• Skriv en beskrivning per sida, genererad från innehållet i generateMetadata, aldrig en standard för hela webbplatsen.
• Lägg till Open Graph-bilder med en opengraph-image-fil i rutt-mappen, och kontrollera resultatet med ett verktyg för förhandsvisning av Open Graph.

På dynamiska sidor strömmar Next.js metadata efter de första byten för att snabba upp renderingen. Dokumentationen säger att strömningen stängs av för robotar som förväntar sig metadata i head, identifierade via user agent (Bingbot, Twitterbot och Slackbot är några exempel), och att alternativet htmlLimitedBots anpassar listan. Om du bryr dig om en robot som inte omfattas, lägg till den. I Pages Router är motsvarigheten komponenten Head från next/head, med ett key-attribut för att undvika dubbletter av taggar.

Hur genererar du sitemap.xml och robots.txt i Next.js?

Båda är specialfiler i app-mappen. En fil sitemap.ts som exporterar en funktion som returnerar URL:er blir /sitemap.xml; en fil robots.ts blir /robots.txt. Referensen för sitemap noterar att filen cachas som standard och att Googles gräns är 50,000 URL:er per sitemap; över den gränsen delar generateSitemaps upp den i flera 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 med endast kanoniska, indexerbara URL:er som returnerar 200, och använd det verkliga uppdateringsdatumet i lastModified. Sitemapen accepterar också alternates.languages för flerspråkiga webbplatser. I robots.ts pekar du på sitemapen och bestämmer vilka AI-robotar som får genomsöka webbplatsen; vår artikel om robots.txt för AI-sökrobotar listar dem. Mer om formatet finns i vårt ordboksavsnitt om XML-webbplatskartan.

Vilka tekniska detaljer bryter Next.js SEO oftast?

Dessa problem minskar alla genomsökbarheten: en robot måste kunna hitta varje URL via länkar och få en ren statuskod.

Hur lägger du till strukturerad data i Next.js?

Next.js-dokumentationen rekommenderar att JSON-LD renderas som en script-tagg av typen application/ld+json direkt i sid- eller layoutkomponenten, byggd från samma data som sidan, och att tecknet < escapas i den serialiserade JSON:en för att förhindra injicering. Eftersom den renderas på servern ser både Google och AI-robotar den i den råa HTML:en. Använd Article (eller BlogPosting) för inlägg, Organization i root-layouten, BreadcrumbList för djupa sidor och Product för e-handel. En schemagenerator ger dig ett giltigt startblock, och validera sedan sidan med Googles Rich Results Test.

Hur gör du en Next.js-webbplats tillräckligt snabb för Core Web Vitals?

Next.js levererar komponenter som hanterar de vanliga orsakerna till dåliga Core Web Vitals:

• next/image: ändrar storlek på bilder, serverar moderna format, laddar lazy som standard och kräver dimensioner, vilket förhindrar layoutförskjutningar. Markera huvudbilden ovanför vikningen som prioriterad så att den inte laddas lazy (den är oftast elementet för Largest Contentful Paint).
• next/font: självhostar typsnitt och undviker förskjutningen som orsakas av sena byten av typsnitt.
• next/script: laddar tredjepartsskript med en strategi (afterInteractive, lazyOnload) i stället för att blockera sidan.
• Mindre JavaScript i klienten: varje 'use client'-gräns lägger till kod att ladda ner och hydrera, vilket tynger Interaction to Next Paint i mobilen.

Mät fältdata, inte bara ett labbresultat: vår guide till PageSpeed Insights visar hur du läser båda.

Hur kör du en blogg i Next.js som rankas?

En Next.js-blogg brukar ha en av tre former: MDX- eller Markdown-filer i repositoryt (enkelt, men varje inlägg kräver en commit och en driftsättning), ett headless CMS (Sanity, Contentful, Strapi, Payload) som hämtas i Server Components, eller en publiceringswebhook som tar emot artiklar från ett externt verktyg. I alla tre fallen är SEO-mönstret detsamma: en dynamisk rutt app/blog/[slug] med generateStaticParams, generateMetadata och ISR, sitemapen matad från samma källa, och en indexsida som länkar till varje inlägg.

Webhook-mönstret håller publiceringen utanför din driftsättningscykel. En Route Handler tar emot artikeln, sparar den och uppdaterar sedan de berörda sidorna:

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

Hur hjälper Next.js SEO dig att bli citerad av AI-assistenter?

Rendering på servern är det första villkoret för GEO (generative engine optimization). Vercels analys från december 2024, The rise of the AI crawler, fann att ”ingen av de stora AI-robotarna för närvarande renderar JavaScript”. Den nämner GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot och PerplexityBot, och räknade 569 miljoner GPTBot-hämtningar och 370 miljoner Claude-hämtningar i sitt nätverk under en månad. En Next.js-sida som förrenderar sin text, rubriker och JSON-LD kan läsas av alla dem; en klientrenderad sida kan inte det.

Det andra villkoret är innehåll värt att citera: artiklar som besvarar en fråga per avsnitt, med källor, siffror och tydliga definitioner, publicerade regelbundet. Det är den del som Sorank, vår produkt, automatiserar. Sorank är en programvara för SEO och GEO på autopilot: den hittar dina sökord, och dess generator för bloggartiklar skriver 20, 60 eller 120 artiklar per månad med källor, interna länkar och bilder. På en Next.js-webbplats kopplar den in via den anpassade webhooken som beskrivs på installationssidan: din Route Handler tar emot varje artikel, sparar den och uppdaterar bloggen. Spårning av AI-omnämnanden kontrollerar sedan varje månad om ChatGPT, Claude och Gemini citerar ditt varumärke.

Kort version: förrendera varje sida du vill ska hittas, ange metadata på servern och mata sitemapen från samma källa som innehållet. Next.js ger dig verktygen; rankningar och AI-citeringar kommer från det du publicerar med dem. För att hålla en Next.js-blogg försedd med artiklar, se Sorank:s abonnemang, från $49 per månad med 3 dagars gratis provperiod.