ما هو Open Graph وكيف يمكن استخدامه لتحسين ظهور موقعك على الويب؟
Aldawsari 
ما هو بروتوكول Open Graph ولماذا هو ضروري لموقعك؟
إن بناء المحتوى وصيانة المواقع الإلكترونية يتطلب جهداً ووقتاً كبيراً. في خضم هذا العمل، يبرز تساؤل مهم: كيف نضمن أن يبرز محتوانا ويجذب الانتباه عند مشاركته عبر المنصات الاجتماعية المختلفة؟ هذا هو الدور الأساسي لبروتوكول Open Graph. في هذا المقال، سنتعمق في فهم ماهية هذا البروتوكول، ولماذا يُعد ضرورياً لموقعك، وما هي العواقب المحتملة لعدم استخدامه.
تعريف Open Graph: بروتوكول الميتا داتا للمشاركة الذكية
Open Graph هو بروتوكول إنترنت تم تطويره في الأصل بواسطة فيسبوك بهدف توحيد طريقة استخدام البيانات الوصفية (metadata) داخل صفحات الويب. يتيح هذا البروتوكول للمطورين التحكم في كيفية ظهور محتواهم عند مشاركته على الشبكات الاجتماعية وغيرها من التطبيقات التي تدعم المعاينات الغنية (rich previews). من خلاله، يمكنك تحديد تفاصيل أساسية كعنوان الصفحة أو تفاصيل أكثر دقة مثل مدة مقطع فيديو. تعمل هذه البيانات معًا لتشكيل تمثيل مرئي جذاب ومفهوم لكل صفحة على الإنترنت، مما يعزز تجربة المستخدم ويزيد من فرص التفاعل.
أهمية Open Graph: تعزيز التفاعل وجذب الزوار
عادةً ما يُصمم المحتوى الرقمي بهدف أساسي واحد على الأقل: مشاركته مع الآخرين. بينما قد لا يكون هذا الأمر حاسماً عند إرسال رابط لصديق واحد، إلا أنه يصبح بالغ الأهمية إذا كنت تسعى لمشاركة المحتوى على نطاق واسع عبر أي شبكة اجتماعية أو تطبيق يدعم المعاينات الغنية. هنا يكمن دور Open Graph؛ فهو يضمن أن تكون هذه المعاينات فعالة وجذابة قدر الإمكان. المعاينات المحسّنة تشجع المستخدمين على استكشاف محتواك وتزيد بشكل كبير من احتمالية النقر (Click-Through Rate - CTR) للوصول إلى صفحتك، مما يعود بالنفع على موقعك من حيث الزيارات والتفاعل.
ماذا يحدث عند تجاهل وسوم Open Graph؟
في غياب وسوم Open Graph، ستحاول معظم الشبكات الاجتماعية جاهدةً إنشاء معاينة لمحتواك تلقائياً. لكن هذه المحاولات غالباً ما تكون غير مثالية وتفتقر إلى الجاذبية المطلوبة. لنأخذ على سبيل المثال موقع colbyfayock.com:
في هذا المثال، تمكنت الشبكة من استخلاص عنوان الصفحة ووصفها بشكل صحيح، لكن المعاينة الناتجة لا تبدو جذابة بما يكفي في خلاصات الأخبار المزدحمة. قارن ذلك بمعاينة منشور واحد تم تحسينه باستخدام Open Graph، وسترى فرقاً كبيراً:
إذاً، ما الذي يحدث تحديداً عند عدم استخدام وسوم Open Graph؟ لن يحدث أي ضرر تقني لموقعك، لكنك ستفوت فرصة ذهبية لجعل محتواك يبرز ويتألق بين الكم الهائل من المحتوى المنشور يومياً على الإنترنت. إنها فرصة ضائعة لزيادة التفاعل وجذب الانتباه.
الأساسيات: وسوم Open Graph الأربعة الضرورية
لتحقيق أقصى استفادة من Open Graph، هناك أربعة وسوم أساسية يجب تضمينها في كل صفحة من صفحات موقعك. يجب أن تكون هذه الوسوم فريدة لكل صفحة، مما يعني أن وسوم الصفحة الرئيسية يجب أن تختلف عن وسوم صفحة مقال المدونة، على سبيل المثال. هذه الوسوم هي og:title، og:type، og:image، و og:url.
فيما يلي شرح مفصل لكل وسم من هذه الوسوم الأساسية:
og:title: عنوان صفحتك. عادةً ما يكون هذا هو نفسه الموجود في وسم<title>الخاص بصفحة الويب، إلا إذا كنت ترغب في تقديمه بشكل مختلف على الشبكات الاجتماعية.og:type: يحدد “نوع” المحتوى الذي تقدمه صفحتك. سنتوسع في شرحه في القسم التالي، ولكن النوع العام الافتراضي هو"website".og:image: رابط لصورة عالية الدقة تمثل محتواك. ستستخدمها الشبكات الاجتماعية في خلاصاتها لجذب الانتباه.og:url: رابط URL للصفحة الحالية. يجب أن يكون هو الرابط الكنسي (canonical URL) للصفحة.
يتم وضع هذه الوسوم داخل قسم <head> في ملف HTML الخاص بصفحتك، تماماً مثل أي بيانات وصفية أخرى. يكون الوسم المستخدم هو <meta> ويتبع النمط التالي:
<meta property="[NAME]" content="[VALUE]" />على سبيل المثال، إذا أردت إنشاء مجموعة من وسوم Open Graph الأساسية لموقع colbyfayock.com، فقد تبدو كالتالي:
< meta property = "og:title" content = "Colby Fayock - A UX Designer & Front-end Developer Blog" />
< meta property = "og:type" content = "website" />
< meta property = "og:image" content = "/static/website-social-card-44070c4a901df708aa1563ac4bbe595a.jpg" />
< meta property = "og:url" content = "https://www.colbyfayock.com" />تحديد نوع المحتوى (og:type) بدقة
يدعم بروتوكول Open Graph عدة أنواع مختلفة للمواقع والمحتوى، مثل "website" (موقع ويب عام)، "article" (مقالة)، أو "video" (فيديو). عند إعداد وسومك، من المهم اختيار النوع الذي يعكس محتوى صفحتك بدقة. فإذا كانت صفحتك تركز على مقطع فيديو واحد، فمن المنطقي استخدام النوع "video". أما إذا كان موقعك عاماً ولا يركز على فئة محددة، فإن "website" هو الخيار الأنسب. تذكر أن هذا الوسم، شأنه شأن الوسوم الأخرى، يجب أن يكون فريداً لكل صفحة. لذا، إذا كانت صفحتك الرئيسية من نوع "website"، يمكن أن تكون صفحة أخرى من نوع "video" أو "article".
على سبيل المثال، قد يبدو وسم og:type لصفحة رئيسية لموقع شخصي كالتالي:
<!-- colbyfayock.com -->
< meta property = "og:type" content = "profile" />وعند الانتقال إلى صفحة مقال في مدونة، سيصبح كالتالي:
<!-- https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/ -->
< meta property = "og:type" content = "article" />يمكنك العثور على قائمة بأنواع Open Graph الأكثر شيوعاً على صفحة بروتوكول Open Graph الرسمية: https://ogp.me/#types.
وسوم Open Graph إضافية لتعزيز الظهور
على الرغم من أن الوسوم الأساسية كافية لعمل معظم المواقع، إلا أن هناك وسوماً إضافية يمكن أن تعزز من ظهور محتواك وتفاعله بشكل كبير:
og:description: وصف موجز لصفحتك. على غرارog:title، يمكن أن يكون هذا هو نفسه الموجود في وسم<meta name="description">الخاص بصفحة الويب، ما لم ترغب في عرض وصف مختلف على الشبكات الاجتماعية.og:locale: إذا كنت تستهدف جمهوراً متعدد اللغات، فإن تضمين هذا الوسم يصبح ضرورياً لتحديد لغة المحتوى ومنطقته. يكون التنسيق عادةًlanguage_TERRITORY، حيث الافتراضي هوen_US.og:site_name: اسم الموقع الإلكتروني العام الذي ينتمي إليه المحتوى. على سبيل المثال، إذا كنت في صفحة مقال بمدونة، فقد يكونog:titleهو عنوان المقال، بينماog:site_nameهو اسم المدونة نفسها.og:video: إذا كان محتواك مدعوماً بمقطع فيديو، فهذه فرصتك لتضمينه. أضف رابطاً مباشراً إلى الفيديو باستخدام هذا الوسم.
تُضاف هذه الوسوم بنفس النمط السابق الذي رأيناه:
< meta property = "[NAME]" content = "[VALUE]" />تخصيص الظهور على الشبكات الاجتماعية: بطاقات تويتر وغيرها
تلتزم معظم الشبكات الاجتماعية بالمعايير الأساسية لـ Open Graph، لكن بعضها يقدم امتدادات خاصة به لتخصيص مظهر المحتوى ضمن بيئتها. تويتر، على سبيل المثال، يتيح لك تحديد وسم twitter:card، الذي يحدد نوع “البطاقة” التي ستُعرض عند مشاركة رابط موقعك. تشمل أنواع البطاقات المتاحة حالياً:
summary: بطاقة ملخص مع صورة مصغرة.summary_large_image: بطاقة ملخص مع صورة كبيرة.app: بطاقة لتطبيقات الجوال.player: بطاقة لتشغيل الوسائط (مثل الفيديو).
يساعدك هذا الوسم في التحكم في كيفية ظهور روابطك في خلاصات تويتر. على سبيل المثال، إذا اخترت summary_large_image، سيعرض تويتر روابطك بصور كبيرة وعالية الدقة، شريطة أن تكون قد وفرتها في وسم og:image.
فيما يلي روابط سريعة للوثائق الرسمية حول كيفية استخدام وسوم Open Graph مع بعض الشبكات الاجتماعية الرئيسية:
- تويتر: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
- فيسبوك: https://developers.facebook.com/docs/sharing/webmasters/
- بينترست: https://developers.pinterest.com/docs/rich-pins/overview/
- لينكدإن: https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en
أفضل الممارسات للصور في Open Graph
بينما يُعد تضمين صورتك باستخدام وسم og:image كافياً في معظم الأحيان، قد تواجه أحياناً تحديات في عرض الصورة بشكل صحيح. إذا واجهتك مشكلة، فإن معيار Open Graph يوفر وسوماً إضافية للتحكم في الصور، مثل og:image:url (الذي يُفضّل استخدامه على og:image في بعض الحالات) و og:image:secure_url للروابط الآمنة (HTTPS)، بالإضافة إلى og:image:width و og:image:height لتحديد أبعاد الصورة. تأكد من اتباع جميع الملاحظات والأمثلة الواردة في وثائق Open Graph الرسمية.
علاوة على ذلك، تفرض بعض الشبكات الاجتماعية متطلبات محددة للصور. على سبيل المثال، يتطلب تويتر نسبة عرض إلى ارتفاع 2:1، بحد أدنى للحجم 300×157 بكسل وحد أقصى 4096×4096 بكسل، ويجب ألا يتجاوز حجم الملف 5 ميجابايت، وأن يكون بأحد التنسيقات JPG، PNG، WEBP، أو GIF. إذا واجهتك صعوبة، استخدم أدوات فحص الوسوم الخاصة بالشبكات الاجتماعية لتحديد المشكلة.
أدوات فحص واختبار وسوم Open Graph
لحسن الحظ، توفر الشبكات الاجتماعية أدوات مفيدة لمساعدتنا في تصحيح أخطاء وسوم Open Graph. بمجرد التأكد من ظهور وسومك في الكود المصدري لصفحتك، يمكنك استخدام هذه الأدوات لمعاينة كيفية ظهور موقعك عند مشاركته:
- مُدقّق بطاقات تويتر (Twitter Card Validator): https://cards-dev.twitter.com/validator
- مُصحّح مشاركة فيسبوك (Facebook Sharing Debugger): https://developers.facebook.com/tools/debug/
- مُصحّح روابط بينترست (Pinterest URL Debugger): https://developers.pinterest.com/tools/url-debugger/
التعمق في وسوم Open Graph المتقدمة
بينما تغطي الوسوم التي ناقشناها معظم احتياجات المواقع الأساسية، هناك المزيد من الوسوم المتاحة التي يمكن أن تعزز من قابلية اكتشاف محتواك وعملك عبر الشبكات الاجتماعية. إذا كنت مهتماً بالتعمق أكثر، فإن الوثائق الرسمية لـ Open Graph تقدم قائمة شاملة بجميع الوسوم المتاحة:
مثال شامل لتطبيق وسوم Open Graph على مقال مدونة
إذا كنت تبحث عن مثال عملي للبدء، إليك كيف يمكن أن تبدو مجموعة كاملة من وسوم Open Graph لمقال مدونة، مع تضمين وسوم تويتر الخاصة:
< meta property = "og:site_name" content = "Colby Fayock" />
< meta property = "og:title" content = "Anyone Can Map! Inspiration and an introduction to the world of mapping - Colby Fayock" />
< meta property = "og:description" content = "Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…" />
< meta property = "og:url" content = "https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/" />
< meta property = "og:type" content = "article" />
< meta property = "article:publisher" content = "https://www.colbyfayock.com" />
< meta property = "article:section" content = "Coding" />
< meta property = "article:tag" content = "Coding" />
< meta property = "og:image" content = "https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
< meta property = "og:image:secure_url" content = "https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
< meta property = "og:image:width" content = "1280" />
< meta property = "og:image:height" content = "640" />
< meta property = "twitter:card" content = "summary_large_image" />
< meta property = "twitter:image" content = "https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
< meta property = "twitter:site" content = "@colbyfayock" />الخلاصة التقنية
يُعد بروتوكول Open Graph أداة لا غنى عنها لأي مالك موقع أو مطور يسعى لتحسين ظهور محتواه على الشبكات الاجتماعية وزيادة التفاعل معه. من خلال التحكم الدقيق في البيانات الوصفية، يمكن للمواقع تحويل الروابط العادية إلى معاينات غنية وجذابة، مما يعزز من نسبة النقر إلى الظهور (CTR) ويجذب المزيد من الزوار. إن استثمار الوقت في تطبيق وسوم Open Graph بشكل صحيح، واختيار الأنواع المناسبة، واستخدام الصور المحسّنة، ليس مجرد ممارسة جيدة لتحسين محركات البحث الاجتماعية (Social SEO)، بل هو استراتيجية أساسية لتعظيم قيمة المحتوى الرقمي في بيئة الإنترنت التنافسية اليوم.