تأثير بروتوكول Open Graph على SEO

ما هي وسوم Open Graph؟

وسوم meta أو بروتوكول Open Graph أنشأته Facebook، وهو يجعل أي صفحة ويب تظهر بصيغة غنية على الشبكات الاجتماعية. تتولى هذه الوسوم HTML عرض محتوى الصفحة المُشاركة على الشبكات الاجتماعية (العنوان، الوصف، صورة الصفحة...). إذا لم توجد هذه الوسوم أو لم تُحدَّد، فستظهر المعلومات بشكل عشوائي. ستُلتقَط صورة عشوائية، أو عنوان أو وصف غير وصفي...

ما فائدتها؟

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

استُخدم بروتوكول Open Graph في البداية في Facebook ويُعترف به الآن أيضاً في LinkedIn. أما وسوم Twitter فهي حصرية لتلك الشبكة الاجتماعية.

الوسوم هي:

og:title:

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

مثال:

<meta property="og:title" content="ما هي وسوم Open Graph؟"/>

og:description

"Meta description" هو الذي يصف ويُعلِم بصورة أوسع عن الصفحة. لا ينبغي أن يتجاوز 155 حرفاً، ويمكن أن يحوي عبارة أو CTA يحفّز المستخدم على النقر على النتيجة. يجب أيضاً أن يكون فريداً في كل صفحة.

مثال:

<meta property="og:description" content="هل تعرف كيف يبدو موقعك عندما يشاركه المستخدمون من ملفاتهم الاجتماعية؟ تتولى وسوم Open Graph عرض كل المعلومات."/>

og:url:

يُعرض عنوان URL لصفحة الويب، ويمكن أن يظهر بصيغة مختصرة. حاول استخدام هذا الوسم بـ URLs نظيفة قدر الإمكان وفريدة لكل صفحة.

مثال:

<meta property="og:url" content="/blog/open-graph" />

og:image

يجب تحديد عنوان URL للصورة كي تظهر في كل صفحة. وهذا أحد أكثر الأمور إغفالاً وأهمية. Google Discover، Google News، Facebook، Twitter، LinkedIn... كلها ستلتقط هذه الصورة كطُعم للمستخدم، وإن كانت ذات جودة، فيمكن أن تجلب زيارات كثيرة. وإلا فترك الحقل فارغاً قد يؤدي لظهور صورة الكاتب، أو حقل فارغ... اختر الأفضل! ;)

مثال:

<meta property="og:image" content="/blog/images/open-graph.jpg" />

og:video

إذا كانت الصفحة تحوي فيديو، فيجب تحديده عبر هذا الوسم لتسهيل تفسيره.

<meta property="og:video" content="http://example.com/bond/trailer.swf" />

og:type

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

مثال:

<meta property="og:type" content="article" />

og:site_name

يتيح لك تحديد الموقع كي تظهر العلامة التجارية.

<meta property="og:site_name" content="SEOcrawl" />

أنواع وسوم meta الاجتماعية الموجودة

حالياً، تستخدم وسوم Facebook شبكات اجتماعية أخرى مثل LinkedIn. أما Twitter فيستخدم ما يُعرف بـ Twitter Cards. مع هذه الوسوم لديك ثلاثة خيارات:

• ›

  "Photo" للصور

• ›

  "Player" للفيديوهات

• ›

  "Summary" لكل ما عدا ذلك

في هذه الحالة، كما هو الحال مع بطاقات Open Graph، إن لم تُحسَّن، فسيُعرض محتوى أساسي وغير مُحسَّن.

أدوات لاختبار الوسوم

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

Twitter Card Validator

أداة التحقق من Twitter هي Twitter Card Validator. إن أردت التحقق قبل نشر أي شيء من ظهور كل شيء بشكل صحيح، فلا تتردد في إدخال عنوان الـ URL الذي ستشاركه. مفيدة جداً أيضاً عند تحديث صورة الصفحة بينما يبقى الـ feed يعرض القديمة. عند إعادة التحليل، تعمل كأنها "تنظيف للذاكرة المؤقتة".

Facebook Debugger

تُعرف أداة التصحيح من Facebook بـ Facebook Debugger. تتيح رؤية المعلومات المُستخدَمة وكيف ستبدو صفحات الموقع عند مشاركتها. كما تُحذّرك من أي حقل خاطئ أو مفقود.

Google Structured Data Testing Tool

تقدم Google أيضاً أداة لاختبار البيانات المُهيكَلة تُسمى Google Structured Data Testing Tool. مفيدة جداً للتحقق من أنواع الترميز التي تلتقطها Google من الصفحة. ويُعرف الترميز من قِبل محركات البحث ويساعد في "دلالية" الموقع بإدخال Schema microdata خاصة بكل حالة.

Rich Pins Validator

لا يمكن أن تنقص Pinterest، فلديها مُتحقّق للـ pins يُعرف بـ Rich Pins Validator. يعمل بنفس طريقة مُتحقّق Twitter: تحتاج إلى عملية موافقة للحصول على وظيفة Rich Pin، وفي الوقت نفسه تتحقق من ترميز البيانات.

كيف تُحسِّن هذه الوسوم في WordPress؟

كما تعلم، إحدى أكبر مزايا WordPress هي مرونته ومجتمعه الضخم. ومن ثَمّ، فإن عمليات كإدخال وسوم open-graph في الصفحات والمقالات لا تستغرق إلا ثوانٍ بفضل الإضافات.

ثمة طرق كثيرة لتحقيق ذلك. في حالتنا، نراها أسهل عبر إضافة SEO Rank Math.

مقال موصى به > درس SEO معمّق عن Rank Math

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

نصائح وتحسينات

سترى أدناه بعض النصائح المبنية على تجربتنا التي أعطتنا نتائج جيدة جداً.

تحسين الصور

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

لكل منصة معاييرها. الأفضل اختيار صورة كبيرة قابلة للتكيّف مع كل شبكة اجتماعية.

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

• ›

  Twitter: 120x120px للصغيرة، 4096x4096px للكبيرة

• ›

  Facebook: 200px للأصغر، 1200px للأكبر

استخدم Open Graph دائماً

كونه صيغة معروفة جداً، يمكن أن تستخدمها منصات أكثر. يُستحسن استخدام قالب كود لإدراج الوسوم الاجتماعية. يمكنك مراجعة كل المعلومات في الدليل التالي.

دليل موصى به -> وسوم meta في SEO

اختبر وجرّب

اختبر دائماً وتحقق في المُتحقّقات للتأكد من ظهور نتائج موقعك بشكل صحيح على الشبكات الاجتماعية.

الخلاصة

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

تذكّر أيضاً أن الإشارات الاجتماعية، أي الزيارات الآتية من الشبكات الاجتماعية، يمكن أن تؤثر إيجاباً في استراتيجية SEO. لذلك، فإن كل نقرة آتية من وسائل التواصل الاجتماعي تساوي ذهباً!

هل لديك أسئلة أو اقتراحات؟ يسعدنا مساعدتك!

مراجع:

• ›https://ogp.me/ - الموقع الرسمي لبروتوكول Open Graph