App Router sisältää sisäänrakennetun Metadata API -rajapinnan SEO-tunnisteille (<title>, <meta>, Open Graph jne.) — viet metatiedot layout.tsx- tai page.tsx-tiedostosta ja Next.js muodostaa oikeat <head>-tunnisteet.
App Router sisältää sisäänrakennetun Metadata API -rajapinnan SEO-tunnisteille (<title>, <meta>, Open Graph jne.) — viet metatiedot layout.tsx- tai page.tsx-tiedostosta ja Next.js muodostaa oikeat <head>-tunnisteet.
// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About Us",
description: "Learn about our company and team.",
openGraph: {
title: "About Us",
images: ["/og-about.png"],
},
};
export default function About() { return <h1>About</h1>; }
Next.js lukee viedyn metadata-objektin ja muodostaa <title>-, <meta name="description"> ja OG-tunnisteet jne. — ei manuaalista <head>-muokkausta.
Sivuille, joiden otsikko riippuu haetusta sisällöstä (blogikirjoitus, tuote), vie asynkroninen generateMetadata-funktio:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug); // fetch the post
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}
Tämä suoritetaan palvelimella ja antaa kullekin dynaamiselle sivulle tarkkoja, sisällöstä riippuvia metatietoja — välttämätöntä SEO:lle ja dynaamisen sisällön sosiaaliselle jakamiselle.
// app/layout.tsx — defaults + a title template
export const metadata: Metadata = {
title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site"
};
Asettelussa määritetyt metatiedot sulautuvat (ja lapsissivut voivat ohittaa) alaksi sivuiksi — joten asetat sivuston laajuiset oletusarvot kerran ja sivukohtaiset arvot tarvittaessa. template lisää automaattisesti sivuston nimen.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Erityiset tiedostot muodostavat vastaavat metatiedot/reitit automaattisesti.
Hyvät metatiedot ohjaavat SEO:ta ja sosiaalisen jakamisen esikatselu.
Metadata API tekee siitä deklaratiivisen ja tyyppiturvalliset — staattiset metadata kiinteille sivuille, asynkroninen generateMetadata tietoihin pohjautuvilla sivuille ja asettelutason oletusarvot mallinteiden kanssa — korvaa manuaalisen <head>-hallinnan puhtaalla, palvelimella renderöidyllä järjestelmällä.