التعريف بعلامات الوصف Open Graph الخاصة بالفيس بوك

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

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

  للنشر الصحيح على شبكة الفيسبوك وضعت فيسبوك بروتوكول أوبن قراف Open Graph Protocol والهدف ببساطة هو وضع آلية بين المواقع والفيسبوك لفهم المحتوى وخصائصة ، أتذكر قبل أعوام جربت استخدام إضافات النشر التلقائي على فيسبوك ويتوتر وسرعان ما أعرضت عنها لأنها تعرض صور الايقونات الصغيرة وأحياناً صورة الملف الشخصي! ، ولم يكن بروتوكول ابن قراف موجود حينها! 

سأشرح هنا بعمق كافي لفهم ما لا يسعنا جهله في أوسمة بروتوكول الأوبن قراف OGP ، عرض كود الميتا تاق الخاص بمدونات البلوقر والذي سيجلها مهيئه تماماً لنشر التدوينات على الفيسبوك بلا مشاكل أو تعارض سواء لصفحات المقالات أو الصفحة الرئيسية ، التعرض لبيان بعض الإعدادت الدقيقة للتغلب على بعض عيوب النشر!

  أهم أوسمة ميتا تاج OGP وخصائصها 

إذا قمت بنشر موضوع بشكل سليم على الفيسبوك فسيظهر كما في الصور :

ومن خلال الصورة يمكن تحديد ثلاث أوسمه اوبن قراف ضرورية جداً وليست الوحيدة ، وفيما يلي تفصيلها:

1. وسم الصورة الرئيسية og:image :

<meta content='رابط الصورة' property='og:image' />

كيف تختار مقاس وحجم الصورة ؟

• لعرض الصورة بجودة عالية وحجم كبير : استخدم صورة بمقاس لا يقل عن ( 1200 في 630 ) بيكسل.
• لعرض الصورة بحجم صغير : استخدم صورة بمقاس أقل من ( 600 في 315 ) بيكسل .
• هل لاحظت نسبة العرض إلى الإرتفاع ؟ : نعم هذه النسبة  ( 1.9 ) حافظ على نسبة قريبة منها وسوف تنشر الصورة بشكل كامل سواء بحجمها الكبير أم الصغير.   الاخلال بهذه النسبة بين العرض والارتفاع سيجل الصور تظهر مشطوفة.
• متى يتجاهل الفيسبوك الصور؟ : إذا كان المقاس أقل من 200x200 بيكسل ، وحسب تجربتي أحياناً يتجاهل مقاسات أكبر من هذا خصوصاً عند وجود صور أخرى في الموضوع كبيرة الحجم فالأفضل الابتعاد عن الاحجام الصغيرة!
• حجم الصورة : لأي مقاس فسيبوك لا يقبل صورة بحجم أكبر من 8 ميقابايت 

← تنبيه: من الان فصاعداً عليك اختيار مقاس محدد وثابت لصور تدويناتك الرئيسية ، أنا مثلاً اخترت 800 في 420 بيسكل وهي موافقة للنسبة 1.9 .

← تنبيه مهم: بلوجر تلقائياً يولد هذا الوسم لبروتوكول اوبن قراف بالنسبة لرسائل المدونة ، وهذا شيء جميل ولكن للأسف بلوجر مشكلتها أنها لا توفر دليل شامل رسمي وكثير من الخصائص عليك اكتشافها بنفسك ، ومن اللطيف الذي اكتشفته أثناء تجربتي لأكواد مختلفة للوصول لتركيبة متكامله أن يلوجر تستخدم المفتاح أو المحدد (w1200-h630-p-nu) وذلك في رابط الصورة لإجبار فيسبوك على التقاطها بالمقاس الكبير وبجودة عالية ، ولكن بما أن المستخدم لا يعلم عن هذه الميزه فهو يستخدم صور لا تتوافق وبالتالي تظهر مشطوفة وغير كاملة !

2. وسم العنوان og:title :

<meta content='العنوان' property='og:title' />

خاص بعنوان الموقع أو عنوان المواضيع، يفضل أن يكون خالياً من العلامات التجارية أو اسم الموقع، فقط عنوان الموضوع أو عنوان الموقع إذا كانت الصفحة الرئيسية. إذا لم تقم بإضافة هذا الوسم فإن الفيسبوك سيستخدم علامة وصف العنوان العادية بدلاً منه، أقصد :  <title>  ولكنه سيسجل رسالة تحذير عند استخدام أداة التصحيح Open Graph Debugger التي سبق أن شرحنا ضرورتها هنا :  ضروري: تصحيح أخطاء روابط ومعلومات مدونتك وما يتعلق بها من إضافات الفيسبوك كزر الإعجاب والنشر

3. وسم الوصف og:description :

<meta content='وصف المحتوى' property='og:description' />

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

4. وسم الرابط og:url  :

<meta content="رابط" property="og:url" />

هذا الوسم عادة لن تواجه فيه أي مشاكل ، وهو كذلك يتم توليده تلقائياً بالنسبة لمدونات بلوجر ( روعه البلوجر )

  أداة تصحيح الأخطاء للتأكد من الميتا تاج

يجب أن تحفظ صفحة الأداة Open Graph Debugger في المفضلة ، فسوف تحتاجها كثيراً للتأكد من أن فيسبوك يقرأ محتوى موقعك كما يجب ، كذلك عندما تقوم بتحديث محتوى قديم عليك وضع الرابط واعادة ارسال عنكبوت فيسبوك لجلب المحتوى الجديد.

من المهم عند وضع الرابط وضغط زر التصحيح التأكد من وقت الجلب ، إذا كان قديماً فعليك الضغط على الزر "Scrap Again"  

الآن يمكنك قراءة الأوسمة التي جلبها فيسبوك من موقعك والتأكد من أن جميع المعلومات صحيحة وخالية من الأخطاء ، أما رسائل التحذير فغالباً لا تهم.

← قد يظهر لك رسالة خطأ عدم وجود الوسم (fb:app_id) أي رقم معرف تطبيق الموقع في الفيسبوك وهذا سيكون متوفر في حالة استخدمنا نظام التعليقات الخاص بالفيسبوك مثلاً ، ولكن ما الضرورة إذا لم استخدمه ؟ أعتقد أنه لا وجه لاعتباره رسالة خطأ.

  مشكلة عدم ظهور الصورة في "أول إرسال" !

عنكبوت فيسبوك (الكسول) يجب أن يقرأ الصورة مرة واحد قبل عرضها في صفحاته ، هذه المرة ستكون عند أول مشاركة! يقوم بها شخص ، حتماً سيشكل هذا مشكل عند استخدام إضافة نشر تلقائي . ولحل هذه المشكلة :

الطريقة الأولى: استخدام أداة التصحيح . ( الم أقل لكم أنها مهمه ) ، ولكن هذا ليس حلاً عملياً للمواقع ذات معدل النشر العالي.

الطريقة الثانية: استخدام وسمان يحددان مقاس الصورة ليتعرف عليها عنكبوت فيسبوك مباشرة :

  <meta property="og:image:width" content="800" />

  <meta property="og:image:height" content="420" />

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

▬ انتهى ▬

مصدر مهم

Sharing Best Practices for Websites

إن شاء الله في تدوينة قادمة سأعرض تهيئة مدونات البلوجر للنشر على فيسبوك

مع الشرح المفصل لكل سطر