كيفية استخدام Facebook OpenGraph Debugger لإصلاح الأخطاء الشائعة

نشرت: 2020-08-25

Facebook Debugger هي أداة تمكنك من تحليل واستكشاف علامات OpenGraph لأي من صفحاتك. باستخدام المصحح ، يمكنك التركيز بسرعة على مصدر الأخطاء داخل المقتطفات المنسقة لوسائل التواصل الاجتماعي.

نظرًا لأن وسائل التواصل الاجتماعي ، والفيسبوك نفسه ، عنصران أساسيان في أي استراتيجية تسويقية ، فإن معرفة كيفية استخدام هذه الأداة يمكن أن يؤتي ثماره.

دعنا نتحدث عن Facebook Debugger و OpenGraph!

ما هو OpenGraph (وكيفية إضافة علامات في WordPress)

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

مثال على مقتطف منسق على Facebook.

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

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

حتى هذا المثال البسيط يتطلب منك إضافة علامات OpenGraph متعددة في الخلفية. للمقتطف المنسق ، تحتاج إلى استخدام العلامات التالية:

<meta property="og:title" content="Article Title"/>
<meta property="og:description" content="Article Description"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://example.com/link/to/article"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="og:image" content="http://example.com/image/src.jpg"/>

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

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

لسوء الحظ ، لا يتضمن الإصدار المجاني من Yoast SEO وظائف معاينة المقتطفات المنسقة. ومع ذلك، فإنه لا تمكنك من تعديل علامات OpenGraph المحتوى الخاص بك باستخدام محرر بسيط.

لو أنت تستخدم بالفعل Yoast SEO ، والاستفادة من وظائف OpenGraph هي أسهل طريقة للتأكد من أن مقتطفات الوسائط الاجتماعية الخاصة بك تبدو بالضبط بالطريقة التي تريدها.

لماذا يجب عليك استخدام Facebook Debugger لـ OpenGraph

يعد Facebook Debugger أداة يمكن أن تساعدك على ضمان عمل المقتطفات الثرية لوسائل التواصل الاجتماعي الخاصة بك بشكل مثالي في جميع المجالات. لاستخدامه ، ما عليك سوى زيارة صفحة Sharing Debugger لمطوري Facebook. هنا ، أدخل عنوان URL للصفحة التي تريد التحقق من علاماتها وانقر فوق الزر تصحيح :

مصحح أخطاء Facebook.

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

Facebook Debugger قيد التشغيل.

إذا قمت بالتمرير لأسفل أكثر ، يمكنك تحليل جميع علامات OpenGraph الخاصة بالصفحة:

قائمة علامات OpenGraph.

ضع في اعتبارك أن Facebook Debugger لا يمكّنك من إصلاح الأخطاء أو تعديل العلامات الخاصة بك مباشرةً. ومع ذلك ، فإنه يعرض لك معاينة لكيفية ظهور المحتوى الخاص بك على Facebook. الأهم من ذلك ، أنه يمنحك أيضًا تحذيرات إذا اكتشف أخطاء في علامات OpenGraph الخاصة بك:

تحذير في Facebook Debugger.

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

كيفية استخدام Facebook Debugger لإصلاح 3 أخطاء OpenGraph الشائعة

بالنسبة لهذا القسم ، سنعتمد في الغالب على Facebook Debugger. ومع ذلك ، إذا كنت تستخدم Yoast SEO ، فسوف نوضح لك أيضًا كيف يمكن أن يساعدك المكون الإضافي في إصلاح بعض أخطاء OpenGraph. دعنا نذهب اليها!

1. كشط عنوان URL مرة أخرى لتحديث الصور المرتبطة

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

أسهل طريقة للقيام بذلك هي استخدام وظيفة Facebook Debugger's Scrape Again . يمكنك العثور على هذا الخيار مباشرة أسفل متى وكيف تم حذف عنوان URL آخر مرة :

استخدام ميزة الكشط مرة أخرى.

انقر فوق الزر Scrape Again ومعرفة ما إذا كانت الصورة المميزة لصفحتك قد تغيرت في قسم Link Preview . إذا لم يحدث ذلك ، فإن النقر فوق الزر مرة أخرى يؤدي في بعض الأحيان إلى الحيلة (ليست تقنية عالية جدًا ، ولكنها تعمل!)

