App Router აქვს ჩაშენებული მეტაბმულების API SEO ტეგებისთვის (<title>, <meta>, Open Graph და ა.შ.) — თქვენ ატეხით მეტაბმულებებს layout.tsx ან page.tsx-დან და Next.js აწვდის სწორ <head> ტეგებს.
App Router აქვს ჩაშენებული მეტაბმულების API SEO ტეგებისთვის (<title>, <meta>, Open Graph და ა.შ.) — თქვენ ატეხით მეტაბმულებებს 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 ტეგებს და ა.შ. — <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-სა და სოციალური გაზიარების მინიატურებს.
მეტაბმულების API აკეთებს მას დეკლარაციული და ტიპის უსაფრთხო — სტატიური metadata ფიქსირებული გვერდებისთვის, ასინქრონული generateMetadata მონაცემებით ნაკარნახი გვერდებისთვის და layout-დან დაკაბელებული სტანდარტი შაბლონებთან — ჩანაცვლებს ხელით <head> მართვას სუფთა, სერვერზე რენდერირებული სისტემით.