~3 دقیقه مطالعه • بروزرسانی ۱۰ آبان ۱۴۰۴
۱. تعریف 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های کامل استفاده کنید
نوشته و پژوهش شده توسط دکتر شاهین صیامی