ما هي علامات Open Graph؟ وما هي أهميتها في تحسين موقعك؟

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

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

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

ما هي علامات Open Graph؟

علامات Open Graph هو نظام ترميز منظم، تقوم بإضافته لصفحات موقعك الإلكتروني؛ لتوضيح محتواها والسيطرة على الشكل الذي تظهر به عند نشرها على الشبكات الاجتماعية.

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

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

ما هي أهمية Open Graph؟

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

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

هل تساعد علامات Open Graph في تحسين ترتيب موقعك في محركات البحث؟

لن تحسن علامات Open Graph ترتيب موقعك في نتائج البحث بشكل مباشر، إذ لا تستخدمها كعامل رئيسي في الترتيب، ولكن هذا لا يعني أنها عديمة الفائدة لتحسين محركات البحث.

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

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

ما المنصات التي تدعم Open Graph؟

المنصة الأساسية التي تدعم علامات Open Graph هي بالطبع فيسبوك، ولكن ليس وحده، فهناك العديد من المنصات الأخرى التي تبنت هذه العلامات، ومن أبرزها:

• لينكد إن.
• Slack.
• Telegram.

تويتر هي المنصة الوحيدة التي طورت نظامها الخاص، والذي يحمل اسم “Twitter Cards” أو “بطاقات تويتر”.

كيفية تطبيق Open Graph

هناك عدة طرق يمكنك من خلالها يمكن إضافة علامات Open Graph لموقعك، منها:

1- إضافة العلامات يدويًا

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

2- العلامات الأساسية المطلوبة

عند تطبيق علامات Open Graph، هناك أربع علامات أساسية لا غنى عنها ويجب أن تكون موجودة في كل صفحة:

• og:url: هذه العلامة تحدد عنوان URL الخاص بالصفحة، ومن المهم أن تستخدم النسخة الأساسية من الرابط بدون أي معاملات إضافية.
• og:title: وهو العنوان الذي تريد أن يظهر في المقتطف على وسائل التواصل الاجتماعي، والمطلوب منك أن تختار عنوانًا جذابًا ومختصرًا يلخص محتوى الصفحة.
• og:description: هو الوصف المختصر الذي يشرح محتوى الصفحة ويشجع الزوار على النقر، لذلك يجب أن يكون واضحًا ومثيرًا للاهتمام.
• og:image: وهي عبارة عن رابط الصورة التي ستظهر في المقتطف، واعلم جيدًا أن الصور عليها عامل مهم للنقر، لذلك اختر صورة عالية الجودة وجذابة تعبر عن محتوى صفحتك.

بالإضافة للعلامات الأساسية، هناك علامتان إضافيتان يُنصح بشدة باستخدامهما؛ لتوفير سياق أفضل حول محتواك، وهما:

• og:type: تحدد نوع المحتوى الموجود في الصفحة، سواء كان مقالاً، أو منتجًا، أو فيديو، أو غير ذلك، وهذا يساعد المنصات على عرض المحتوى بالشكل الأنسب.
• og:locale: تصف اللغة والمنطقة الجغرافية المستهدفة للصفحة، مما يساعد في عرض المحتوى للجمهور المناسب.

خصائص علامات Open Graph

علامات Open Graph تتمتع بمجموعة من الخصائص المختلفة، وفهمها جيدًا يساعدك في كيفية الاستفادة منها، ومن أبرز هذه الخصائص:

og:locale

خاصية og:locale تخبر المنصات الاجتماعية عن اللغة والمنطقة الجغرافية التي تستهدفها صفحتك، وتكون القيمة الافتراضية لهذه الخاصية هي en_US والتي تعني اللغة الإنجليزية للولايات المتحدة.

يمكنك اعتبار هذه الخاصية مشابهة لسمة hreflang التي نستخدمها في تحسين محركات البحث، حيث كلاهما يهدف إلى استهداف جمهور معين، فإذا كان محتواك متوفرًا بلغات محلية متعددة، يمكنك تحديد النسخ البديلة باستخدام og:locale:alternate.

