Metadata, SEO och dokumenthuvudet
Konfigurera sidtitlar, beskrivningar, Open Graph-taggar och favicons med Next.js 15 Metadata API för stark SEO och effektiv delning i sociala medier.
Metadata, SEO och dokumenthuvudet är en gratis lektion i Next.js 15: fullstack-webbappar på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Next.js 15: fullstack-webbappar, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.
Varför metadata är viktigt
Sökmotorer och sociala plattformar läser din metadata för att skapa sökresultat och länkförhandsvisningar — därför påverkar titlar och beskrivningar både klick och rankning.
Metadata API
Next.js 15 ersätter manuella ändringar av <head> med ett deklarativt Metadata API: exportera ett metadata-objekt eller generateMetadata, så genererar det taggarna.
Exportera statisk metadata
För metadata som aldrig ändras exporterar du ett typat metadata-objekt — Next.js sammanfogar det automatiskt med dokumentets head.
export const metadata = {
title: 'My Dashboard',
description: 'Manage your account and settings',
};
export default function Page() {
return <h1>Dashboard</h1>;
}Titelmallar
I en layout kan du ange en titelmall så att undersidor delar ett suffix. Platshållaren %s ersätts med varje sidas egen titel.
export const metadata = {
title: {
template: '%s | Acme',
default: 'Acme',
},
};Dynamisk metadata
När titeln beror på data exporterar du en asynkron funktion generateMetadata — den får routens parametrar och kan hämta data före renderingen.
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return { title: post.title, description: post.excerpt };
}Open Graph-taggar
Open Graph-metadata styr hur en länk ser ut när den delas. Lägg till ett openGraph-fält med titel, beskrivning och bild.
export const metadata = {
openGraph: {
title: 'Acme Launch',
description: 'The new way to build apps',
images: ['/og-launch.png'],
},
};Twitter Cards
Twitter/X använder sin egen metadata för kort. Ange fältet twitter för att styra förhandsvisningen som visas när din länk publiceras.
export const metadata = {
twitter: {
card: 'summary_large_image',
title: 'Acme Launch',
images: ['/og-launch.png'],
},
};Favicons och ikoner
Lägg särskilda filer i app/, så kopplar Next.js in dem: favicon.ico för fliken, icon.png för appen och apple-icon.png för iOS.
Dynamiska OG-bilder
Next.js kan generera bilder för sociala medier direkt: en opengraph-image.tsx som använder ImageResponse renderar JSX till en PNG per sida.
import { ImageResponse } from 'next/og';
export default function Image() {
return new ImageResponse(<div style={{ fontSize: 64 }}>Acme</div>);
}Robots och webbplatskartor
Styr sökrobotar med en robots.ts-fil och publicera en sitemap.ts så att sökmotorer hittar alla routes — båda exporterar vanliga serialiserbara data.
export default function robots() {
return { rules: { userAgent: '*', allow: '/' }, sitemap: 'https://acme.com/sitemap.xml' };
}Bästa praxis
För stark SEO: unik titel och beskrivning för varje sida, titlar på under cirka 60 tecken, alltid en Open Graph-bild och generateMetadata för dynamiska routes.
Snabbtest
Testa dina kunskaper om metadata.
Sammanfattning
Du har lärt dig Metadata API: statisk metadata jämfört med generateMetadata, titelmallar, förhandsvisningar med openGraph/twitter samt de särskilda ikon- och SEO-filerna.
Lär dig TypeScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 12
- Lektioner
- 48
Vanliga frågor
Är lektionen ”Metadata, SEO och dokumenthuvudet” gratis?
Ja – hela texten till ”Metadata, SEO och dokumenthuvudet” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Next.js 15: fullstack-webbappar, kan Ni uppgradera till CoddyKit PRO. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.
Vad lär jag mig i ”Metadata, SEO och dokumenthuvudet”?
Konfigurera sidtitlar, beskrivningar, Open Graph-taggar och favicons med Next.js 15 Metadata API för stark SEO och effektiv delning i sociala medier. Ni övar på Next.js 15: fullstack-webbappar med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Next.js 15: fullstack-webbappar?
Du behöver inga förkunskaper. Utbildningen i Next.js 15: fullstack-webbappar på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Metadata, SEO och dokumenthuvudet”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Next.js 15: fullstack-webbappar-lektionen?
Ja. Varje Next.js 15: fullstack-webbappar-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Introduktion till Next.js 15
- Projektkonfiguration och inställningar
- Grunderna i sidor, layouter och routing
- Metadata, SEO och dokumenthuvudet