معاينة Open Graph

ما هي وسوم Open Graph؟

وسوم Open Graph عناصر meta في رأس الصفحة، مثل og:title وog:description وog:image، تخبر الشبكات الاجتماعية وتطبيقات المحادثة بما تعرضه عند مشاركة رابط الصفحة. يشترط البروتوكول (ogp.me) وجود og:title وog:type وog:image وog:url، وتضيف منصة X وسوم twitter:card الخاصة بها وتعود إلى Open Graph فيما عداها. وتقرأ أدوات جلب المشاركة HTML الذي يرسله الخادم دون تشغيل السكربتات، وتحتفظ بما تجده مؤقتاً.

كيفية استخدام معاينة Open Graph

1. أدخل عنوان الصفحة، أو الصق HTML الصفحة (يكفي رأسها head) — عند لصق HTML لا يُجلب شيء، ويُستخدم العنوان لحل الروابط النسبية فقط.
2. اختر عند الحاجة الجلب بصفة Googlebot أو متصفح جوال، للمواقع التي تقدّم لهما HTML مختلفاً.
3. اضغط «معاينة الوسوم».
4. اقرأ معاينة المشاركة، ثم أصلح ما تسرده قائمتا الخصائص الناقصة والتحذيرات، وأعد الفحص.

مزايا معاينة Open Graph

• يقرأ الصفحة عبر خادم متقن (بصفة فاحص متقن أو Googlebot أو متصفح جوال) أو HTML تلصقه
• يسرد كل وسوم og:* وarticle:* وproduct:* وtwitter:* في جدول يمكن تنزيله بصيغة CSV
• يعرض نصياً العنوان والوصف ورابط الصورة والنص البديل للصورة واسم الموقع والرابط ونوع البطاقة التي ستأخذها بطاقة المشاركة
• يسرد الخصائص الموصى بها الناقصة: og:title وog:type وog:image وog:url وog:description وtwitter:card
• يفحص الصورة: روابط نسبية أو بـ http:// أو data:، وعرض وارتفاع ناقصان أو صغيران، وصيغة SVG والأنواع غير المعتادة، وتعدّد وسوم og:image
• ينبّه إلى العناوين والأوصاف التي ستقتطعها المنصات، وog:url الذي يشير إلى مكان آخر، وقيم og:type غير المعروفة، وog:locale المشوّه، وtwitter:site بلا @
• لا يحمّل الصورة ولا يعرض الصفحة أبداً: كل شيء يظهر نصاً وروابط

المدخلات والمخرجات

المدخلات

• عنوان الصفحة — يُجلب عبر خادم متقن مع تتبّع حتى خمس عمليات إعادة توجيه؛ وهو أيضاً الأساس لحل الروابط النسبية في HTML الملصوق.
• أو HTML الصفحة ملصوقاً — يُقرأ في متصفحك دون جلب أي شيء.
• الجلب بصفة — فاحص متقن، أو User-Agent الخاص بـ Googlebot، أو User-Agent لمتصفح جوال.

المخرجات

• معاينة المشاركة (نص فقط) — العنوان والوصف ورابط الصورة بمقاسها المعلن والنص البديل للصورة واسم الموقع والرابط ونوع البطاقة، مع عدد المحارف.
• الملخص — عدد وسوم Open Graph ووسوم Twitter/X والصور والخصائص الناقصة والتحذيرات.
• الخصائص الناقصة والتحذيرات — ما يجب إضافته وما ستسيء المنصات عرضه.
• وسوم Open Graph ووسوم بطاقة Twitter/X والصور — كل وسم كما كُتب، وكل صورة معلنة بأبعادها ونوعها ونصها البديل.

مثال على معاينة Open Graph

رأس صفحة ملصوق فيه og:type product وog:title وog:description وog:url https://shop.example.com/sale/running-shoes وog:image /img/sale-running-shoes.jpg (1200×630) وtwitter:card summary_large_image وtwitter:site exampleshop

Title: Spring sale: 30% off running shoes (34 characters)
Image URL: /img/sale-running-shoes.jpg (1200×630 declared) · Site name: shop.example.com (from the host name) · Card type: summary_large_image
Open Graph tags 8 · Twitter/X tags 2 · Images 1 · Missing 0 · Warnings 3
og:image "/img/sale-running-shoes.jpg" is a relative URL; the Open Graph protocol requires an absolute URL and some scrapers do not resolve it.
No og:site_name; cards show the host name instead.
twitter:site "exampleshop" should be the @username.

كيف تقرأ نتائج معاينة Open Graph

القيمة 0 أمام «الناقصة» مع غياب تحذيرات الصورة تعني أن الوسوم تعلن كل ما تحتاجه البطاقة الكبيرة؛ أما الصورة نفسها فلا تُفحص، فافتح رابطها لتتأكد من أنها تُحمَّل. وكل خاصية ناقصة ستخمّنها المنصات، والتخمين أسوأ عادةً.