• مثال على الكود: <meta property=”og:locale” content=”en_US” />.
• المتطلبات: يجب أن تتكون القيمة من رمز لغة مكون من حرفين، يليه شرطة سفلية، ثم رمز الدولة المكون من حرفين أيضًا، وإذا لم تحددها سيتم افتراض القيمة الافتراضية en_US تلقائيًا.

og:type

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

هناك الكثير من الأنواع المتاحة للاختيار من بينها، على سبيل المثال يمكنك استخدام:

• “article” للمقالات.
• “product” للمنتجات.
• “book” للكتب.
• “place” للأماكن.
• “profile” للحسابات الشخصية.
• “video.movie” لمقاطع الفيديو.

• مثال على الكود: <meta property=”og:type” content=”article” />.
• المتطلبات: يمكنك تحديد نوع واحد فقط لكل صفحة، فلا يمكن أن تكون الصفحة مقالاً ومنتجًا في نفس الوقت، وإذا لم تحدد النوع سيتم افتراض القيمة الافتراضية “website”.

og:title

خاصية og:title تحدد العنوان الذي سيظهر في المقتطف على منصات التواصل الاجتماعي، وهي مشابهة لعلامة <title> في تحسين محركات البحث.

• مثال على الكود: <meta property=”og:title” content=”Structured data using Schema.org: the Ultimate Guide” />.
• المتطلبات: يجب أن يكون العنوان خاليًا من أي علامات تجارية وأن يصف محتوى صفحتك بدقة، ولا يتجاوز 60 حرفًا، وإذا لم تحددها ستستخدم المنصات الاجتماعية علامة <title> العادية أو twitter:title كبديل احتياطي.

og:description

خاصية og:description تقدم وصفًا مختصرًا يشرح محتوى الصفحة، وهي تشبه الوصف التعريفي meta description.

• مثال على الكود: <meta property=”og:description” content=”Get more clicks and outsmart your competitors with Schema.org!” />.
• المتطلبات: عند تحسين المقتطف لفيسبوك، تذكر أن الوصف لن يتسع في سطر واحد إذا تجاوز 55-60 حرفًا، وإذا لم تحددها ستستخدم المنصات الاجتماعية الوصف التعريفي العادي أو twitter:description كبديل.

og:url

خاصية og:url تحدد النسخة الأساسية والأصلية من عنوان URL الخاص بصفحتك، أي النسخة الخالية من أي معاملات إضافية.

• مثال على الكود: <meta property=”og:url” content=”https://www.contentkingapp.com/academy/schema/” />.
• المتطلبات: من الضروري للغاية تحديد النسخة الأساسية من الرابط؛ لأن جميع الإعجابات والمشاركات سيتم إسنادها لهذا العنوان وليس للنسخ الأخرى، وإذا لم تحددها لن يجتاز تطبيقك لعلامات Open Graph عملية التحقق؛ لأن هذه خاصية مطلوبة وأساسية.

og:site_name

خاصية og:site_name كانت تستخدم لتحديد اسم الموقع الإلكتروني، لكنها لم تعد خاصية مدعومة حاليًا.

• مثال على الكود: <meta property=”og:site_name” content=”Real-time SEO Auditing and Content Tracking” />.

article:section

خاصية article:section هي خاصية فرعية من og:type تحدد أي قسم من موقعك تنتمي إليه هذه الصفحة، على سبيل المثال إذا كان لديك موقع أكاديمي، يمكنك استخدام هذه الخاصية لتحديد الفئة التي يندرج تحتها المقال.

• مثال على الكود: <meta property=”article:section” content=”Structured Data” />.
• المتطلبات: لا توجد متطلبات محددة لهذه الخاصية، ولكن إذا لم تقم بتحديد تلك الخاصية، فلن تتمكن منصات التواصل من معرفة القسم أو الفئة التي تنتمي إليها صفحتك داخل موقعك.

