App Router ina Metadata API iliyojengwa kwa ajili ya etiketaji SEO (<title>, <meta>, Open Graph, n.k.) — unaosanikisha metadata kutoka layout.tsx au page.tsx na Next.js inaonyesha etiketaji <head> sahihi.
App Router ina Metadata API iliyojengwa kwa ajili ya etiketaji SEO (<title>, <meta>, Open Graph, n.k.) — unaosanikisha metadata kutoka layout.tsx au page.tsx na Next.js inaonyesha etiketaji <head> sahihi.
// 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 inasoma kitu kinachosakishwa metadata na kutengeneza <title>, <meta name="description">, etiketaji OG, n.k. — hakuna hariri ya <head> kwa mkono.
Kwa kurasa ambazo kichwa chake kinategemea mwandiko uliochukuliwa (chachu ya blog, bidhaa), sanikisha kazi ya 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] },
};
}
Hii inafanya kazi kwenye seva na huruhusu kila ukurasa wenye nguvu kuwa na metadata sahihi, mahususi ya mwandiko — muhimu kwa SEO na mgawanyiko wa kijamii wa mwandiko wenye nguvu.
// 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"
};
Metadata iliyofafanuliwa katika muundo inaungana na (na inaweza kuweza kuozwa na) kurasa za watoto — kwa hivyo unaweka thamani za kawaida za tovuti mara moja na thamani kwa kila ukurasa ambapo inahitajika. template inajumlisha kiotomatiki jina la tovuti.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Mafaili mahususi hutengeneza metadata/njia sambamba kiotomatiki.
Metadata nzuri husukuma SEO na onyesho la mgawanyiko wa kijamii.
Metadata API inafanya hii kuwa tanzi na salama ya aina — metadata tuli kwa kurasa tuli, async generateMetadata kwa kurasa inayosukumwa na data, na thamani za kawaida katika kiwango cha muundo na kiolezo — inabadilisha usimamizi wa <head> wa mkono na mfumo safi, unaofanywa na seva.