أقوم بالترحيل من 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 موجودة:
og:image:width- العرض الفعلي للصورة بالبكسلog:image:height- الارتفاع الفعلي للصورة بالبكسلog:image:type- نوع MIME (image/jpeg، image/png، إلخ)
نظرًا لأن Discourse يقوم بالفعل بمعالجة الصور وتحسينها، فإنه يمتلك إمكانية الوصول إلى هذه المعلومات ويمكنه تضمينها بسهولة في مخرجات OpenGraph.
التأثير
سيؤدي هذا إلى تحسين مشاركة المحتوى على وسائل التواصل الاجتماعي لجميع مواقع Discourse، مما يجعل الروابط المشتركة أكثر جاذبية من الناحية البصرية ويزيد من التفاعل عند مشاركة محتوى Discourse على فيسبوك ولينكدإن والمنصات الأخرى التي تستهلك بيانات OpenGraph.
سيتم إصلاح هذا بواسطة