عندما تلصق رابطًا في رسالة أو تغريدة أو منشور على LinkedIn أو قناة Slack، تسحب المنصة بطاقة معاينة — صورة كبيرة، وعنوان، ومقتطف. تلك الصورة هي صورة Open Graph (OG)، وهي تؤدي عملاً أكبر مما يؤديه عنوانك. في خلاصة سريعة التمرير، الصورة هي ما يوقف الإبهام. المعاينة الفارغة أو المعطوبة تبدو قليلة الجهد فيتخطاها القارئ.
إليك كيف تصنع واحدة تستحق النقرة، بالمقاس الصحيح، مع نص يمكن قراءته فعلاً.
المقاس: 1200×630
المقاس القياسي لصورة OG هو 1200×630 بكسل، بنسبة 1.91:1. مبنية حول هذا المقاس منصات Facebook وLinkedIn وSlack وDiscord ومعظم أنظمة معاينة الروابط. اضبط هذا المقاس تكن مغطى في كل مكان تقريبًا.
تظهر بضعة مقاسات ذات صلة تبعًا للمكان الذي يستقر فيه الرابط:
| المنصة / الاستخدام | المقاس | النسبة |
|---|---|---|
| Open Graph (الافتراضي) | 1200×630 | 1.91:1 |
| بطاقة Twitter/X الكبيرة | 1200×628 | ~1.91:1 |
| صورة YouTube المصغرة | 1280×720 | 16:9 |
| مربع (الخلاصات/IG) | 1080×1080 | 1:1 |
| قصة / عمودي | 1080×1920 | 9:16 |
لست بحاجة إلى كل هذه المقاسات لتدوينة مدونة — 1200×630 هو المقاس المعتمد. لكن إن كنت تصنع أيضًا صورة مصغرة لفيديو أو منشورًا اجتماعيًا مربعًا، فمن الأفضل أن تولّد الشكل الصحيح بدلاً من قص صورة واحدة قصًا سيئًا لتناسبها.
قواعد النص: مقروء بحجم الصورة المصغرة
الخطأ الذي يقتل صور OG هو معاملتها كملصق ستشاهده بملء الشاشة. لن تفعل. معظم الناس يرون البطاقة بربع حجمها الحقيقي تقريبًا، على هاتف، أثناء التمرير. صمّم من أجل ذلك.
- نص كبير، كلمات قليلة. عنوان قصير — من خمس إلى ثماني كلمات — يبقى واضحًا عندما تُصغَّر البطاقة. إن اضطررت أن تحدّق فيه بالحجم الكامل، فهو غير مقروء في الخلاصة.
- تباين قوي. نص فاتح على خلفية داكنة أو مشبعة، أو العكس. النص الجالس على صورة مزدحمة بلا خلفية سانِدة يختفي.
- أبقِ العناصر المهمة في الوسط. المنصات المختلفة تقص الحواف بطرق مختلفة قليلاً. أبقِ النص والشعارات بعيدة عن الهوامش الخارجية كي لا يُقتطع شيء.
- فكرة واحدة لكل صورة. صورة OG خطّاف، لا ملخّص. عنوان، وربما عنوان فرعي، وانتهى الأمر.
خلفيات تُبرز النص
التدرّج اللوني المسطّح هو الخيار الموثوق. يمنح النص شيئًا نظيفًا يجلس عليه، ويبدو عصريًا، ولا يزاحم الكلمات كما تفعل الصورة المزدحمة. تدرّج من الداكن إلى الأكثر قتامة قليلاً مع نص فاتح يكاد يكون مضمونًا.
أداة صورة OG مبنية حول هذا تمامًا: اختر إعدادًا مسبقًا للمقاس (OG 1200×630، أو Twitter، أو YouTube، أو مربع، أو قصة)، واختر خلفية متدرّجة، وأضف عنوانك وعنوانك الفرعي. تحصل على بطاقة مشاركة تُقرأ بوضوح بأي حجم، دون فتح تطبيق تصميم كامل.
شيفرة HTML التي تجعلها تظهر
صنع الصورة نصف المهمة. على المنصة أن تعرف أين تجدها. أضف هذه الوسوم إلى <head> في صفحتك:
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Your title">
<meta property="og:description" content="One clear sentence.">
<meta name="twitter:card" content="summary_large_image">
سطر twitter:card المضبوط على summary_large_image هو ما يمنحك البطاقة الكبيرة على X بدلاً من صورة مصغرة ضئيلة. الروابط المطلقة (المبدوءة بـ https://) مهمة — المسارات النسبية كثيرًا ما تفشل في التحليل عندما يجلب زاحفٌ صفحتك.
بعد النشر، اختبرها. الصق رابطك في مصحّح معاينة الروابط الخاص بالمنصة (Sharing Debugger من Facebook، أو Post Inspector من LinkedIn) لتأكيد تحميل الصورة ومسح أي نسخة قديمة مخزّنة. المنصات تخزّن المعاينات بقوة، فإن حدّثت الصورة وما زلت ترى القديمة، فزرّ إعادة الزحف في المصحّح هو الحل.
اصنعها، لا ترفعها
كل شيء يعمل داخل متصفحك — تُركّب الصورة عبر Canvas محليًا ولا تُرفع أبدًا إلى خادم. مجانية، بلا تسجيل، بلا علامة مائية مطبوعة عبر بطاقة مشاركتك، وتعمل دون اتصال بعد الزيارة الأولى. ولّد صورة 1200×630، اربط وسوم الميتا، مرّرها عبر مصحّح مرة واحدة، وستبدأ روابطك في أداء دورها كما ينبغي.