إضافة og:image:width و og:image:height و og:image:type إلى وسوم OpenGraph

ساهم ميزة
1

أقوم بالترحيل من phpBB إلى Discourse واكتشفت أن تطبيق OpenGraph الخاص بـ Discourse يفتقر إلى بعض العلامات المهمة التي تعتمد عليها فيسبوك (Facebook) للعرض الصحيح للصور.

المشكلة

عند مشاركة مواضيع Discourse على فيسبوك، لا تظهر الصور في معاينة الرابط. ومع ذلك، عند مشاركة منشورات phpBB من المنتدى نفسه، تظهر الصور بشكل صحيح.

باستخدام أداة فحص المشاركة الخاصة بفيسبوك (Facebook’s Sharing Debugger)، وجدت ما يلي:

ما يتضمنه phpBB:

<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="768">
<meta property="og:image:type" content="image/jpeg">

ما يتضمنه Discourse:

<meta property="og:image" content="https://example.com/uploads/.../image.JPG" />

تُظهر أداة الفحص الصورة بشكل صحيح وتعيد رمز الحالة HTTP 200، لكن فيسبوك لن يعرضها في معاينة المشاركة الفعلية بدون بيانات الأبعاد والنوع الوصفية.

أهمية هذا الأمر

وفقًا لـ مواصفات بروتوكول OpenGraph:

تحتوي علامة og:image على العديد من الخصائص المهيكلة الاختيارية بما في ذلك og:image:width و og:image:height و og:image:type

على الرغم من أن هذه الخصائص اختيارية تقنيًا، يبدو أن زاحف فيسبوك (Facebook’s crawler) يتطلبها أو يفضلها بشدة للعرض الموثوق للصور. يتم توثيق هذا في مصادر مختلفة ويؤثر على مشاركة المحتوى على وسائل التواصل الاجتماعي لجميع مجتمعات Discourse.

الحل المقترح

يجب على Discourse إضافة علامات التعريف الثلاث الإضافية هذه تلقائيًا كلما كانت علامة og:image موجودة:

  1. og:image:width - العرض الفعلي للصورة بالبكسل
  2. og:image:height - الارتفاع الفعلي للصورة بالبكسل
  3. og:image:type - نوع MIME (image/jpeg، image/png، إلخ)

نظرًا لأن Discourse يقوم بالفعل بمعالجة الصور وتحسينها، فإنه يمتلك إمكانية الوصول إلى هذه المعلومات ويمكنه تضمينها بسهولة في مخرجات OpenGraph.

التأثير

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

سياق إضافي

6 إعجابات
2

شكرًا على التقرير @shortmort37 :+1: سيتم إصلاح هذا بواسطة

6 إعجابات
4

شكرًا لك على معالجة هذا الأمر!

ولكن، هل يمكنك إخباري لماذا لن يتم تضمين og:image:type؟ phpBB يضمه.

دان

3 إعجابات
6

لأنني أسأت قراءة المواصفات وظننت أنها اختيارية… ولكن بما أن عرض الصورة وارتفاعها كذلك، فلا أرى سببًا لعدم إضافتها أيضًا.

6 إعجابات
7

يتكامل هذا الآن بشكل جيد جدًا مع فيسبوك مع آخر تحديث لـ Discourse. شكرًا جزيلاً لك!

-دان

4 إعجابات
8

أرغب في تقديم المزيد من الثناء. لقد قمت مؤخرًا بنشر مكون السمة “صور مصغرة لقائمة المواضيع” الممتاز للغاية الخاص بـ David Taylor. من الرائع أنني أستطيع إنشاء صورة مصغرة لتصاحب أي موضوع - وعلاوة على ذلك، يمكنني اختيار الصورة التي سيتم إنشاء تلك الصورة المصغرة منها باستخدام علامة “|thumbnail” في نهاية تعريف الصورة.

ربما يرجع ذلك إلى أن البنية التحتية الأساسية تعتمد على هذه العلامة لخاصية og:image وكذلك لمكون السمة؛ ولكنني سررت عندما اكتشفت أنه عندما قمت بتغيير الصورة المصغرة، تغيرت خاصية OpenGraph لـ og:image أيضًا، وبالتالي ما تم عرضه في فيسبوك. عصفورين بحجر واحد، وما إلى ذلك! :zany_face:

عمل رائع!
دان