۱. تعریف metadata ثابت با آبجکت metadata
اگر metadata صفحه شما وابسته به دادههای زمان اجرا نیست، میتوانید آن را بهصورت مستقیم در فایل layout.tsx یا page.tsx تعریف کنید:
export const metadata: Metadata = {
title: 'Home Page',
description: 'A brief description of this page',
}Next.js بهصورت خودکار این اطلاعات را در تگ <head> صفحه قرار میدهد.
۲. تعریف metadata داینامیک با generateMetadata
اگر metadata شما وابسته به پارامترهای مسیر، APIهای خارجی یا metadata والد باشد، از تابع generateMetadata استفاده کنید:
export async function generateMetadata({ params }, parent) {
const product = await fetch(`https://example.com/api/products/${params.id}`).then(res => res.json())
const previousImages = (await parent).openGraph?.images || []
return {
title: product.title,
openGraph: {
images: ['/product-image.jpg', ...previousImages],
},
}
}۳. نکات مهم
- در هر segment فقط یکی از
metadataیاgenerateMetadataقابل export است generateMetadataفقط در Server Components پشتیبانی میشود- فراخوانیهای fetch درون generateMetadata بهصورت memoized انجام میشوند
- اگر metadata شما داینامیک نیست، استفاده از آبجکت ثابت توصیه میشود
۴. فیلدهای پشتیبانیشده در metadata
- title: عنوان صفحه
- description: توضیحات متا برای موتورهای جستجو
- openGraph: اطلاعات اشتراکگذاری اجتماعی
- twitter: تنظیمات کارت توییتر
- robots: قوانین ایندکس شدن
- icons: آیکونها و favicon
- manifest: مسیر فایل manifest.json
- verification: تأیید سایت برای گوگل، یاهو، یاندکس
- appLinks: لینکهای عمیق برای اپلیکیشنها
- alternates: لینکهای canonical، نسخههای زبانی، RSS
۵. استفاده از metadataBase
برای تبدیل مسیرهای نسبی به URLهای کامل، از metadataBase استفاده کنید:
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'),
openGraph: {
images: '/og-image.png', // تبدیل به https://example.com/og-image.png
},
}۶. مثال ترکیبی کامل
export const metadata: Metadata = {
title: {
default: 'My Shop',
template: '%s | My Shop',
},
description: 'Best products at the best prices',
openGraph: {
title: 'My Shop',
description: 'Shop online with high quality',
url: 'https://example.com',
siteName: 'My Shop',
images: [
{
url: 'https://example.com/og.png',
width: 1200,
height: 630,
},
],
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: 'My Shop',
description: 'Shop online with high quality',
creator: '@myshop',
images: ['https://example.com/og.png'],
},
}جمعبندی
- برای metadata ثابت از
metadataاستفاده کنید - برای metadata داینامیک از
generateMetadataاستفاده کنید - metadata بهصورت خودکار در
<head>تزریق میشود - از
metadataBaseبرای سادهسازی URLهای کامل استفاده کنید