`, `<meta>`, Open Graph, n.k.) — unaosanikisha metadata kutoka `layout.tsx` au `page.tsx` na Next.js inaonyesha etiketaji `<head>` sahihi. ## Metadata tuli ```tsx // 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. ## Metadata ya nguvu (inategemea data) Kwa kurasa ambazo kichwa chake kinategemea mwandiko uliochukuliwa (chachu ya blog, bidhaa), sanikisha kazi ya async `generateMetadata`: ```tsx // 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. ## Metadata huungana chini ya mti ```tsx // 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. ## Metadata inayotegemea faili ```text app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts ``` Mafaili mahususi hutengeneza metadata/njia sambamba kiotomatiki. ## Kwa nini ni muhimu 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.</article></body></html>

App Router ina **Metadata API** iliyojengwa kwa ajili ya etiketaji SEO (``, `<meta>`, Open Graph, n.k.) — unaosanikisha metadata kutoka `layout.tsx` au `page.tsx` na Next.js inaonyesha etiketaji `<head>` sahihi. ## Metadata tuli ```tsx // 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. ## Metadata ya nguvu (inategemea data) Kwa kurasa ambazo kichwa chake kinategemea mwandiko uliochukuliwa (chachu ya blog, bidhaa), sanikisha kazi ya async `generateMetadata`: ```tsx // 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. ## Metadata huungana chini ya mti ```tsx // 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. ## Metadata inayotegemea faili ```text app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts ``` Mafaili mahususi hutengeneza metadata/njia sambamba kiotomatiki. ## Kwa nini ni muhimu 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.</article></body></html>

Next.js maswali