العنوان الذي يتجاوز 60–70 محرفاً والوصف الذي يتجاوز نحو 200 يُقتطعان في معظم البطاقات، والوصف الأقصر من 50 محرفاً يبدو فارغاً. ويبيّن عدد المحارف بجانب المعاينة موقعك من ذلك.

عبارة «مأخوذ من اسم المضيف» بجانب «اسم الموقع» تعني غياب og:site_name، فتعرض المنصات اسم المضيف المجرد بدل العلامة التجارية.

رابط الصورة النسبي أو الذي يبدأ بـ http:// أو data: سيفشل في بعض المنصات مع أن المتصفحات تعرضه؛ يجب أن يكون الرابط مطلقاً بـ https.

متى تستخدم معاينة Open Graph

• افحص صفحة الهبوط قبل الحملة ليظهر الرابط سليماً عند مشاركته في المحادثات والمنشورات.
• اعرف لماذا يظهر الرابط المشارك بلا صورة أو بعنوان خاطئ، ثم أعد جلبه في أداة تصحيح المنصة بعد الإصلاح.
• راجع الوسوم التي يولّدها نظام إدارة المحتوى أو قالب المتجر الإلكتروني لصفحات المقالات والمنتجات.
• قارن الوسوم المقدّمة لمتصفح جوال وللزاحف في المواقع التي تغيّر HTML بحسب User-Agent.

استكشاف الأخطاء وإصلاحها

• لا توجد وسوم مع أنها تظهر في أداة الفحص بالمتصفح: يضيفها JavaScript بعد التحميل، وأدوات جلب المشاركة لا تشغّل السكربتات كذلك؛ أنشئ الوسوم على الخادم.
• الرسالة "The URL returned image/jpeg, not an HTML page": أدخلت رابط الصورة. أدخل الصفحة المراد مشاركتها.
• الصفحة ترد بـ 403 أو بصفحة تحقّق: الموقع يحظر العملاء الآليين. الصق HTML من خيار «عرض المصدر» في متصفحك بدلاً من ذلك.
• الصورة صحيحة هنا وخاطئة في المنصة: المنصة تحتفظ بنسخة قديمة. استخدم أداة التصحيح فيها لجلب الصفحة من جديد.

الأسئلة الشائعة حول معاينة Open Graph

ملاحظات تقنية

تُقرأ الوسوم من عناصر meta حسب property أو name، وتفوز أول قيمة لكل خاصية كما يحدد بروتوكول Open Graph (ogp.me) لأدوات الجلب. وترتبط og:image:width وheight وtype وalt وsecure_url بوسم og:image الذي يسبقها، فيمكن للصفحة أن تعلن عدة صور لكلٍّ منها أبعادها.

تتبع المعاينة ترتيب البدائل الذي تتبعه معظم أدوات جلب المشاركة: og:title ثم twitter:title ثم عنصر title؛ وog:description ثم twitter:description ثم meta description؛ وog:image ثم twitter:image. وتُحل الروابط النسبية نسبةً إلى عنوان الصفحة وأي عنصر base.

يُقرأ HTML بمحلّل رموز لا يبني DOM ولا يشغّل سكربتات، بحد 2 ميغابايت و5,000 وسم؛ وتُقرأ الصفحة المجلوبة حتى 512 كيلوبايت، وهو ما يشمل دائماً رأس أي صفحة عادية.

الحدود ومنهجية القياس

المعاينة إعادة بناء نصية لا نسخة مطابقة لبطاقة أي منصة: فكل منصة تقص البطاقات وتقتطعها وتنسّقها بطريقتها وتغيّر ذلك دون إعلان.

لا تُنزَّل الصورة، فلا يُتحقق من مقاسها الحقيقي ولا صيغتها ولا توافرها — بل مما تعلنه الوسوم فقط.

تُجلب الصفحة مرة واحدة من خادم متقن بواحدة من ثلاث قيم ثابتة لـ User-Agent. والمواقع التي تقدّم لأدوات جلب المشاركة (facebookexternalhit وTwitterbot وLinkedInBot) HTML مختلفاً قد تُظهر لها وسوماً أخرى.

الأمان والخصوصية

تُقرأ الوسوم في متصفحك، من HTML تلصقه أو من الصفحة التي جلبها خادم متقن بواحدة من ثلاث قيم ثابتة لـ User-Agent. ولا يصل إلى الخادم إلا عنوان الصفحة، ولا يحتفظ بالعنوان ولا بـ HTML.

لا تُعرض الصفحة ولا تُحمَّل صورها أبداً، فلا يتصل متصفحك بخوادم الصفحة أو أدوات التتبع فيها لمجرد فحصها.

المراجع

• The Open Graph protocologp.meخصائص og: في عناصر meta التي تصف بها الصفحة نفسها عند مشاركتها: الأربع الإلزامية (og:title وog:type وog:image وog:url)، والاختيارية، وخصائص الصورة المنظّمة، وأنواع الكائنات، وكيف تُقرأ الخصائص المكرّرة.
• HTML Living StandardWHATWGلغة HTML، بما فيها مراجع المحارف المسماة (الكيانات) وقواعد التحليل التي تتبعها المتصفحات.