لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

إنشاء صور OG تلقائية إنشاء بطاقات اجتماعية ديناميكية باستخدام واجهة برمجة تطبيقات لقطة الشاشة

نُشرت في 2 فبراير 2026

توقف عن إنشاء صور معاينات لوسائل التواصل الاجتماعي يدويًا. تعرف على كيفية إنشاء صور OG رائعة في لحظتها باستخدام قوالب HTML وواجهة برمجة تطبيقات لقطات الشاشة. برنامج تعليمي غني بالكود مع أمثلة حقيقية.

إنشاء صور OG تلقائيًا: قم بإنشاء بطاقات اجتماعية ديناميكية باستخدام واجهة برمجة تطبيقات لقطة الشاشة

إعلان · يزيل؟

تقضي ساعات في صياغة تدوينة مثالية، ثم تنشرها وتشاركها على تويتر. وبعد ذلك… صندوق رمادي ممل. لا توجد معاينة. لا توجد صورة. مجرد رابط حزين وعارٍ لا يرغب أحد في النقر عليه.

هل يبدو هذا مألوفاً؟ صور OG (Open Graph) هي الأبطال المجهولون للمشاركة الاجتماعية. إنها حرفياً الفرق بين أن يتم تجاهل محتواك أو النقر عليه. وإذا كنت لا تزال تنشئها يدوياً في Figma لكل صفحة — فنحن بحاجة للتحدث.

ما هي صور OG (ولماذا يجب أن تهتم)؟

صور OG هي بطاقات المعاينة التي تظهر عند مشاركة رابط على وسائل التواصل الاجتماعي، سلاك، ديسكورد، أو أي مكان آخر يفرد الروابط. يتم تعريفها في HTML الخاص بك <meta> علامات:

<meta property="og:image" content="https://yoursite.com/og/your-page.png" />
<meta property="og:title" content="Your Awesome Title" />
<meta property="og:description" content="A compelling description" />

المشكلة؟ إنشاء هذه الصور يدوياً لا يتناسب مع النمو. لديك 100 تدوينة؟ هذا يعني 100 صورة. لديك صفحات منتجات ديناميكية؟ بالتوفيق في مواكبة ذلك.

الحل: إنشاء صور OG في الوقت الفعلي

هذه هي الخدعة: بدلاً من إنشاء الصور مسبقاً، سنقوم بعرض قالب HTML والتقاط لقطة شاشة له في الوقت الفعلي باستخدام واجهة برمجة تطبيقات لقطات الشاشة. التدفق يبدو كالتالي:

إنشاء قالب HTML لبطاقة OG الخاصة بك
استضفه بمعلمات ديناميكية (عنوان، مؤلف، إلخ)
وجه og:image علامة meta إلى واجهة برمجة تطبيقات لقطة الشاشة
تم. كل صفحة تحصل على بطاقة معاينة فريدة وجميلة.

الخطوة 1: بناء قالب OG الخاص بك

أولاً، قم بإنشاء صفحة HTML بسيطة تعرض بطاقة التواصل الاجتماعي الخاصة بك. يمكن أن يكون هذا مساراً مخصصاً في تطبيقك أو ملف HTML ثابت.

<!-- /og-template?title=Hello%20World&author=John -->
<!DOCTYPE html>
<html>
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 1200px;
      height: 630px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: system-ui, sans-serif;
      color: white;
    }
    h1 {
      font-size: 64px;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 24px;
    }
    .author {
      font-size: 28px;
      opacity: 0.9;
    }
    .logo {
      position: absolute;
      bottom: 40px;
      right: 60px;
      font-size: 24px;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1 id="title">Your Title Here</h1>
  <p class="author">by <span id="author">Author Name</span></p>
  <div class="logo">yoursite.com</div>
  <script>
    const params = new URLSearchParams(window.location.search);
    document.getElementById('title').textContent = params.get('title') || 'Untitled';
    document.getElementById('author').textContent = params.get('author') || 'Anonymous';
  </script>
</body>
</html>

المفتاح هنا: 1200 × 630 بكسل. هذا هو الحجم السحري لصور OG. تويتر، فيسبوك، لينكد إن — كلها تتعامل بشكل جيد مع هذا البعد.

الخطوة 2: التقاط لقطة شاشة لها باستخدام واجهة برمجة تطبيقات

والآن للجزء الممتع. بدلاً من تشغيل Puppeteer على خادمك (والتعامل مع كل دراما Chrome عديم الرأس)، استخدم واجهة برمجة تطبيقات لقطات الشاشة لعرض القالب الخاص بك.

إليك مثال Node.js يوضح النمط العام:

// Generate OG image URL using a screenshot API
function getOgImageUrl(title, author) {
  const templateUrl = encodeURIComponent(
    `https://yoursite.com/og-template?title=${encodeURIComponent(title)}&author=${encodeURIComponent(author)}`
  );
  
  // Most screenshot APIs follow this pattern:
  // Pass your template URL + dimensions, get back an image
  return `https://your-screenshot-api.com/capture?` +
    `url=${templateUrl}` +
    `&width=1200` +
    `&height=630` +
    `&format=png`;
}

الخطوة 3: ربطها بعلامات Meta الخاصة بك

في صفحتك <head>، قم بتعيين صورة OG ديناميكياً:

// Next.js example (pages/_app.js or layout.tsx)
import Head from 'next/head';

export default function BlogPost({ post }) {
  const ogImage = getOgImageUrl(post.title, post.author);
  
  return (
    <>
      <Head>
        <meta property="og:image" content={ogImage} />
        <meta property="og:title" content={post.title} />
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:image" content={ogImage} />
      </Head>
      <article>{/* Your content */}</article>
    </>
  );
}

الخطوة 4: إضافة التخزين المؤقت (هام!)

لا تريد استدعاء واجهة برمجة التطبيقات في كل مرة يقوم فيها زاحف تويتر بفحص صفحتك. قم بإعداد طبقة تخزين مؤقت:

// Edge function example (Vercel/Cloudflare)
export default async function handler(req) {
  const { title, author } = req.query;
  
  // Call your screenshot API
  const screenshotUrl = buildScreenshotUrl({
    url: `https://yoursite.com/og-template?title=${title}&author=${author}`,
    width: 1200,
    height: 630,
    format: 'png'
  });
  
  const response = await fetch(screenshotUrl);
  const imageBuffer = await response.arrayBuffer();
  
  return new Response(imageBuffer, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=86400, s-maxage=604800', // Cache for a week
    },
  });
}

