مولّد صور OpenGraph

صورة Open Graph هي ما يظهر عند مشاركة رابطك في WhatsApp، Slack، X، LinkedIn، iMessage، Facebook، أو أي تطبيق دردشة. أوّل انطباع بصري يحصل عليه المستلم. مشاركة بدون صورة = نصّ جاف يضيع وسط محادثة.

الإحصاءات الميدانيّة في الخليج تُظهر أن الروابط بصور OG مخصّصة تحصل على نقرات أعلى بنسبة 35–45% مقارنة بصور افتراضيّة أو غيابها كليّاً.

1200×630 بكسل هو المقاس الموصى به من Facebook، X، LinkedIn، وWhatsApp في 2026. النسبة 1.91:1 تضمن أن الصورة تُعرض كاملة دون قصّ على كل المنصّات الرئيسيّة.

مقاسات أصغر (مثل 600×315) تعمل لكن تظهر ضبابيّة على شاشات Retina. أكبر (1600×840) قد تُضغط من بعض المنصّات. 1200×630 هي النقطة الذهبيّة.

أداتنا أعلاه تُولّد الصورة بهذا المقاس بالضبط، وتستخدم Canvas API لرسمها في متصفّحك دون أي خادم.

الصور المولَّدة على الجانب الخادم (server-side) تواجه تحدّيات في تضمين الخطوط العربية. التحدّيات تختفي حين تُولِّد الصورة في المتصفّح: تستخدم خطوط النظام، وكلّ منصّة تعرض الصورة كصورة نقطيّة (raster) ثابتة.

القاعدة العمليّة: استخدم خطّ النظام (system-ui, -apple-system, 'Segoe UI'). يبدو جميلاً على macOS، Windows، iOS، Android — لأن النصّ يُرسم مرّة واحدة في متصفّحك، ثم يُحفَظ كصورة.

صورة OG تُرى على شاشات بإضاءات متفاوتة، وفي وضع مظلم وفاتح. اتبع نسبة تباين 4.5:1 على الأقل (معيار WCAG AA) بين النص والخلفية. الأنماط الخمسة في الأداة أعلاه (الحجري، المحيطي، الرملي، الغابي، الليلي) جميعها تتجاوز هذا الحدّ.

تجنّب التدرّجات اللونيّة (gradients) المعقّدة خلف النصّ. حتى لو بدت جميلة في الإيلستراتور، فإنّها تجعل النصّ صعب القراءة على شاشات الهاتف المتوسّطة الجودة.

عنوان لا يتجاوز 8 كلمات: يظهر كاملاً، لا يُقطع. الصور التي تحوي 20 كلمة تبدو كأنّها مقالات طويلة لا صور.

عنوان فرعي اختياري: سطر واحد أو سطران كحدّ أقصى. وظيفته التحديد، لا الإطالة.

اسم العلامة التجاريّة في زاوية: صغير، خفيف، لا يستحوذ على الانتباه. الزاوية السفلى اليمنى (للمحتوى RTL) أو السفلى اليسرى (LTR) هي المعيار.

لا أيقونات معقّدة، لا رموز كثيرة: صورة OG ليست لوحة إعلانيّة. كلّما قلّت العناصر، زادت قراءتها.

الصورة وحدها لا تكفي — لا بدّ من ربطها بصفحتك عبر وسوم Open Graph:

<meta property="og:image" content="https://example.com/og.png" />

<meta property="og:image:width" content="1200" />

<meta property="og:image:height" content="630" />

<meta property="og:image:alt" content="وصف موجز للصورة" />

لـ X (Twitter): أضِف <meta name="twitter:card" content="summary_large_image" /> ليستخدم نفس المقاس الكبير.

استخدم opengraph.xyz للمعاينة على كل منصّة في صفحة واحدة. أو Facebook Sharing Debugger (لـ Meta) و X Card Validator (لـ X).

عند تحديث الصورة، بعض المنصّات تُخزّن النسخة القديمة 24–72 ساعة. Sharing Debugger يتيح إعادة جلب الصورة فوراً.