App Router-ல் SEO குறிச்சொற்களுக்கான (<title>, <meta>, Open Graph, முதலியவை) கட்டமைக்கப்பட்ட Metadata API உள்ளது — நீங்கள் 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> இல் எவ்வித கைமுறை திருத்தமும் இல்லை.
பக்கத் தலைப்பு பெறப்பட்ட உள்ளடக்கத்தைப் பொறுத்திருக்கும் பக்கங்களுக்கு (ஒரு வலைப்பதிவு பதிவு, ஒரு பொருள்), ஒரு 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] },
};
}
இது சேவையகத்தில் இயக்கப்படுகிறது மற்றும் ஒவ்வொரு இயக்க பக்கமும் துல்லியமான, உள்ளடக்கம் குறிப்பிட்ட மெட்டாடேட்டாவைக் கொண்டிருக்க அனுமதிக்கிறது — 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"
};
லேআউட்டில் வரையறுக்கப்பட்ட மெட்டாடேட்டா குழந்தை பக்கங்களுடன் இணைக்கப்படுகிறது (மற்றும் அவற்றால் மீறப்படலாம்) — எனவே நீங்கள் தளம்-தொடர்பான இயல்புநிலை மதிப்புகளை ஒரு முறை அமைத்து, தேவையான இடங்களில் பக்க-நிலை மதிப்புகளை அமைப்பீர்கள். template தானாக தள பெயரைச் சேர்க்கிறது.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
ச் சிறப்பு கோப்புகள் தொடர்புடைய மெட்டாடேட்டா/பாதைகளை தானாக உருவாக்குகின்றன.
நல்ல மெட்டாடேட்டா SEO மற்றும் சமाजिक-பகிர்வு முன்னோட்டங்களை இயக்குகிறது.
Metadata API இதை வினியோக மாடை மற்றும் வகை-பாதுகாப்பாக செய்கிறது — நிலையான metadata நிலையான பக்கங்களுக்கு, async generateMetadata தரவு-இயக்கப்பட்ட பக்கங்களுக்கு, மற்றும் முன்னுருவங்கள் கொண்ட லேआউட் நிலை இயல்புநிலைகள் — <head> கைமுறை நிர்வாகத்தை சுத்தமான, சேவையகம்-வழங்கப்பட்ட அமைப்பு மூலம் மாற்றுகிறது.