صور Open Graph: المقاسات وأفضل الممارسات مع أمثلة برمجية
تتحكم صور Open Graph في المحتوى المرئي عند مشاركة صفحتك على فيسبوك، تويتر، أو لينكدإن. الصورة الخاطئة أو عدم وجود صورة يقلل من معدلات النقر قبل وصول الزوار لموقعك.
يغطي هذا الدليل الأحجام المثلى، مبادئ التصميم، تنفيذ HTML، وأدوات الاختبار — كل ما تحتاجه لضبط معاينات الوسائط الاجتماعية بشكل صحيح على جميع المنصات.
فهرس المحتويات
ما هي صور Open Graph ولماذا هي مهمة
Open Graph هو بروتوكول أطلقه فيسبوك يسمح لك بالتحكم في ظهور صفحات الويب عند مشاركتها على الشبكات الاجتماعية. وسم og:image يحدد الصورة التي تستخدم كمعاينة مصغرة.
عند مشاركة رابط على فيسبوك، تويتر، أو لينكدإن، تستخرج المنصة بيانات Open Graph وتُنشئ بطاقة معاينة. هذه البطاقة — مع صورتها، عنوانها، ووصفها — غالبًا ما تكون الشيء الوحيد الذي يراه المستخدم قبل النقر.
صورة Open Graph مصممة جيدًا تعزز معدلات النقر بشكل ملحوظ. الصورة المفقودة أو ذات الحجم غير الصحيح تؤدي إلى معاينة معطلة، صورة مصغرة مقطوعة، أو عنصر نائب عام يبدو غير احترافي.
معدل النقر
الصفحات التي تحتوي على صورة OG بحجم مناسب وتباين عالي تتفوق باستمرار على تلك التي لا تحتوي على صورة أو تستخدم صورة بديلة منخفضة الجودة.
نقرات أكثر من كل مشاركة
التعرف على العلامة التجارية
الهوية البصرية الموحدة عبر كل رابط مشترك تبني الألفة والثقة مع جمهورك قبل وصولهم للصفحة.
اتساق عبر الشبكات
إشارة تحسين محركات البحث
التفاعل الاجتماعي الناتج عن معاينات جذابة يولد روابط خلفية وإشارات حركة مرور تعزز ترتيب البحث العضوي مع الوقت.
فائدة ترتيب غير مباشرة
متطلبات الصور حسب المنصة
لكل منصة اجتماعية أبعاد ونسب حجم وقيود حجم ملف موصى بها. الالتزام بها يمنع القص، التشويه، واستخدام عناصر نائب بديلة.
| المنصة | الحجم الموصى به | نسبة العرض إلى الارتفاع | أقصى حجم للملف | الصيغة |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
الحجم الآمن العالمي: 1200 × 630 بكسل
صورة بحجم 1200 × 630 بكسل بنسبة 1.91:1 تعمل على فيسبوك، لينكدإن، واتساب، سلاك، ومعظم المنصات الأخرى. على تويتر، تُعرض الصورة جيدًا رغم استخدام قص 16:9 — حافظ على المحتوى المهم في الوسط لتجنب القطع.
مبادئ تصميم صور Open Graph الفعالة
تظهر الصورة بأحجام صغيرة في خلاصات التواصل الاجتماعي. صمم أولًا للمعاينة المصغرة، وليس للحجم الكامل.
احتفظ بأهم عنصر بصري — شعارك، عنوان قوي، أو رسم توضيحي رئيسي — ضمن 80% المركزية من الصورة. غالبًا ما تقص المنصات الحواف. أي شيء قرب الحدود قد يُقطع على بعض الشاشات.
تباين عالي
استخدم تباينًا قويًا بين النص، العناصر الأمامية، والخلفية. الصور منخفضة التباين تختفي في خلاصات مزدحمة بجانب منشورات المنافسين الزاهية.
مقروءة بأي حجم
وضوح الطباعة
إذا كانت الصورة تحتوي على نص، استخدم خطوطًا كبيرة وعريضة — ما يعادل 36 بكسل على الأقل — وتجنب أكثر من سطرين. النص الأصغر يصبح غير مقروء على مقياس المعاينة المصغرة.
حافظ على وضوحه صغيرًا
اتساق العلامة التجارية
أدرج شعارك أو لوحة ألوان علامتك التجارية في كل صورة OG. كل مشاركة هي انطباع عن العلامة حتى لو لم ينقر المستخدم.
كل مشاركة = نقطة تواصل للعلامة
اختيار صيغة الصورة المناسبة
استخدم JPEG للصور الفوتوغرافية في OG وPNG للرسومات التي تحتوي على نصوص، شعارات، أو شفافية. WebP يحظى بدعم متزايد لكنه ليس عالميًا بعد بين جميع زواحف الشبكات الاجتماعية.
| الصيغة | الأفضل لـ | الدعم الاجتماعي | حجم الملف النموذجي | التوصية |
|---|---|---|---|---|
| JPEG | الصور، التدرجات | عالمي | 60 – 150 KB | الإعداد الافتراضي للصور |
| PNG | النصوص، الشعارات، الشفافية | عالمي | 100 – 300 KB | الإعداد الافتراضي للرسومات |
| WebP | كلاهما، ملفات أصغر | تويتر، سلاك (ليس كلها) | 40 – 120 KB | للاستخدام التكميلي فقط |
استهدف حجم 100–200 كيلوبايت لصورة OG. الأصغر دائمًا أفضل، لكن لا تضغط بشدة حتى لا تبدو الصورة متكسرة في الخلاصة الاجتماعية. واتساب يفرض حدًا صارمًا 300 كيلوبايت — إذا كان المشاركة عبر واتساب مهمة لك، حافظ على جميع صور OG تحت هذا الحد.
لمزيد من المعلومات حول مقايضات صيغ الصور بشكل عام، راجع دليل تحسين صور المواقع . لتحويل الصور الحالية، دليل تحويل JPG إلى WebP يغطي سير العمل اليومي.
تنفيذ HTML وعلامات الميتا
ضع علامات ميتا Open Graph داخل عنصر <head> في HTML الخاص بك. يجب أن يستخدم وسم og:image عنوان URL مطلق — المسارات النسبية غير مدعومة من قبل زواحف الشبكات الاجتماعية.
الوسوم الأساسية المطلوبة هي og:title، og:description، og:image، وog:url. وسم twitter:card يفعّل تنسيق بطاقة الصورة الكبيرة على تويتر.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">حدد دائمًا og:image:width وog:image:height. بدونها، يجب على المنصات تحميل وفحص الصورة قبل عرض المعاينة، مما يبطئ العرض ويزيد من احتمال ظهور عنصر نائب بديل.
إذا كنت تستخدم Blazor، مكون بيانات ميتا SEO الخاص بـ Blazor يتولى تلقائيًا جميع علامات Open Graph مع عناوين URL مدركة للثقافة.
اختبار وتصحيح صور Open Graph
تخزن المنصات الاجتماعية بيانات Open Graph مؤقتًا بشكل مكثف. بعد تحديث الوسوم أو الصورة، استخدم أدوات التصحيح الرسمية لإجبار إعادة الزحف والتحقق من صحة المعاينة قبل المشاركة.
أداة تصحيح مشاركة فيسبوك
أدخل عنوان URL الخاص بك في developers.facebook.com/tools/debug لجلب بيانات جديدة، ومعرفة الصورة التي اختارها فيسبوك، وتصحيح أي تحذيرات أو أخطاء تحقق.
فرض تحديث التخزين المؤقت
مدقق بطاقات تويتر
استخدم cards-dev.twitter.com/validator لمعاينة كيفية ظهور بطاقة تويتر بالضبط. انقر على 'معاينة البطاقة' لرؤية الصورة المصغرة، العنوان، والوصف في تنسيق البطاقة الفعلي.
معاينة قبل النشر
مفتش منشورات لينكدإن
مفتش منشورات لينكدإن على linkedin.com/post-inspector يحدث ذاكرة التخزين المؤقتة للرابط الخاص بك ويعرض كيف ستبدو معاينة المنشور مع بيانات الميتا الحالية.
تحديث ذاكرة لينكدإن المؤقتة
الأخطاء الشائعة وكيفية إصلاحها
معظم مشاكل صور Open Graph تنبع من مجموعة صغيرة من الأخطاء المتكررة. معرفة ما يجب البحث عنه يوفر وقت التصحيح.
- عناوين URL النسبية. زواحف الشبكات الاجتماعية لا تعالج المسارات النسبية. يجب أن تكون قيمة og:image عنوان URL مطلق كامل يشمل البروتوكول والنطاق (https://yourdomain.com/path/image.jpg).
- غياب وسوم العرض والارتفاع. بدون og:image:width وog:image:height، يجب على المنصات تحميل وفحص الصورة قبل إنشاء المعاينة. أضف كلا الوسمين لتجنب هذا التحميل الإضافي.
- صور محمية بالمصادقة. الزواحف لا يمكنها الوصول إلى الصور التي تتطلب تسجيل دخول أو محجوبة بواسطة robots.txt. يجب أن تكون صورة OG متاحة للجمهور بدون أي رؤوس مصادقة.
- نسبة العرض إلى الارتفاع خاطئة. الصورة التي تنحرف بشكل كبير عن نسبة 1.91:1 سيتم قصها أو عرضها مع أشرطة جانبية مشتتة. اختبر دائمًا النسبة المقصودة قبل النشر.
- ذاكرة التخزين المؤقتة القديمة للمنصة. تحديث ملف الصورة دون تغيير اسم الملف أو إضافة سلسلة استعلام يعني أن المنصات تقدم النسخة المخزنة القديمة. قم بتحديث اسم الملف أو استخدم أداة التصحيح للمنصة لإجبار التحديث.
أتمتة إنشاء صور Open Graph
للمواقع الصغيرة والمدونات، صورة OG ثابتة واحدة لكل صفحة هي أبسط وأوثق طريقة. للمطبوعات أو التطبيقات الأكبر حيث يحتاج كل صفحة إلى معاينة اجتماعية فريدة، يصبح التوليد الديناميكي عمليًا.
توليد صور OG الديناميكي ينشئ صورة فريدة عند وقت الطلب — أو وقت البناء — بناءً على عنوان الصفحة، الوصف، أو محتوى آخر. النتيجة معاينة فريدة ومتوافقة مع العلامة لكل صفحة دون إنشاء يدوي للصور.
متى تقوم بالأتمتة
قم بالأتمتة عندما يكون لديك العديد من الصفحات التي تحتاج كل منها إلى صورة فريدة، أو عندما يتغير المحتوى بشكل متكرر، أو عندما لا يتناسب إنشاء الصور يدويًا مع حجم النشر.
محتوى عالي الحجم أو ديناميكي
متى تستخدم الصور الثابتة
معظم الصفحات — صفحات الهبوط، الأدلة، والمقالات الدائمة — صورة ثابتة مصممة بعناية تتفوق على الصورة المولدة من حيث الجودة واتساق العلامة.
نهج الجودة أولاً
الأدوات الشائعة للتوليد الديناميكي تشمل Cloudinary (تحويلات عبر معلمات URL)، Vercel OG (يعرض React/HTML كصورة على الحافة)، وأنابيب لقطات الشاشة المبنية على Puppeteer أو Playwright لأي تقنية.