LogoENEnglish

opengraph-image و twitter-image در Next.js — تولید تصاویر اشتراک‌گذاری برای شبکه‌های اجتماعی

Next.js از conventions خاصی برای تولید تصاویر اشتراک‌گذاری در شبکه‌های اجتماعی پشتیبانی می‌کند. با استفاده از فایل‌های تصویری یا کد، می‌توان برای هر segment از مسیر، تصویر Open Graph یا Twitter تعریف کرد. این تصاویر هنگام اشتراک‌گذاری لینک در پیام‌رسان‌ها یا شبکه‌های اجتماعی نمایش داده می‌شوند. این مقاله نحوهٔ استفاده از فایل‌ها، تولید تصاویر با ImageResponse، و تنظیم متادیتا را توضیح می‌دهد.

opengraph-imagetwitter-imageImageResponsemeta tags

~4 دقیقه مطالعه • بروزرسانی ۷ آبان ۱۴۰۴

۱. کاربرد opengraph-image و twitter-image


این فایل‌ها برای تولید تصاویر اشتراک‌گذاری در شبکه‌های اجتماعی مانند Twitter، WhatsApp و LinkedIn استفاده می‌شوند. هنگام اشتراک‌گذاری لینک، مرورگر از متادیتای <head> برای نمایش تصویر استفاده می‌کند.


۲. روش‌های تعریف تصویر


دو روش برای تعریف تصویر وجود دارد:

  1. استفاده از فایل تصویری (.jpg، .png، .gif)
  2. تولید تصویر با کد (.js، .ts، .tsx)

۳. استفاده از فایل تصویری


فایل را در segment مسیر قرار دهید:

  • opengraph-image.jpg → برای Open Graph
  • twitter-image.png → برای Twitter
  • opengraph-image.alt.txt → متن alt برای تصویر
  • twitter-image.alt.txt → متن alt برای تصویر

محدودیت حجم:

  • twitter-image: حداکثر ۵MB
  • opengraph-image: حداکثر ۸MB

خروجی در <head>:

<meta property="og:image" content="..." />
<meta name="twitter:image" content="..." />
<meta property="og:image:alt" content="About Acme" />
<meta name="twitter:image:alt" content="About Acme" />

۴. تولید تصویر با کد


از API ImageResponse در next/og استفاده کنید:

// app/about/opengraph-image.tsx
import { ImageResponse } from 'next/og'
import { readFile } from 'node:fs/promises'
import { join } from 'node:path'

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

export default async function Image() {
  const font = await readFile(join(process.cwd(), 'assets/Inter-SemiBold.ttf'))

  return new ImageResponse(
    <div style={{
      fontSize: 128,
      background: 'white',
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      About Acme
    </div>,
    {
      ...size,
      fonts: [{ name: 'Inter', data: font, style: 'normal', weight: 400 }],
    }
  )
}

۵. پارامترهای ورودی و خروجی


تابع export شده می‌تواند پارامترهای داینامیک مسیر را دریافت کند:

export default async function Image({ params }) {
  const { slug } = await params
}

خروجی تابع باید یکی از انواع زیر باشد:

  • Blob
  • ArrayBuffer
  • TypedArray
  • ReadableStream
  • Response

۶. تنظیمات متادیتا


می‌توانید متادیتای تصویر را با export کردن متغیرهای زیر تنظیم کنید:

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

۷. مثال با دادهٔ خارجی


تصویر را بر اساس دادهٔ API تولید کنید:

// app/posts/[slug]/opengraph-image.tsx
export default async function Image({ params }) {
  const { slug } = await params
  const post = await fetch(`https://.../posts/${slug}`).then(res => res.json())

  return new ImageResponse(
    <div style={{
      fontSize: 48,
      background: 'white',
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      {post.title}
    </div>,
    { width: 1200, height: 630 }
  )
}

۸. استفاده از تصویر محلی


خواندن تصویر از فایل سیستم و تبدیل به base64:

const logoData = await readFile(join(process.cwd(), 'logo.png'), 'base64')
const logoSrc = `data:image/png;base64,${logoData}`

جمع‌بندی


با استفاده از opengraph-image و twitter-image در Next.js می‌توانید تجربه اشتراک‌گذاری حرفه‌ای و قابل شخصی‌سازی برای صفحات خود بسازید. چه با فایل تصویری و چه با کد، این قابلیت‌ها به شما امکان می‌دهند کنترل کامل بر ظاهر لینک‌های اشتراکی در شبکه‌های اجتماعی داشته باشید.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article