Metadati, SEO e head del documento
Configuri titoli e descrizioni delle pagine, tag Open Graph e favicon usando la Metadata API di Next.js 15 per migliorare SEO e condivisione sui social.
Metadati, SEO e head del documento è una lezione Next.js 15 Fullstack Web Apps gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Next.js 15 Fullstack Web Apps, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Next.js 15 Fullstack Web Apps include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Why Metadata Matters
Search engines and social platforms read your metadata to build results and link previews — so titles and descriptions drive clicks and ranking.
The Metadata API
Next.js 15 replaces manual <head> edits with a declarative Metadata API: export a metadata object or generateMetadata and it renders the tags.
Static Metadata Export
For metadata that never changes, export a typed metadata object — Next.js merges it into the document head automatically.
export const metadata = {
title: 'My Dashboard',
description: 'Manage your account and settings',
};
export default function Page() {
return <h1>Dashboard</h1>;
}Title Templates
In a layout, set a title template so child pages share a suffix. The %s placeholder is swapped for each page's own title.
export const metadata = {
title: {
template: '%s | Acme',
default: 'Acme',
},
};Dynamic Metadata
When the title depends on data, export an async generateMetadata function — it gets the route params and can fetch before rendering.
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return { title: post.title, description: post.excerpt };
}Open Graph Tags
Open Graph metadata controls how a link looks when shared. Add an openGraph field with a title, description, and image.
export const metadata = {
openGraph: {
title: 'Acme Launch',
description: 'The new way to build apps',
images: ['/og-launch.png'],
},
};Twitter Cards
Twitter/X uses its own card metadata. Set the twitter field to control the preview shown when your link gets posted.
export const metadata = {
twitter: {
card: 'summary_large_image',
title: 'Acme Launch',
images: ['/og-launch.png'],
},
};Favicons and Icons
Drop special files in app/ and Next.js wires them up: favicon.ico for the tab, icon.png for the app, apple-icon.png for iOS.
Dynamic OG Images
Next.js can generate social images on the fly: an opengraph-image.tsx using ImageResponse renders JSX to a PNG per page.
import { ImageResponse } from 'next/og';
export default function Image() {
return new ImageResponse(<div style={{ fontSize: 64 }}>Acme</div>);
}Robots and Sitemaps
Steer crawlers with a robots.ts file and publish a sitemap.ts so search engines find every route — both export plain serializable data.
export default function robots() {
return { rules: { userAgent: '*', allow: '/' }, sitemap: 'https://acme.com/sitemap.xml' };
}Best Practices
For strong SEO: unique title and description per page, titles under ~60 chars, always an Open Graph image, and generateMetadata for dynamic routes.
Quick Check
Test your metadata knowledge.
Recap
You learned the Metadata API: static metadata vs generateMetadata, title templates, openGraph/twitter previews, and the special icon/SEO files.
Domande Frequenti
La lezione «Metadati, SEO e head del documento» è gratuita?
Sì — il testo completo di «Metadati, SEO e head del documento» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Next.js 15 Fullstack Web Apps, passa a CoddyKit PRO. Il corso Next.js 15 Fullstack Web Apps include 4 lezioni in totale.
Cosa imparerò in «Metadati, SEO e head del documento»?
Configuri titoli e descrizioni delle pagine, tag Open Graph e favicon usando la Metadata API di Next.js 15 per migliorare SEO e condivisione sui social. Eserciti Next.js 15 Fullstack Web Apps con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Next.js 15 Fullstack Web Apps?
Non è richiesta alcuna esperienza precedente. Next.js 15 Fullstack Web Apps su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Metadati, SEO e head del documento»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Next.js 15 Fullstack Web Apps?
Sì. Ogni lezione Next.js 15 Fullstack Web Apps include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Introduzione a Next.js 15
- Configurazione e impostazione del progetto
- Nozioni di base su pagine, layout e routing
- Metadati, SEO e head del documento