Το App Router διαθέτει ένα ενσωματωμένο Metadata API για tags SEO (<title>, <meta>, Open Graph, κ.λπ.) — εξάγετε metadata από ένα layout.tsx ή page.tsx και το Next.js αποδίδει τις σωστές ετικέτες <head>.
Το App Router διαθέτει ένα ενσωματωμένο Metadata API για tags SEO (<title>, <meta>, Open Graph, κ.λπ.) — εξάγετε metadata από ένα layout.tsx ή page.tsx και το Next.js αποδίδει τις σωστές ετικέτες <head>.
// 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 διαβάζει το εξαγόμενο αντικείμενο metadata και δημιουργεί <title>, <meta name="description">, OG tags, κ.λπ. — χωρίς χειροκίνητη επεξεργασία <head>.
Για σελίδες των οποίων ο τίτλος εξαρτάται από ληφθέν περιεχόμενο (ένα άρθρο ιστολογίου, ένα προϊόν), εξάγετε μια ασύγχρονη συνάρτηση generateMetadata:
// 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] },
};
}
Αυτή εκτελείται στο διακομιστή και επιτρέπει σε κάθε δυναμική σελίδα να έχει ακριβή, μεταδεδομένα ειδικά για το περιεχόμενο — απαραίτητα για SEO και κοινοποίηση σε κοινωνικά δίκτυα δυναμικού περιεχομένου.
// 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"
};
Τα μεταδεδομένα που ορίζονται σε ένα layout συγχωνεύονται με (και μπορεί να παρακαμφθούν από) σελίδες παιδιών — οπότε ορίζετε προεπιλογές σε ολόκληρη την τοποθεσία μια φορά και τιμές ανά σελίδα όπου χρειάζεται. Το template προσθέτει αυτόματα το όνομα της τοποθεσίας.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Τα ειδικά αρχεία δημιουργούν αυτόματα τα αντίστοιχα μεταδεδομένα/δρομολόγια.
Τα καλά μεταδεδομένα προωθούν το SEO και τις προεπισκοπήσεις κοινοποίησης στα κοινωνικά δίκτυα.
Το Metadata API το καθιστά δηλωτικό και type-safe — στατικό metadata για σταθερές σελίδες, ασύγχρονο generateMetadata για σελίδες που καθοδηγούνται από δεδομένα, και προεπιλογές επιπέδου layout με templates — αντικαθιστώντας τη χειροκίνητη διαχείριση <head> με ένα καθαρό, σύστημα που αποδίδεται στο διακομιστή.