مدیریت متادیتا و تصاویر OG در Next.js – بهبود SEO، اشتراک‌گذاری و تولید پویا

| metadata |

| Open Graph image |

| generateMetadata |

| ImageResponse |

معرفی متادیتا در Next.js

Next.js با استفاده از APIهای متادیتا، تگ‌های <head> را به‌صورت خودکار تولید می‌کند. این تگ‌ها شامل اطلاعاتی هستند که برای SEO و اشتراک‌گذاری در وب اهمیت دارند.

تگ‌های پیش‌فرض

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

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

متادیتا ثابت

برای تعریف متادیتای ثابت، از شی metadata در فایل‌های layout یا page استفاده کنید:

// app/blog/layout.tsx
export const metadata = {
  title: 'My Blog',
  description: '...',
}

متادیتا پویا با generateMetadata

برای تولید متادیتا بر اساس داده، از تابع generateMetadata استفاده کنید:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await fetch(`https://api.vercel.app/blog/${params.slug}`).then(res => res.json())
  return {
    title: post.title,
    description: post.description,
  }
}

استریم متادیتا

در صفحات پویا، Next.js متادیتا را به‌صورت جداگانه استریم می‌کند تا UI سریع‌تر نمایش داده شود. این ویژگی برای ربات‌ها غیرفعال می‌شود تا متادیتا در <head> باقی بماند.

بهینه‌سازی درخواست‌های داده

برای جلوگیری از دریافت دوباره داده‌ها، می‌توان از تابع cache در React استفاده کرد:

// app/lib/data.ts
export const getPost = cache(async (slug) => {
  return await db.query.posts.findFirst({ where: eq(posts.slug, slug) })
})

فایل‌های خاص متادیتا

favicon.ico – آیکون سایت در مرورگر
opengraph-image.jpg – تصویر OG برای اشتراک‌گذاری
robots.txt – کنترل ایندکس موتورهای جستجو
sitemap.xml – نقشهٔ سایت برای SEO

تصاویر Open Graph

برای افزودن تصویر OG ثابت، فایل opengraph-image.jpg را در پوشهٔ app یا مسیر خاص قرار دهید. تصاویر خاص مسیر، اولویت بالاتری دارند.

تولید تصویر OG پویا

برای تولید تصویر OG بر اساس داده، از ImageResponse در فایل opengraph-image.tsx استفاده کنید:

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og'
import { getPost } from '@/app/lib/data'

export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({ params }) {
  const post = await getPost(params.slug)
  return new ImageResponse(
    <div style={{
      fontSize: 128,
      background: 'white',
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      {post.title}
    </div>
  )
}

ImageResponse از JSX و CSS برای تولید تصویر استفاده می‌کند و از ویژگی‌هایی مانند flexbox، فونت سفارشی، و موقعیت‌دهی پشتیبانی می‌کند.

جمع‌بندی

با استفاده از متادیتا و تصاویر OG در Next.js می‌توان تجربهٔ کاربری، SEO، و اشتراک‌گذاری در شبکه‌های اجتماعی را بهبود داد. ابزارهایی مانند generateMetadata و ImageResponse امکان تولید پویا و دقیق را فراهم می‌کنند.