الخلاصة: يحصل المحتوى المشارَك على الشبكات الاجتماعية بوسوم Open Graph مضبوطة جيدًا على تفاعل أكبر بما يصل إلى 2.5× مقارنةً بالمنشورات التي تفتقر إليها، بحسب تقرير Social Media Examiner لعام 2024.
حين تشاركون رابطًا على فيسبوك أو لينكدإن أو تويتر أو واتساب، تقرأ المنصة وسوم الميتا Open Graph (OG) في صفحتكم لتولّد معاينة غنية، أي بطاقة بعنوان ووصف وصورة. وإذا غابت هذه الوسوم أو أُسيء ضبطها، قد تبدو المعاينة معطوبة، أو تعرض صورة خاطئة، أو تُظهر وصفًا عامًا لا يجتذب النقرات.
تتيح لكم أداة معاينة Open Graph المجانية على sorank.com أن تروا بالضبط كيف ستظهر صفحتكم عند مشاركتها على كل منصة اجتماعية كبرى، قبل النشر. ارصدوا الأخطاء، وحسّنوا عناصركم البصرية، وحققوا أقصى تفاعل في الوقت الفعلي.
ما هي وسوم Open Graph؟
Open Graph بروتوكول أنشأه فيسبوك أصلًا عام 2010 ليتيح لصفحات الويب أن تصبح كائنات غنية داخل رسم بياني اجتماعي. وبوضع وسوم <meta> محددة في قسم <head> من صفحتكم، تتحكمون في طريقة عرض المنصات لمحتواكم عند مشاركته.
وتشمل وسوم Open Graph الأساسية:
og:title، العنوان المعروض في بطاقة المشاركة. أبقوه دون 60 حرفًا لأفضل النتائج.
og:description، وصف مساند يظهر أسفل العنوان. استهدفوا 150-200 حرف.
og:image، صورة المعاينة. وهي العنصر الأكثر أثرًا بصريًا. المقاس الموصى به: 1200×630 بكسل.
og:url، الرابط المرجعي للصفحة المشاركة.
og:type، يحدد نوع المحتوى (website أو article أو product أو video وغيرها).
og:site_name، اسم موقعكم أو علامتكم.
ويستخدم تويتر صيغته الخاصة المسماة Twitter Cards، بوسوم مثل twitter:card وtwitter:title وtwitter:description وtwitter:image. غير أن تويتر يعود إلى وسوم Open Graph إن لم تكن وسومه الخاصة موجودة.
لماذا تهمّ معاينة Open Graph في استراتيجية السيو لديكم
قد تتساءلون: ما علاقة المشاركة الاجتماعية بالسيو؟ فرغم أن الإشارات الاجتماعية ليست عامل ترتيب مباشرًا لدى جوجل، فإن المكاسب غير المباشرة كبيرة:
زيارات أكثر من المنصات الاجتماعية: بطاقة مشاركة جذابة وحسنة التنسيق ترفع معدلات النقر من الشبكات الاجتماعية ارتفاعًا كبيرًا. ومزيد من الزوار من القنوات الاجتماعية يعني مزيدًا من الروابط الخلفية المحتملة، وذكر العلامة، وإشارات التفاعل.
معدل ارتداد أقل: حين يرى الزوار معاينة دقيقة قبل النقر، يعرفون ما ينتظرهم. وهذا التطابق بين المعاينة والمحتوى يخفض معدلات الارتداد ويحسّن مدة البقاء، وكلاهما إشارة إيجابية لتجربة الزائر.
اتساق العلامة: بطاقات مشاركة متسقة واحترافية المظهر عبر كل المنصات تعزز هوية علامتكم وتبني ثقة جمهوركم.
تضخيم مشاركة الروابط: يميل الناس أكثر إلى مشاركة محتوى ذي معاينة جذابة. وكل مشاركة تخلق فرصة جديدة للاكتشاف الطبيعي ولروابط خلفية محتملة.
كيف تستخدمون أداة معاينة Open Graph من Sorank
تساعدكم أداة معاينة Open Graph لدينا على تصحيح بطاقات المشاركة الاجتماعية وتحسينها:
الخطوة 1: أدخلوا رابط الصفحة التي تريدون معاينتها. فتجلب الأداة الصفحة وتقرأ كل وسوم الميتا الخاصة بـ Open Graph وTwitter Card.
الخطوة 2: اطّلعوا على المعاينات المولَّدة لفيسبوك وتويتر/X ولينكدإن وواتساب. فكل منصة تعرض بطاقات المشاركة بطريقة مختلفة قليلًا، وأداتنا تريكم المظهر الدقيق على كل واحدة منها.
الخطوة 3: حدّدوا المشكلات. تبرز الأداة المشكلات الشائعة مثل الوسوم الغائبة، أو الصور الصغيرة أكثر من اللازم، أو العناوين المبتورة، أو الأوصاف التي تتجاوز حدود المحارف الموصى بها.
الخطوة 4: صحّحوا وأعيدوا الاختبار. بعد تصحيح وسوم الميتا لديكم، أعيدوا إدخال الرابط للتأكد من أن كل المعاينات صارت مثالية.
أخطاء شائعة في وسوم OG وكيف تصحّحونها
حتى المطورون ذوو الخبرة يرتكبون أخطاء في Open Graph. وهذه أكثر المشكلات التي نراها تكرارًا:
غياب وسم og:image: هذا هو الخطأ الأول. فبلا صورة، تعرض المنصات بطاقة فارغة أو تسحب صورة عشوائية من صفحتكم. حدّدوا دائمًا صورة عالية الجودة بمقاس 1200×630 بكسل.
صورة صغيرة جدًا أو بنسبة أبعاد خاطئة: يشترط فيسبوك ألا تقل الصور عن 200×200 بكسل، لكنه يوصي بـ 1200×630 لصيغة البطاقة الكبيرة. والصور الصغيرة جدًا أو التي لا تتبع نسبة 1.91:1 تُقتطع بشكل رديء أو تُعرض كصورة مصغّرة بدل بطاقة كبيرة.
استخدام روابط نسبية بدل روابط مطلقة: يجب أن تستخدم كل قيم وسوم OG روابط مطلقة (تبدأ بـ https://). أما المسارات النسبية مثل /images/og.jpg فلن تعمل على المنصات الاجتماعية.
وسوم مكررة أو متعارضة: وجود عدة وسوم og:title أو og:image في الصفحة نفسها يربك الزواحف. تأكدوا من ظهور كل وسم OG مرة واحدة بالضبط.
عدم مسح الذاكرة المؤقتة: يخزّن فيسبوك وغيره من المنصات بيانات OG لديكم بشكل مكثف. وبعد تحديث وسومكم، عليكم استخدام Sharing Debugger من فيسبوك لفرض إعادة القراءة ومسح النسخة المخزّنة.
غياب الوسوم الخاصة بتويتر: رغم أن تويتر يعود إلى وسوم OG، فإن تحديد twitter:card (بالقيمة summary_large_image) يضمن حصول محتواكم على صيغة الصورة الكبيرة بدل بطاقة الملخص الصغيرة.
متطلبات OG الخاصة بكل منصة
لكل منصة اجتماعية متطلباتها وخصوصياتها:
فيسبوك: الحد الأدنى لمقاس الصورة 200×200 بكسل، والموصى به 1200×630 بكسل. ويدعم قيم og:type مثل article وproduct وvideo. ويخزّن البيانات بشكل مكثف، فاستخدموا Sharing Debugger للتحديث. الحد الأقصى لطول العنوان: 60 حرفًا. الحد الأقصى لطول الوصف: 200 حرف.
تويتر/X: يتطلب وسم الميتا twitter:card. ويدعم نوعي البطاقة summary (صورة صغيرة) وsummary_large_image (صورة كبيرة). الحد الأدنى للصورة: 144×144 بكسل لبطاقة الملخص، و300×157 بكسل للصورة الكبيرة. ويعود إلى وسوم OG حين تغيب وسوم تويتر.
لينكدإن: يستخدم وسوم OG مباشرة. المقاس الموصى به للصورة: 1200×627 بكسل. ويدعم نوعي article وwebsite. وله أداة Post Inspector الخاصة به لتصحيح الأخطاء.
واتساب: يقرأ وسوم OG لمعاينات الروابط. ويشترط تقديم og:image عبر HTTPS. ويخزّن المعاينات على الجهاز، ومسحها يتطلب من المستخدم مسح الذاكرة المؤقتة للتطبيق.
أفضل الممارسات في تصميم صورة OG
صورة OG هي أهم عنصر في بطاقة مشاركتكم الاجتماعية. اتبعوا هذه الإرشادات في التصميم:
• استخدموا 1200×630 بكسل (نسبة أبعاد 1.91:1) لتوافق شامل.
• أبقوا النصوص والعناصر البصرية المهمة داخل الـ 80% الوسطى من الصورة لمراعاة الاقتطاع الخاص بكل منصة.
• أدرجوا شعار علامتكم أو ألوانها لتمييز فوري.
• استخدموا نصًا عريضًا مقروءًا بتباين عالٍ، فكثير من المستخدمين يتصفحون الشبكات الاجتماعية على الهاتف.
• أبقوا حجم الملف دون 5 MB (ويفضّل دون 1 MB) لتحميل سريع.
• استخدموا JPEG للصور الفوتوغرافية وPNG للرسوم التي تحمل نصوصًا فوقها.
• أنشئوا صور OG فريدة لأهم صفحاتكم بدل استخدام صورة عامة موحّدة للموقع كله.
• اختبروا صورتكم على خلفية داكنة، فمنصات مثل تويتر/X تدعم الوضع الداكن.
دمج وسوم OG مع نظام إدارة المحتوى لديكم
تدعم معظم منصات وأطر إدارة المحتوى الحديثة وسوم Open Graph أصلًا أو عبر إضافات:
WordPress: تولّد إضافات مثل Yoast SEO أو Rank Math وسوم OG تلقائيًا انطلاقًا من محتواكم. ويمكنكم أيضًا تخصيص الصورة والعنوان الاجتماعيين لكل صفحة.
Webflow: إعدادات Open Graph متاحة في لوحة إعدادات الصفحة ضمن تبويب Open Graph. ويمكنكم ضبط العنوان والوصف والصورة لكل صفحة.
Next.js / React: استخدموا مكوّن <Head> أو واجهة البيانات الوصفية لإضافة وسوم OG برمجيًا. ومكتبات مثل next-seo تبسّط هذه العملية.
HTML الساكن: أضيفوا وسوم الميتا الخاصة بـ OG مباشرةً في قسم <head> من كل صفحة. واستخدموا أداة مولّد وسوم الميتا لدينا على sorank.com لإنشاء الشيفرة تلقائيًا.
ومهما كانت منصتكم، استخدموا دائمًا أداة معاينة Open Graph لدينا للتأكد من أن وسومكم تُعرض بشكل صحيح عبر كل المنصات الاجتماعية قبل النشر.
.webp){kind=small}
.webp){kind=small}
.svg)
.svg)
