انتقل إلى المحتوى
SEO Madmanby Adam Hafez
أداة مجانية

معاينة بطاقات المشاركة على Facebook وX

شاهد كيف تبدو قيم og:title والوصف والصورة كبطاقة مشاركة على Facebook وLinkedIn وX قبل النشر. أداة مجانية تعمل في متصفحك.

تعمل بالكامل في متصفحك. لا يُرفع ما تُدخله، ولا يُسجَّل، ولا يُحفظ.

لا يفرض بروتوكول Open Graph نسبة أبعاد للصورة، بل يعرّفog:image:width و og:image:height كبيانات وصفية اختيارية. والصورة الأفقية تظهر بأفضل شكل، لأن كل بطاقة بصورة كبيرة هنا تقصّها داخل إطار عريض.

لا توجد صورة

أهم النقاط

  • لا يضع بروتوكول Open Graph على ogp.me أي حد لعدد أحرف og:title أو og:description، ولا نسبة أبعاد مطلوبة للصورة.
  • تبني Facebook معاينة الرابط من og:url وog:title وog:description وog:image، كما تقول مستنداتها عن المشاركة.
  • تنصح Facebook بإبعاد العلامة التجارية، مثل اسم الموقع، عن og:title، لأن og:site_name يحملها وحده.
  • تخزّن Facebook الصورة المشتركة مؤقتًا حسب عنوانها، فالصورة المستبدلة تحتاج إلى عنوان جديد لتتغير المعاينة.
  • العدّادات في هذه الأداة أرقام إرشادية لا حدود موثّقة، فتعامل مع التحذير كتنبيه إلى الاختصار.

ما تحتاج إليه

  • قيمة og:title
  • قيمة og:description
  • عنوان og:image
  • اسم الموقع
  • نوع البطاقة، Facebook/LinkedIn أو summary_large_image في X

أدوات أخرى

كلها مجانية، وكلها تعمل في المتصفح.

تصفّح الأدوات

طريقة الاستخدام

  1. 1الصق العنوان والوصفاستخدم قيمتي og:title وog:description كما هما في الصفحة، لا عنوان H1 ولا الوصف التعريفي، لأنهما حقلان منفصلان قد تلجأ إليهما المنصات كبديل.
  2. 2الصق عنوان صورة حقيقيًاتحمّل المعاينة الصورة الفعلية في متصفحك. والعنوان الفارغ أو المعطّل يعرض خانة محايدة بدل صورة مزيفة.
  3. 3بدّل نوع البطاقةتبني Facebook بطاقتها من وسوم og:، أما X فلها وسوم twitter: الخاصة بها، لذلك اضبط الاثنين على القيم نفسها وافحص وضع X أيضًا.
  4. 4راقب عدّادات الأحرفهي إرشاد عملي فقط. لا Open Graph ولا أي منصة تنشر حدًا دقيقًا للأحرف، فتعامل مع العدد كإشارة لا كقاعدة.

تُبنى بطاقة الرابط المشترك من وسوم meta في رأس الصفحة، لا من المقالة التي يراها القارئ. وتعرض هذه الأداة تلك القيم كبطاقة، لتفحص الصياغة والطول وقص الصورة قبل أن يُنشر الرابط.

ماذا تعرض المعاينة؟

تدخل خمسة أشياء: اسم الموقع، وعنوان URL للصفحة، وog:title، وog:description، وعنوان og:image. وترسم البطاقة خانة الصورة فوق اسم الموقع والعنوان والوصف. وإذا كان اسم الموقع فارغًا، تعرض البطاقة اسم النطاق من العنوان بدلًا منه، دون www. في أوله.

يعرّف بروتوكول Open Graph الخصائص og:title وog:type وog:image وog:url كخصائص أربع مطلوبة، وog:description وog:site_name كخصائص اختيارية. ولا يحدد طولًا لأي منها.

ويذكر دليل المشاركة من Facebook أن og:url وog:title وog:description وog:image هي الوسوم التي يقرؤها لمعاينة الرابط. ويصف العنوان بأنه عنوان المقالة دون علامة تجارية مثل اسم الموقع، والوصف بأنه عادة من جملتين إلى أربع.

يبدّل زران نوع البطاقة: Facebook / LinkedIn، وsummary_large_image في X. ويبقى تصميم البطاقة نفسه في الوضعين، وما يتغير هو إرشاد العدّاد ولوحة الوسوم التي تذكر الوسوم التي يعتمد عليها كل وضع.

كيف تقرأ النتائج؟

  • العدّادات. يعرض كل حقل طوله وإرشادًا، مثل 64 حرفًا (الإرشاد: ~90). والإرشادات هنا نحو 90 حرفًا للعنوان و200 للوصف في وضع Facebook / LinkedIn، ونحو 70 و200 في وضع X.
  • لماذا هي إرشادات. لا تنشر أي منصة هذه الأرقام، فالعدد الذي يتجاوز الإرشاد يتحول إلى لون التحذير كتنبيه إلى المراجعة، لا كفشل.
  • خانة الصورة. تُقص الصورة لتملأ إطارًا عريضًا، فالصورة الأفقية تظهر أكثر أجزائها. وعبارة لا توجد صورة تعني أن الحقل فارغ.
  • تعذّر تحميل الصورة. تعني أن العنوان خطأ، أو أن الخادم رفض الطلب، وقد يفشل برنامج الزحف لدى المنصة بالطريقة نفسها.
  • لوحة الوسوم. تذكر نوع البطاقة والوسوم التي يعتمد عليها ذلك الوضع.

