معاينة Open Graph — تحقق من بطاقات المشاركة الاجتماعية
تحدد وسوم Open Graph شكل صفحتك في كل مرة تُشارك فيها، وغياب الصورة أو العنوان يكلفك نقرات ومشاركات. الصق وسوم og:/twitter:card أو عنوان URL لمعاينة بطاقة المشاركة على فيسبوك وX وواتساب، واكتشف الحقول الناقصة واضبط نسبة الصورة. الخطوات: الصق الوسوم أو أحضر URL، واقرأ البطاقات الثلاث وجدول الحقول، ثم أكمل الناقص. وضع اللصق يعمل على جهازك؛ وضع URL يجلب الصفحة مرة واحدة ولا يخزنها. مثال: صفحة تحتوي og:image بحجم 1200×630 تتم مشاركتها كبطاقة كبيرة.
كيف يعمل
تحلل المعاينة وسوم og:/twitter: التي تلصقها (أو تستخرجها من HTML المجلوب من URL) وترسم ثلاث بطاقات مشاركة. تعرض فيسبوك الصورة بنسبة 1.91:1 على اليسار مع العنوان والوصف والنطاق أسفلها. تتبع X قيمة twitter:card: summary_large_image تعرض صورة كبيرة بالأعلى، وsummary صورة صغيرة بجانب النص. تطبيقات المراسلة مثل واتساب تعرض بطاقة كبيرة واحدة. يميز جدول الحقول og:title وog:description وog:image كإلزامية ويسرد الاختيارية.
القواعد التي تتبعها المعاينة
هذه أحجام الصور وآليات الاسترجاع التي تستخدمها المنصات، وفقًا لبروتوكول Open Graph ووثائق X Cards.
- الحقول الإلزامية: og:title وog:description وog:image. تُعلَّم الناقصة حتى تصححها قبل النشر.
- حجم og:image 1200×630 بكسل (1.91:1) يعمل على كل المنصات الرئيسية. تدعم فيسبوك الآن أيضًا قصّات 2:1 و1:1؛ الصور الصغيرة جدًا غالبًا تُكبَّر وتظهر ضبابية.
- twitter:card بنوع summary_large_image يقتضي صورة كبيرة، وsummary صورة صغيرة. بدون twitter:card تستنتج المنصات بطاقة summary من وسوم og:.
- عند غياب og:title أو og:image، تسترجع المنصات عنوان HTML ووصف meta وأول صورة في الصفحة.
- يُقاس حجم الصورة بتحميلها في المتصفح؛ إذا تعذّر التحميل (محجوبة أو غير متصلة أو عنوان خاطئ) يبلّغ الفحص بـ«غير معروف».
مثال
تصف وسوم المثال مقالة مدونة تحتوي og:image بحجم 1200×630 وtwitter:card بنوع summary_large_image. تعرض المعاينة بطاقة فيسبوك مع الصورة يسارًا، وبطاقة X كبيرة، وبطاقة بأسلوب واتساب، وجدول وسوم تكون فيه كل الحقول الإلزامية موجودة.
حالات استخدام مناسبة
- قبل نشر مقالة أو صفحة هبوط، الصق الوسوم مرة واحدة وتأكد من ظهور بطاقة المشاركة بشكل صحيح على فيسبوك وX وتطبيقات المراسلة.
- عندما لا يظهر رابط مشترك بأي صورة أو تظهر مقطوعة، الصق وسوم og: لمعرفة ما إذا كانت og:image ناقصة أم نسبتها خاطئة.
- بعد تحديث نظام إدارة المحتوى أو القالب، اجلب عنوان URL الحي وتحقق من أن وسوم og: ما تزال مطابقة للصفحة.
Frequently asked questions
ماذا يحدث إذا لم تحتوِ الصفحة على وسوم Open Graph؟
تبني فيسبوك وX وواتساب المعاينة من عنوان HTML ووصف meta وأول صورة في الصفحة. قد تكون البطاقة غير مكتملة أو تعرض صورة خاطئة، ولهذا توجد الحقول الإلزامية og:.
ما الحجم المناسب لـ og:image؟
الحجم الآمن هو 1200×630 بكسل، بنسبة 1.91:1 تقبلها كل المنصات الرئيسية. تدعم فيسبوك الآن أيضًا قصّات 2:1 و1:1. الصور الصغيرة جدًا تُكبَّر غالبًا وتبدو ضبابية.
كيف ترتبط twitter:card بوسوم og:؟
تحدد twitter:card التخطيط: summary_large_image تعرض صورة عريضة، وsummary صورة صغيرة. عند غياب twitter:title أو twitter:description أو twitter:image، تسترجع X الوسم og: المقابل.
ماذا تفعل المنصة عند غياب og:image؟
تسترجع أول صورة في HTML الصفحة، أو تعرض البطاقة بدون صورة. غياب og:image هو السبب الأكثر شيوعًا لظهور رابط مشترك بدون صورة معاينة.
لماذا يبلّغ فحص النسبة بـ«غير معروف»؟
تحاول المعاينة تحميل og:image عبر تحميل صورة في المتصفح لقراءة حجمها الفعلي. إذا كانت الصورة محجوبة أو غير متصلة أو بطيئة أو رفضها الخادم، يتعذّر قراءة الحجم فيُبلَّغ «غير معروف».
هل تُرفع وسومي إلى أي مكان؟
لا. في وضع اللصق يتم التحليل والمعاينة على جهازك. وضع URL يجلب الصفحة مرة واحدة عبر عاملنا ولا يخزنها.
استفسارات أو ملاحظات
هل هناك غموض أو خلل أو نقص؟ اكتب رسالة أدناه — نقرأ كل ملاحظة عن هذه الأدوات.