خانه / مستندات / Next JS / Metadata و تصاویر Open Graph / بخش اول - متا دیتاها

بخش اول - متا دیتاها

Default fields (فیلدهای پیش‌فرض)

دو تگ meta به‌صورت پیش‌فرض اضافه می‌شوند حتی اگر متادیتایی تعریف نشده باشد:

meta charset: sets the character encoding for the website
meta viewport: sets the viewport width and scale

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

Static metadata (متادیتای استاتیک)

برای تعریف متادیتای استاتیک، یک Metadata object را از فایل layout.js یا page.js export کنید:

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Blog',
  description: '...',
}

export default function Layout() {}

Generated metadata (متادیتای داینامیک)

از فانکشن generateMetadata برای fetch متادیتای داینامیک استفاده کنید:

import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const slug = (await params).slug
  const post = await fetch(`https://api.vercel.app/blog/${slug}`).then((res) =>
    res.json()
  )

  return {
    title: post.title,
    description: post.description,
  }
}

export default function Page({ params, searchParams }: Props) {}

Streaming metadata

برای صفحات داینامیک، Next.js متادیتا را به‌صورت جداگانه stream می‌کند و آن را در HTML inject می‌کند بدون اینکه UI rendering را block کند.

Streaming metadata برای bots و crawlers که انتظار دارند متادیتا در تگ <head> باشد (مثل Twitterbot، Slackbot، Bingbot) غیرفعال است.

می‌توانید streaming metadata را با htmlLimitedBots در Next.js config به‌طور کامل غیرفعال کنید.

Memoizing data requests

اگر نیاز دارید داده‌های یکسان را هم برای metadata و هم برای صفحه fetch کنید، از cache function در React استفاده کنید تا دوبار درخواست نزنید:

import { cache } from 'react'
import { db } from '@/app/lib/db'

export const getPost = cache(async (slug: string) => {
  const res = await db.query.posts.findFirst({ where: eq(posts.slug, slug) })
  return res
})

File-based metadata

فایل‌های خاص برای متادیتا:

favicon.ico, apple-icon.jpg, icon.jpg
opengraph-image.jpg, twitter-image.jpg
robots.txt
sitemap.xml

این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.

ترجمه شده از منبع: https://nextjs.org/docs/app