صور OG لصفحات المنتجات

صورة OG لصفحة المنتج هي المعاينة الاجتماعية التي تعرض اسم المنتج وسعره وصورة مصغرة عند مشاركة الصفحة. تقوم FastOG بإنشائها ديناميكيًا بمقاس 1200×630 وتخزينها مؤقتًا على الحافة (edge-cache)، بحيث يحصل كل منتج على بطاقة تحمل علامتك التجارية دون أن يلمس مصمم أي قالب.

لماذا تحتاج صفحات منتجات التجارة الإلكترونية إلى صور OG ديناميكية

عندما يشارك العميل رابط منتج في WhatsApp أو Slack أو Discord، تكون بطاقة المعاينة بمثابة إعلان مصغّر. البطاقة التي تعرض اسم المنتج الفعلي وسعره وتقييمه تحقق تحويلًا أفضل بكثير من صورة الشعار العامة للمتجر. إن إنشاء بطاقة فريدة لكل منتج يدويًا لا يتوسع — وهذا هو الغرض من الـ API.

كيفية إنشاء صورة OG لمنتج

وقّع على عنوان URL باستخدام template=ecommerce، وعنوان المنتج، والسعر، والتقييم، وعنوان URL للصورة. تعرض الواجهة البرمجية البطاقة عند الطلب وتخزّنها مؤقتًا.

tsx

// Next.js — app/products/[slug]/page.tsx
export function generateMetadata({ params }) {
    const product = await getProduct(params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "ecommerce",      // product card
                title: product.name,
                subtitle: product.tagline,  // optional
                price: product.price,       // e.g. "$29.99"
                rating: product.rating,     // e.g. "4.9"
                image: product.imageUrl,    // product photo
            })],
        },
    };
}

حقول قالب التجارة الإلكترونية

الحقل	ما يظهره	اختياري؟
`title`	اسم المنتج (العنوان الرئيسي)	مطلوب
`subtitle`	الشعار أو الفئة	اختياري
`price`	بطاقة السعر، مثل `$29.99`	اختياري
`rating`	تقييم المراجعات، مثل `4.9`	اختياري
`image`	صورة المنتج / رابط الصورة الرمزية	اختياري

الأسئلة الشائعة

هل يقوم FastOG بتحميل صورة منتجي داخل البطاقة؟

نعم. مرّر عنوان URL لصورة المنتج في معامل image وسيقوم قالب التجارة الإلكترونية بدمجها داخل البطاقة.

هل السعر المعروض مباشر وقابل للتعديل؟

السعر هو ما تمرّره وقت التوقيع. غيّر السعر → غيّر الرابط → عرض جديد واحد.

ماذا عن أسعار الخصم / التخفيضات؟

مرّر السعر الحالي كقيمة price. بعض البائعين يحدّثون البطاقة عندما يتغيّر التخفيض بحيث يعرض المعاينة المشتركة السعر المباشر.

جرّبه مجانًا — لا حاجة للتسجيل

معاينة واختبار صور OG الديناميكية في ثوانٍ.

افتح أداة اختبار OG المجانية

الموضوع