في حالة فشل تحميل الصورة ، فقد تتعامل مع مشكلة التخزين المؤقت على موقع الويب الخاص بك. في هذه الحالة ، سترغب في مسح ذاكرة التخزين المؤقت لموقعك ثم استخدام الزر Scrape Again لإجبار Facebook على تحديث معلومات الصورة الخاصة به.

2. إصلاح خطأ "الخصائص غير متوفرة بعد"

علامة og: image هي ما يستخدمه OpenGraph للإعلان عن ملف الصور الذي يجب أن تعرضه منصات الوسائط الاجتماعية لكل صفحة. في بعض الحالات ، قد تواجه الخطأ "og: خصائص الصورة غير متوفرة بعد".

تحذير علامة صورة OpenGraph.

هذا يعني أنه قد تكون هناك مشكلة في دقة صورتك المميزة. إذا كان حجم صورتك أقل من 200 × 200 ، فلن تعمل على الإطلاق.

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

صورة مميزة كبيرة.

إذا كنت تريد قراءة المزيد حول الصور وعلامة og: image ، فهناك مقال آخر على مدونة Elegant Themes. باختصار ، إذا قام Facebook Debugger بإرجاع خطأ متعلق بحجم صورتك ، فيمكنك عادةً إصلاحه باستخدام أحد هذين الأسلوبين:

  1. قم بتحديث الصورة المميزة للصفحة بإصدار أعلى دقة (والتزم باستخدام صور عالية الجودة من الآن فصاعدًا!).
  2. استخدم Yoast SEO للإشارة إلى ملف صورة مختلف داخل علامة الصورة og: image .

بالنسبة إلى Yoast SEO ، يمكنك العثور على خيار تغيير "صورة Facebook" الخاصة بك ضمن علامة التبويب Social للمنشور أو الصفحة التي تريد تحديثها:

تحميل صورة فيسبوك جديدة.

بمجرد تحديث صورتك أو العلامة المقابلة ، استخدم زر Scrape Again في Facebook Debugger. يجب أن يختفي التحذير "og: خصائص الصورة غير متوفرة بعد" ويجب أن يتم عرض صورتك بشكل صحيح.

3. أضف خاصية fb: app_id المفقودة إلى موقع الويب الخاص بك

دعنا نعود إلى التحذير الوارد سابقًا في المقالة:

مثال على خطأ Facebook Debugger.

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

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

بمجرد حصولك على معرف التطبيق ، يمكنك استخدام Yoast SEO لإضافته إلى صفحاتك باستخدام خاصية fb: app_id . للقيام بذلك ، انتقل إلى SEO> Social> Facebook علامة التبويب على موقعك وابحث عن حقل معرف تطبيق Facebook :

إضافة معرف تطبيق Facebook الخاص بك إلى WordPress باستخدام Yoast.

أضف معرف التطبيق الخاص بك ، واحفظ التغييرات في إعدادات المكون الإضافي وأنت على ما يرام. من الآن فصاعدًا ، يجب ألا يعرض Facebook Debugger أي أخطاء تتعلق بخاصية fb: app_id المفقودة .

استنتاج

يعد Facebook Debugger سهل الاستخدام بشكل ملحوظ. ومع ذلك ، يصعب فهم بعض الأخطاء التي قد تواجهها بدون فهم أساسي لعلامات OpenGraph. بشكل عام ، إذا كنت تستخدم مكونًا إضافيًا مثل Yoast SEO ، فلا داعي للقلق بشأن إعداد العلامات يدويًا.

باستخدام Facebook Debugger ، يمكنك استكشاف أخطاء OpenGraph وإصلاحها بسرعة عن طريق:

  1. كشط عنوان URL مرة أخرى لتحديث الصور المرتبطة.
  2. إصلاح الخطأ "og: خصائص الصورة ليست متاحة بعد".
  3. إضافة خاصية fb: app_id المفقودة إلى موقع الويب الخاص بك.

هل لديك أي أسئلة حول كيفية استخدام Facebook Debugger؟ دعنا نتحدث عنها في قسم التعليقات أدناه!

الصورة المصغرة للمادة بواسطة سيرجي تارجاسوف / shutterstock.com.