Metadata, SEO og dokumenthodet
Konfigurer sidetitler, beskrivelser, Open Graph-tagger og favikoner ved hjelp av Next.js 15 Metadata API for god SEO og deling i sosiale medier.
Metadata, SEO og dokumenthodet er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.
Hvorfor metadata er viktig
Søkemotorer og sosiale plattformer leser metadataene Deres for å bygge resultater og forhåndsvisninger av lenker – derfor påvirker titler og beskrivelser både klikk og rangering.
Metadata-API-et
Next.js 15 erstatter manuelle endringer i <head> med et deklarativt Metadata-API: eksporter et metadata-objekt eller generateMetadata, så gjengis taggene automatisk.
Statisk metadataeksport
For metadata som aldri endres, eksporter et typet metadata-objekt – Next.js slår det automatisk sammen med dokumenthodet.
export const metadata = {
title: 'My Dashboard',
description: 'Manage your account and settings',
};
export default function Page() {
return <h1>Dashboard</h1>;
}Tittelmaler
Angi en tittelmal i et layout, slik at undersider får samme suffiks. Plassholderen %s erstattes med sidens egen tittel.
export const metadata = {
title: {
template: '%s | Acme',
default: 'Acme',
},
};Dynamiske metadata
Når tittelen avhenger av data, eksporter en asynkron generateMetadata-funksjon – den får ruteparametrene og kan hente data før gjengivelsen.
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return { title: post.title, description: post.excerpt };
}Open Graph-tagger
Open Graph-metadata styrer hvordan en lenke ser ut når den deles. Legg til et openGraph-felt med tittel, beskrivelse og bilde.
export const metadata = {
openGraph: {
title: 'Acme Launch',
description: 'The new way to build apps',
images: ['/og-launch.png'],
},
};Twitter-kort
Twitter/X bruker egne metadata for kort. Angi feltet twitter for å styre forhåndsvisningen som vises når lenken Deres publiseres.
export const metadata = {
twitter: {
card: 'summary_large_image',
title: 'Acme Launch',
images: ['/og-launch.png'],
},
};Favikoner og ikoner
Legg spesialfiler i app/, så kobler Next.js dem til automatisk: favicon.ico for fanen, icon.png for appen og apple-icon.png for iOS.
Dynamiske OG-bilder
Next.js kan generere bilder for sosiale medier under kjøring: en opengraph-image.tsx som bruker ImageResponse, gjengir JSX til en PNG-fil for hver side.
import { ImageResponse } from 'next/og';
export default function Image() {
return new ImageResponse(<div style={{ fontSize: 64 }}>Acme</div>);
}Robots og sitemaps
Styr crawlere med en robots.ts-fil, og publiser en sitemap.ts slik at søkemotorer finner alle ruter – begge eksporterer enkle serialiserbare data.
export default function robots() {
return { rules: { userAgent: '*', allow: '/' }, sitemap: 'https://acme.com/sitemap.xml' };
}Beste praksis
For god SEO: bruk unik tittel og beskrivelse for hver side, hold titler under omtrent 60 tegn, bruk alltid et Open Graph-bilde, og bruk generateMetadata for dynamiske ruter.
Rask kontroll
Test kunnskapene Deres om metadata.
Oppsummering
De har lært Metadata-API-et: statisk metadata kontra generateMetadata, tittelmaler, openGraph/twitter-forhåndsvisninger og de spesielle ikon- og SEO-filene.
Lær deg TypeScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Metadata, SEO og dokumenthodet» gratis?
Ja – hele teksten i «Metadata, SEO og dokumenthodet» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Next.js 15 for fullstack-webapper-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.
Hva lærer jeg i «Metadata, SEO og dokumenthodet»?
Konfigurer sidetitler, beskrivelser, Open Graph-tagger og favikoner ved hjelp av Next.js 15 Metadata API for god SEO og deling i sosiale medier. Du øver på Next.js 15 for fullstack-webapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Next.js 15 for fullstack-webapper?
Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Metadata, SEO og dokumenthodet»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Next.js 15 for fullstack-webapper-leksjonen?
Ja. Alle Next.js 15 for fullstack-webapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Introduksjon til Next.js 15
- Prosjektoppsett og konfigurasjon
- Grunnleggende om sider, oppsett og ruting
- Metadata, SEO og dokumenthodet