كيف تصنع صورة Open Graph بمقاس 1200×630 مجاناً في متصفحك

مُنشئ صور Open Graph مجاني يبني صورة مشاركة اجتماعية مثالية بمقاس 1200×630 داخل متصفحك مباشرة. اختر قالباً، أضف عنواناً وشعاراً، صدّر ملف PNG، وانسخ وسوم og:image.

عندما تلصق رابطاً في تويتر/إكس أو لينكدإن أو سلاك أو ديسكورد أو الرسائل، فإن بطاقة المعاينة التي تظهر ليست سحراً — بل تعتمد على صورة واحدة مُشار إليها داخل شيفرة HTML لصفحتك. هذه الصورة هي صورة Open Graph، وهي من أكثر عناصر التصميم تأثيراً يمكنك إنجازها لأي مقال أو صفحة منتج أو صفحة هبوط. صورة مشاركة جيدة تجلب النقرات، وغيابها أو رداءتها يكلّفك زيارات في كل مرة تُشارك فيها الرابط.

الجزء المُحبط دائماً كان إنشاءها. يفتح المصممون Figma ويُعِدّون إطاراً بمقاس 1200×630 ويبنون التخطيط ويصدّرون ملف PNG. أما المطورون بلا أدوات تصميم فيلجؤون إلى لقطات الشاشة أو يتجاهلون الصورة كلياً. لهذا بنينا مُنشئ صور Open Graph المجاني الذي يعمل بالكامل داخل متصفحك — اكتب عنواناً، اختر قالباً، وصدّر صورة مشاركة اجتماعية مثالية في ثوانٍ.

ما هي صورة Open Graph بالضبط؟

بروتوكول Open Graph هو مجموعة صغيرة من وسوم <meta> في HTML، قدّمتها فيسبوك في الأصل، تُخبر المنصات الاجتماعية كيف تعرض الرابط. أهم هذه الوسوم هو og:image، الذي يشير إلى الصورة الظاهرة في بطاقة المعاينة. ويضيف تويتر/إكس وسوم twitter:card وtwitter:imageالخاصة به، لكنها تستهلك الصورة نفسها.

المقاس القياسي المتفق عليه هو صورة مشاركة اجتماعية بمقاس 1200×630 بكسل — بنسبة 1.91:1. هذا هو المقاس الذي يعرضه فيسبوك ولينكدإن وتويتر/إكس بعرض كامل دون اقتصاص. التقليل عنه يخاطر ببطاقة باهتة أو، أسوأ من ذلك، صورة مصغّرة صغيرة بدل صورة بطل كبيرة. مُولّدنا مثبّت على 1200×630 بالضبط حتى لا تحتاج إلى تذكّر الرقم أبداً.

لماذا يتفوّق المتصفح على Figma لهذه المهمة

Figma رائع للتصميم المخصّص، لكنه مبالغة لبطاقة 1200×630 قالبية تحتاج إنتاجها عشرات المرات. تتفوّق أداة المتصفح لصور Open Graph تحديداً للأسباب التالية:

صفر إعداد. لا إطار تضبطه ولا إعدادات تصدير تتذكّرها. افتح الصفحة، اكتب عنوانك، نزّل ملف PNG.
أبعاد صحيحة افتراضياً. اللوحة (canvas) مثبّتة على 1200×630، فكل تصدير جاهز للمشاركة دون تغيير حجم يدوي.
خصوصية وعمل دون اتصال. تُرسم الصورة على لوحة في متصفحك. نصّك وشعارك وألوانك لا تلمس أي خادم.
قابلية للتكرار. اختر قالباً مرة واحدة ليبدو كل منشور في سلسلة متّسقاً — وهذا بالضبط ما يبني التعرّف على علامتك في خلاصة مزدحمة.

كيف يعمل المُولّد

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

ثم تصبح كل قيمة قابلة للتعديل. يمكنك تبديل الخلفية بين لون صلب أو متدرّج بنقطتين أو شبكي ناعم من بُقع شعاعية. لون النص ولون التمييز والمحاذاة (يسار، وسط، أو يمين) وحجم خط العنوان كلها أشرطة تمرير ومنتقيات. ويمكنك أيضاً رفع شعار أو صورة رمزية يثبّت ذيل البطاقة. يُعاد رسم كل شيء على اللوحة فوراً أثناء الكتابة.

التصدير والربط

حين تبدو البطاقة صحيحة، انقر تصدير PNG. تستدعي الأداة canvas.toBlob()لإنتاج ملف PNG حقيقي بمقاس 1200×630 وتنزّله مباشرة — دون رفع ودون علامة مائية. استضف ذلك الملف حيث توجد أصول موقعك (مجلد public، أو شبكة CDN، أو تخزين كائنات).

يُخرج المُولّد أيضاً مقتطف وسوم Meta جاهزاً للّصق حتى لا تحتاج إلى تذكّر الصياغة. ضعه داخل <head> صفحتك واستبدل عنوان URL المؤقت بصورتك المستضافة:

<meta property="og:image" content="https://example.com/og-image.png" />
<meta name="twitter:card" content="summary_large_image" />

نصائح تصميم لصور مشاركة تجلب النقرات فعلاً

أبقِ العنوان قصيراً. من ست إلى عشر كلمات هو النطاق الأمثل. تُرى البطاقة بحجم مصغّر في خلاصة سريعة التمرير؛ جدار النص يُقرأ كضجيج. يلتفّ المُولّد إلى ثلاثة أسطر كحد أقصى ليتّسع عنوانك دائماً.

استخدم تبايناً عالياً. نص فاتح على متدرّج داكن (أو العكس) يصمد أمام الضغط والأحجام الصغيرة. القوالب المدمجة مُنسّقة مسبقاً لذلك، ويمكنك التحقق من أي مزيج مخصّص عبر أدوات مجموعتنا.

حافظ على الاتّساق. أعد استخدام القالب ولون التمييز نفسيهما عبر سلسلة محتوى. التعرّف يتراكم — يبدأ القرّاء بربط المظهر بك قبل أن يقرؤوا العنوان حتى.

اختبر قبل النشر

بمجرد نشر وسومك، تحقّق منها عبر أداة Sharing Debugger من فيسبوك وPost Inspector من لينكدإن وCard Validator من تويتر. تُجبر هذه الأدوات المنصات أيضاً على إعادة فحص صفحتك، وهو أمر أساسي لأنها تخزّن النتائج بقوة — إن حدّثت صورة، قد تبقى القديمة أياماً حتى تطلب تحديثاً.

تلك هي الدورة كاملة: ولّد صورة 1200×630، استضفها، الصق وسوم Meta، وتحقّق. مع مُنشئ صور Open Graph في المتصفح، تستغرق خطوة التصميم التي كانت تتطلّب مصمّماً وملف Figma نحو ثلاثين ثانية فقط، وهي مجانية وخاصة وقابلة للتكرار لكل رابط تشاركه.