صور Open Graph: المقاسات وأفضل الممارسات مع أمثلة برمجية
صور Open Graph تتحكم بما يظهر عند مشاركة صفحتك على فيسبوك، تويتر، أو لينكدإن. الصورة الخاطئة أو عدم وجود صورة يقلل من معدلات النقر قبل وصول الزوار لموقعك.
يغطي هذا الدليل الأحجام المثالية، مبادئ التصميم، تنفيذ HTML، وأدوات الاختبار — كل ما تحتاجه لضبط معاينات التواصل الاجتماعي بشكل صحيح على كل منصة.
فهرس المحتويات
ما هي صور Open Graph ولماذا هي مهمة
Open Graph هو بروتوكول قدمته فيسبوك يتيح لك التحكم في كيفية ظهور صفحات الويب عند مشاركتها على الشبكات الاجتماعية. وسم og:image يحدد الصورة التي تستخدم كمعاينة مصغرة.
عند مشاركة رابط على فيسبوك، تويتر، أو لينكدإن، تستخرج المنصة بيانات Open Graph وتُنشئ بطاقة معاينة. هذه البطاقة — مع صورتها، عنوانها، ووصفها — غالبًا ما تكون الشيء الوحيد الذي يراه المستخدم قبل النقر.
صورة Open Graph المصممة جيدًا تحسن معدلات النقر بشكل ملحوظ. الصورة المفقودة أو ذات الحجم غير الصحيح تؤدي إلى معاينة معطلة، صورة مصغرة مقطوعة، أو عنصر نائب عام يبدو غير احترافي.
معدل النقر
الصفحات التي تحتوي على صورة OG بحجم مناسب وتباين عالي تتفوق باستمرار على تلك التي لا تحتوي على صورة أو تستخدم صورة بديلة منخفضة الجودة.
نقرات أكثر من كل مشاركة
التعرف على العلامة التجارية
هوية بصرية متسقة عبر كل رابط مشترك تبني الألفة والثقة مع جمهورك قبل وصولهم للصفحة.
متناسق عبر الشبكات
إشارة SEO
التفاعل الاجتماعي الناتج عن معاينات جذابة يولد روابط خلفية وإشارات حركة مرور تعزز ترتيب البحث العضوي مع الوقت.
فائدة ترتيب غير مباشرة
متطلبات الصور الخاصة بكل منصة
لكل منصة اجتماعية أبعاد ونسب حجم وقيود حجم ملف موصى بها. الالتزام بها يمنع القص، التشويه، والعناصر النائبة البديلة.
| المنصة | الحجم الموصى به | نسبة العرض إلى الارتفاع | أقصى حجم للملف | الصيغة |
|---|---|---|---|---|
| 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 يحدث ذاكرة التخزين المؤقتة للينكدإن لعنوان URL الخاص بك ويعرض كيف ستبدو معاينة منشورك مع بيانات الميتا الحالية.
تحديث ذاكرة لينكدإن المؤقتة
الأخطاء الشائعة وكيفية إصلاحها
معظم مشاكل صور 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 لالتقاط لقطات شاشة لأي تقنية.