App Router ka një Metadata API të integruar për etiketat SEO (<title>, <meta>, Open Graph, etj.) — ju eksportoni metadhënat nga një layout.tsx ose page.tsx dhe Next.js e paraqit kodin <head> të saktë.
App Router ka një Metadata API të integruar për etiketat SEO (<title>, <meta>, Open Graph, etj.) — ju eksportoni metadhënat nga një layout.tsx ose page.tsx dhe Next.js e paraqit kodin <head> të saktë.
// 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 lexon objektin e eksportuar metadata dhe gjeneron <title>, <meta name="description">, etiketa OG, etj. — pa asnjë redaktim manual të <head>.
Për faqet, titullin e të cilave varet nga përmbajtja e marrë (një postim bllogu, një produkt), eksportoni një funksion async 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] },
};
}
Kjo ekzekutohet në server dhe lejon çdo faqe dinamike të ketë metadhëna të sakta, specifike të përmbajtjes — thelbësore për SEO dhe ndarje shoqërore të përmbajtjes dinamike.
// 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"
};
Metadhënat e përcaktuara në një plan pasurojnë (dhe mund të braktisin nga) faqet fëmijë — kështu që ju vendosni vlerat parazgjedhje në të gjithë sajonet një herë dhe vlerat në nivelin e faqes ku është e nevojshme. template automatikisht përfshin emrin e faqes.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Skedarët e veçantë gjenerojnë metadhënat/rrugët përkatëse automatikisht.
Metadhënat e mira drivon SEO dhe përshkrime ndarje shoqërore.
Metadata API e bën këtë deklarative dhe të sigurte të tipit — metadata statike për faqet fikse, async generateMetadata për faqet e drivuara nga të dhënat, dhe vlera parazgjedhje në nivelin e planit me shabllone — zëvendësim i menaxhimit manual të <head> me një sistem të pastër të renderuar nga serveri.