أنشئ صورة OG ديناميكية لكل صفحة في Next.js

تصميم صورة مشاركة منفصلة لكل صفحة لا يتوسّع. النمط الأفضل هو مسار ديناميكي واحد يرسم بطاقة تحمل علامتك التجارية عند الطلب من عنوان كل صفحة وبياناتها الوصفية الخاصة.

مسار opengraph-image

يقرأ Next.js ملف opengraph-image في مقطع مسار ويقدّم ما يُرجعه على أنه og:image لذلك المسار. يُصيَّر باستخدام next/og، وهو مجرد JSX مرسوم إلى صورة.

import { ImageResponse } from "next/og";

export default function Image() {
  return new ImageResponse(
    <div style={{ fontSize: 64, padding: 60 }}>Your title</div>,
    { width: 1200, height: 630 },
  );
}

اجعلها لكل صفحة

• ·اسحب العنوان من معاملات المسار أو من طبقة بياناتك.
• ·نسّق البطاقة بلون علامتك التجارية المميّز ليبدو تناسق الشبكة متّسقًا.
• ·أبقِها ضمن حدود حجم المنصة لتُحمَّل دائمًا.

تُنشئ مهارة صورة OG (OG Image) هذا المسار منسّقًا لموقعك وتربط openGraph.images عبر صفحاتك، بحيث لا يتشارك أي مسارين المعاينة نفسها.