الآن تشير علامة meta الخاصة بك إلى نقطة النهاية الخاصة بك، والتي تقوم بتخزين النتيجة مؤقتاً:

<meta property="og:image" content="https://yoursite.com/api/og?title=My%20Post&author=John" />

نصائح احترافية 🔥

استخدم خطوط الويب: خطوط Google تعمل بشكل رائع. فقط تأكد من تحميلها قبل التقاط لقطة الشاشة.
أضف علامتك التجارية: شعارات، تدرجات، أنماط — اجعلها مميزة في موجز الأخبار.
اجعل النص كبيراً: غالباً ما تُعرض بطاقات التواصل الاجتماعي كصور مصغرة. 48 بكسل+ للعناوين.
اختبر باستخدام أدوات التحقق: استخدم مدقق بطاقات تويتر و مصصم فيسبوك للمعاينة.

أمثلة واقعية

يستخدم هذا النمط من قبل بعض أفضل المدونات التقنية الموجودة:

Vercel/Next.js: تتضمن صور OG الخاصة بهم عنوان المنشور والتاريخ ووقت القراءة
GitHub: تُظهر بطاقات المستودع النجوم، الشوكات، والوصف
Dev.to: بطاقات المقالات مع صورة المؤلف وعدد التفاعلات

يمكنك القيام بنفس الشيء في 20 دقيقة باستخدام واجهة برمجة تطبيقات لقطات الشاشة. لا توجد بنية تحتية لصيانتها، ولا ثنائيات Chromium للتعامل معها.

التدفق الكامل

// Full working example with error handling
async function generateOgImage(title, author, category) {
  const templateParams = new URLSearchParams({
    title: title.slice(0, 60), // Truncate long titles
    author,
    category: category || 'Blog'
  });
  
  const templateUrl = `https://yoursite.com/og-template?${templateParams}`;
  
  try {
    // Adapt this to your screenshot API of choice
    const response = await fetch(SCREENSHOT_API_ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.SCREENSHOT_API_KEY}`
      },
      body: JSON.stringify({
        url: templateUrl,
        viewport: { width: 1200, height: 630 },
        format: 'png',
        waitUntil: 'networkidle' // Wait for fonts/images to load
      })
    });
    
    if (!response.ok) throw new Error('Screenshot failed');
    
    return await response.arrayBuffer();
  } catch (error) {
    console.error('OG generation failed:', error);
    // Return a fallback image
    return fetch('https://yoursite.com/default-og.png').then(r => r.arrayBuffer());
  }
}

لماذا تستخدم واجهة برمجة تطبيقات لقطات الشاشة بدلاً من الاستضافة الذاتية؟

أنت تستطيع تشغيل Puppeteer بنفسك. ولكن إليك كيف يبدو ذلك:

صور Docker بحجم 600 ميجابايت+ مع Chromium
ارتفاعات في الذاكرة تعطل خادمك
عمليات شبحية تطارد حاوياتك
مشاكل عرض الخطوط عبر بيئات مختلفة

أو يمكنك ببساطة… عدم القيام بذلك. واجهة برمجة تطبيقات لقطات الشاشة تتعامل مع كل ذلك، وأنت تدفع لكل لقطة شاشة بدلاً من كل ساعة خادم. بالنسبة لمعظم المواقع، هذا أرخص بكثير.

البدء

هل أنت مستعد لجعل مشاركاتك الاجتماعية تبدو احترافية؟ تحقق من Snapopa لواجهة برمجة تطبيقات لقطات شاشة مصممة خصيصاً لهذا الاستخدام. ستحصل على صور OG ديناميكية تعمل في أقل من 30 دقيقة.

لعبة تويتر الخاصة بك على وشك الارتقاء. 📈