App Router ਕੋਲ SEO ਟੈਗਸ ਲਈ ਇੱਕ ਬਿਲਤ-ਇਨ Metadata API ਹੈ (<title>, <meta>, Open Graph, ਆਦਿ) — ਤੁਸੀਂ layout.tsx ਜਾਂ page.tsx ਤੋਂ metadata ਦਾ ਐਕਸਪੋਰਟ ਕਰਦੇ ਹੋ ਅਤੇ Next.js ਸਹੀ <head> ਟੈਗਸ ਨੂੰ ਰੈਂਡਰ ਕਰਦਾ ਹੈ।
App Router ਕੋਲ SEO ਟੈਗਸ ਲਈ ਇੱਕ ਬਿਲਤ-ਇਨ Metadata API ਹੈ (<title>, <meta>, Open Graph, ਆਦਿ) — ਤੁਸੀਂ layout.tsx ਜਾਂ page.tsx ਤੋਂ metadata ਦਾ ਐਕਸਪੋਰਟ ਕਰਦੇ ਹੋ ਅਤੇ 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> ਸੰਪਾਦਨ ਦੀ ਲੋੜ ਨਹੀਂ।
ਅਜਿਹੇ ਸਫ਼ਿਆਂ ਲਈ ਜਿਨ੍ਹਾਂ ਦਾ ਸਿਰਲੇਖ ਲਿਆਂਦੇ ਹੋਏ ਸਮਗਰੀ (ਬਲਾਗ ਪੋਸਟ, ਉਤਪਾਦ) ਉੱਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ, ਇੱਕ 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] },
};
}
ਇਹ ਸਰਵਰ ਉੱਤੇ ਚਲਦਾ ਹੈ ਅਤੇ ਹਰੇਕ ਡਾਇਨਾਮਿਕ ਸਫ਼ੇ ਨੂੰ ਸਟੀਕ, ਸਮਗਰੀ-ਵਿਸ਼ੇਸ਼ metadata ਰੱਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ — 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 ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ Metadata ਚਿੱਲਦਰਨ ਸਫ਼ਿਆਂ ਨਾਲ ਮਿਲ ਜਾਂਦਾ ਹੈ (ਅਤੇ ਓਵਰਰਾਈਡ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ) — ਤਾਂ ਕਿ ਤੁਸੀਂ ਸਾਈਟ-ਵਿਆਪੀ ਡਿਫੌਲਟ ਇੱਕ ਵਾਰ ਸੈਟ ਕਰੋ ਅਤੇ ਜਿੱਥੇ ਲੋੜ ਹੋਵੇ ਪ੍ਰਤੀ-ਸਫ਼ੇ ਮੁੱਲ। template ਖੁਦ-ਮੁਖਤਾਰ ਸਾਈਟ ਦਾ ਨਾਮ ਜੋੜਦਾ ਹੈ।
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
ਵਿਸ਼ੇਸ਼ ਫਾਈਲਾਂ ਸੰਬੰਧਿਤ metadata/ਰੂਟ ਆਪਣੇ-ਆਪ ਬਣਾਉਂਦੀਆਂ ਹਨ।
ਚੰਗਾ metadata SEO ਅਤੇ ਸਾਮਾਜਿਕ-ਸ਼ੇਅਰ ਪੂਰਵਦਰਸ਼ਨ ਨੂੰ ਚਲਿਤ ਕਰਦਾ ਹੈ।
Metadata API ਇਸ ਨੂੰ declarative ਅਤੇ type-safe ਬਣਾਉਂਦਾ ਹੈ — ਸਥਿਰ ਸਫ਼ਿਆਂ ਲਈ ਸਟੈਟਿਕ metadata, ਡਾਟਾ-ਚਲਤ ਸਫ਼ਿਆਂ ਲਈ async generateMetadata, ਅਤੇ ਨਮੂਨਿਆਂ ਦੇ ਨਾਲ ਲੇਆਉਟ-ਪੱਧਰ ਡਿਫੌਲਟ — ਮੈਨੁਅਲ <head> ਪ্রबंਧਨ ਨੂੰ ਸਾਫ, ਸਰਵਰ-ਰੈਂਡਰ ਸਿਸਟਮ ਨਾਲ ਬਦਲਦਾ ਹੈ।