تنفيذ صور ⁦OG⁩ والتحقق منها في تطبيق ⁦Next.js⁩

اختر ⁦metadata⁩ المستند إلى الملف أو المستند إلى التعليمات البرمجية عمدًا

• صور ⁦Next.js metadata⁩ و⁦OG⁩ — نظرة عامة رسمية على ⁦App Router⁩
• ⁦generateMetadata API⁩ — المرجع الديناميكي الرسمي ⁦metadata⁩
• اتفاقية ⁦opengraph-image⁩ — الملف الرسمي ومرجع ⁦ImageResponse⁩

ثابت ⁦metadata⁩ مع ⁦metadataBase⁩

يحل ⁦metadataBase⁩ عناوين ⁦metadata⁩ النسبية؛ ويسهّل ⁦URL⁩ العام المطلق مثل ⁦https://starterpackai.com/og/home.png⁩ التحقق من الصورة خارج التطبيق.

import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://starterpackai.com'),
  title: 'A clear page title',
  description: 'A concise share description',
  openGraph: {
    images: ['https://starterpackai.com/og/home.png'],
  },
}

معرفة الطريق ⁦generateMetadata⁩ في ⁦Next.js⁩ 16

في ⁦App Router⁩ ضمن ⁦Next.js⁩ 16، تكون ⁦params⁩ من نوع ⁦Promise⁩؛ نفّذ ⁦await params⁩ قبل تحميل بيانات المسار وإرجاع ⁦generateMetadata.⁩

import type { Metadata } from 'next'

type Props = { params: Promise<{ slug: string }> }

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)

  return {
    title: post.title,
    openGraph: { images: [post.ogImageUrl] },
  }
}

ديناميكية ⁦opengraph-image⁩ مع ⁦ImageResponse⁩

في ملف ⁦opengraph-image.tsx⁩ على الخادم، نفّذ ⁦await params⁩ ثم أرجع ⁦ImageResponse⁩ بأبعاد محددة.

import { ImageResponse } from 'next/og'

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

export default async function Image({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return new ImageResponse(
    <div style={{ display: 'flex', padding: 80 }}>{slug}</div>,
    size
  )
}

قائمة التحقق من النشر

• ✓تأكد من تشغيل ⁦metadata⁩ أو ⁦generateMetadata⁩ في مقطع مسار مكون الخادم.
• ✓افتح ⁦HTML⁩ المنشورة وتحقق من قيم ⁦og:title⁩ و⁦og:description⁩ و⁦og:image⁩ النهائية.
• ✓افتح الصورة العامة المطلقة ⁦URL⁩ في جلسة منفصلة وتحقق من الاستجابة الناجحة للصورة.
• ✓تحقق من تركيبة ⁦1200×630⁩ المعروضة بحجم بطاقة الارتباط الصغير.
• ✓قم بتشغيل مدقق ⁦metadata⁩ العام، ثم استخدم مصححات الأخطاء الخاصة بالنظام الأساسي عندما تختلف ذاكرات التخزين المؤقت.