og:image

خاصية og:image تحدد الصورة التي ستظهر في المقتطف، وهي من أهم علامات Open Graph على الإطلاق؛ لأن اختيار الصورة المناسبة أمر بالغ الأهمية، حيث أن الحجم والجودة والأبعاد كلها عوامل حاسمة في جذب انتباه المستخدمين.

• مثال على الكود: <meta property=”og:image” content=”https://www.contentkingapp.com/media/social-cards/schema@2x.png” />.
• المتطلبات: عند العمل مع خاصية og:image، يجب مراعاة النقاط التالية:
• إذا أردت عرض صورة كبيرة في المقتطف، تأكد أن أبعادها 600 × 315 بكسل على الأقل، والأفضل أن تكون 1200 × 630 بكسل؛ للحصول على أفضل جودة على الشاشات عالية الدقة مثل Retina.
• الصور الأصغر من 600 × 315 بكسل ستظهر بحجم أصغر في المقتطف.
• الحد الأدنى المطلق للصورة هو 200 × 200 بكسل، والصور الأصغر لن تجتاز التحقق.
• الحد الأقصى لحجم ملف الصورة هو 8 ميجابايت.
• للتأكد من عدم اقتصاص صورتك، التزم بنسبة عرض إلى ارتفاع 1.91:1.

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

og:image:secure_url

خاصية og:image:secure_url تحدد نسخة HTTPS من الصورة المستخدمة في og:image.

• مثال على الكود: <meta property=”og:image:secure_url” content=”https://www.contentkingapp.com/media/social-cards/schema@2x.png” />.
• المتطلبات: يجب أن يكون رابط الصورة مقدمًا عبر بروتوكول HTTPS الآمن.

ما هي أفضل الممارسات لـ Open Graph؟

للحصول على أفضل النتائج من علامات Open Graph، يجب أن تتأكد من تحديد جميع الخصائص المطلوبة على الأقل، والأفضل أن تضيف الخصائص الموصى بها أيضًا.

هناك مجموعة من أفضل الممارسات التي يجب عليك اتباعها عند التعامل مع علامات Open Graph، على رأسها:

1- تحسين العناوين والأوصاف

احرص على أن يكون عنوانك في خاصية og:title أقل من 55-60 حرفًا، فهذا يضمن ظهور العنوان كاملاً في سطر واحد دون أن يتم اقتصاصه.

بالنسبة للوصف في og:description، اجعله أقل من 150-160 حرفًا، فالوصف المختصر والواضح أكثر فعالية من الوصف الطويل الذي سيظهر مقطوعًا.

2- معايير الصور

فيما يتعلق بالصور في علامات Open Graph، استخدم دائمًا صورًا عالية الجودة بأبعاد لا تقل عن 1200 × 630 بكسل، وهذا يضمن ظهور صورتك بوضوح تام حتى على الشاشات عالية الدقة، وفي نفس الوقت احرص على أن يبقى حجم الملف أقل من 8 ميجابايت؛ لتجنب مشاكل التحميل.

3- الاختبار والمعاينة

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

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

4- تحديث المقتطفات

إذا ارتكبت أي أخطاء في علامات Open Graph وقمت بتصحيحها، وأردت أن ينشئ فيسبوك مقتطفًا جديدًا محدثًا، عليك الذهاب لأداة تصحيح Open Graph والنقر على “Fetch new scrape information”، وهذا سيحدث المعلومات المخزنة في ذاكرة فيسبوك المؤقتة.

5- تحديد أبعاد الصورة

استخدم خصائص og:image:width و og:image:height لتحديد أبعاد الصورة بدقة، وهذا يجعل فيسبوك والمنصات الأخرى تحمل الصورة بالشكل الصحيح فورًا من أول مشاركة، دون الحاجة إلى تحليل الصورة أولاً.

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

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