مثال عملي

تبدأ الأداة باسم الموقع SEO Madman، وعنوان إحدى قصصنا الإخبارية، وعنوان من 72 حرفًا عن عرض Search Console لمرات الظهور من ميزات Google للذكاء الاصطناعي، ووصف من 156 حرفًا. وحقل الصورة فارغ.

تعرض البطاقة اسم الموقع والعنوان كاملًا والوصف كاملًا تحت خانة مكتوب فيها لا توجد صورة. ويقرأ العدّادان 72 حرفًا (الإرشاد: ~90) و156 حرفًا (الإرشاد: ~200)، فلا يظهر أي تحذير.

بدّل إلى X فينخفض إرشاد العنوان إلى ~70، ويتحول عدّاد العنوان إلى لون التحذير لأن 72 حرفًا تتجاوزه. احذف حرفين فيصبح 70 حرفًا (الإرشاد: ~70) ويعود العدّاد إلى لونه العادي.

أخطاء شائعة تكشفها

  • صورة مفقودة. ترك og:image فارغًا يترك البطاقة بخانة فارغة. ويعدّ بروتوكول Open Graph og:image مطلوبة، فالصفحة التي تخلو منها ناقصة، لا مجرد بسيطة.
  • عنوان صورة معطّل أو محجوب. المسار النسبي أو الخطأ المطبعي أو الخادم الذي يرفض الطلبات الخارجية يُظهر هنا تعذّر تحميل الصورة قبل أن يفشل في مشاركة حقيقية.
  • العلامة التجارية في العنوان. العنوان المنتهي بفاصل واسم الموقع يكرر ما يعرضه og:site_name أصلًا، وينصح دليل Facebook بتجنبه، كما أنه يستهلك الطول الظاهر.
  • صورة عمودية. الصورة الطويلة تخسر أغلب ارتفاعها في بطاقة عريضة. افحص القص واستخدم نسخة أفقية إذا قُطع الموضوع.
  • صورة مستبدلة لا تتحدث. تخزّن Facebook الصور مؤقتًا حسب العنوان، فاستبدال الملف على العنوان نفسه لا يغيّر المعاينة. امنح الصورة الجديدة عنوانًا جديدًا.

أدوات وقراءات ذات صلة

المصادر

  1. 1.The Open Graph protocol، Open Graph Protocolمصدر أساسي
  2. 2.A guide to sharing for webmasters، Meta for Developersمصدر أساسي

أسئلة شائعة

ما الحد الرسمي لأحرف og:title وog:description؟

لا يوجد حد. لا يعرّف بروتوكول Open Graph على ogp.me حدًا للأحرف في أي من الخاصيتين. وتقصّ المنصات النص في عرضها الخاص دون أن تنشر نقطة القص، فأي رقم محدد تقرؤه في مكان آخر تقدير مرصود لا قاعدة موثّقة.

ما الحجم الموصى به لصورة og:image؟

يعرّف البروتوكول og:image:width وog:image:height كبيانات وصفية اختيارية للصورة التي تقدّمها، لا كشرط ولا كنسبة موصى بها. وينصح دليل المشاركة من Facebook بتحديد الاثنين لتُحمَّل الصورة جيدًا من أول مشاركة.

لماذا ما زالت الصورة القديمة تظهر بعد تغييرها؟

يقول دليل المشاركة من Facebook إن الصور تُخزَّن مؤقتًا حسب عنوانها، ولا تتحدث إلا إذا تغيّر العنوان. انشر الصورة الجديدة على عنوان جديد، ثم استخدم Sharing Debugger من Facebook لترى ما يجلبه برنامج الزحف الآن.

ما الفرق بينها وبين أداة فحص Open Graph؟

أداة الفحص تتحقق من وجود الوسوم المطلوبة وسلامة بنيتها. أما هذه الأداة فبصرية، تعرض شكل النص والصورة اللذين تدخلهما كبطاقة، مع إرشادات الطول، لتحكم على القص والاقتطاع قبل النشر.

هل تقرأ الأداة الوسوم من صفحة حقيقية؟

لا. تكتب كل قيمة أو تلصقها، وتُرسم المعاينة في متصفحك مما أدخلته. ولا يُجلب شيء سوى عنوان الصورة الذي تقدّمه، إذ يحمّله متصفحك ليعرضه في البطاقة.

الأدوات

فحص وسوم Open Graph المطلوبة

افحص وسوم og الملصوقة بحثًا عن الخصائص الأربع المطلوبة، والعناوين النسبية، والتكرار، وقيمة og:type. أداة مجانية تعمل في متصفحك.