صور OG الديناميكية لتطبيقات SaaS

صور OG الديناميكية لتطبيقات SaaS هي معاينات اجتماعية مخصصة لكل صفحة، تُنشأ تلقائيًا عند مشاركة لوحة التحكم أو المستندات أو سجل التغييرات أو المسارات الموجهة للمستخدمين. تقوم FastOG بإنشاء كل صورة عند الطلب وتخزينها مؤقتًا، مما يتيح لتطبيق SaaS تقديم بطاقة مميزة بعلامة تجارية لكل صفحة دون أي جهد تصميم يدوي.

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

تمتلك منتجات SaaS العديد من الأسطح القابلة للمشاركة — صفحات المنتجات، صفحات التوثيق، إدخالات سجل التغييرات، ملفات المستخدمين العامة، وبطاقات الإنجازات. كل واحدة تُشارك على X أو LinkedIn تستفيد من بطاقة خاصة بها بدلاً من الاعتماد على شعار واحد كخيار احتياطي. إنشاء هذه الصور يدويًا لا يتوسع؛ بينما إنشاؤها في وقت العرض يتوسع.

النمط الأساسي

لكل صفحة تريد إنشاء بطاقة لها، وقّع على عنوان URL باستخدام عنوان الصفحة (وأي حقول خاصة بالصفحة) في وقت العرض. يقوم FastOG بإنشاء صورة PNG عند أول جلب، وتقوم Cloudflare بتخزينها مؤقتًا.

tsx

// Next.js — app/docs/[slug]/page.tsx
export function generateMetadata({ params }) {
    const doc = await getDoc(params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "default",     // or "devtool", "launch", "company"
                title: doc.title,
                subtitle: doc.excerpt,
                domain: "yoursaas.com",
            })],
        },
    };
}

حالات استخدام SaaS الجيدة

السطح	أفكار القوالب
صفحات المنتج / التسويق	`company`، `hero`، `product`
صفحات التوثيق	`default`، `devtool`
إدخالات سجل التغييرات	`changelog`، `launch`
بطاقات المستخدم / الصورة الرمزية العامة	`testimonial`، `stats`، `image-right`
صفحات التسعير	`pricing`، `stats`

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

هل أحتاج إلى قالب لكل حالة استخدام؟

لا. قالب واحد بالإضافة إلى حقول URL التي تمررها عادةً ما يكون كافيًا؛ وعدد قليل من القوالب يغطي بقية الحالات. جميعها تُعرض بدقة 1200×630.

كيف أتعامل مع العديد من الصفحات دون استنزاف الحصة؟

عناوين URL المتطابقة تُخزَّن مؤقتًا على الحافة (edge-cached) بشكل دائم بعد أول عرض، لذا مشاركة نفس الصفحة 1,000 مرة تُحتسب كعرض واحد فقط. تغيير المحتوى ينتج عنه ببساطة عنوان URL جديد.

هل يمكنني تخصيص البطاقات بهوية SaaS الخاصة بي؟

نعم — اضبط brand_name وbrand_logo وbg_color والخطوط والأنماط لكل عنوان URL. راجع الملعب التجريبي لمعاينة القوالب مباشرة.

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

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

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

الموضوع