شرح علامات Open Graph: كيف تُبنى معاينات الروابط على وسائل التواصل الاجتماعي

عندما تقوم بمشاركة رابط ويب في منشور على Facebook، أو لصق مقال في مجموعة Telegram، أو إرسال رسالة مباشرة لصفحة منتج إلى صديق على Twitter، فإنك تتوقع ظهور بطاقة معاينة مرئية مصقولة. هذه البطاقة - التي تحتوي على صورة شعار واضحة، وعنوان جذاب، وملخص موجز - لا تأتي عن طريق الصدفة. تم إنشاؤه من خلال مواصفات ويب موحدة تسمى بروتوكول Open Graph. ولكن إذا كان رمز موقع الويب الخاص بك يفتقر إلى هذه العلامات الوصفية، فستعرض منصات التواصل الاجتماعي مربعًا رماديًا قبيحًا ومكسورًا أو ستختار صورة مصغرة عشوائية من صفحتك. يعد تعلم آليات علامات الرسم البياني المفتوحة أمرًا ضروريًا لمطوري الويب والمسوقين التقنيين.

تم تقديم بروتوكول Open Graph في الأصل بواسطة Facebook في عام 2010، وقد تم تصميمه لدمج صفحات الويب الخارجية في شبكات الرسم البياني الاجتماعي. قبل Open Graph، كان على الشبكات الاجتماعية تخمين موضوع المقالة عن طريق مسح نص الفقرة الخام ومسح علامات صور HTML ضوئيًا، مما أدى غالبًا إلى معاينات مرئية محرجة. اليوم، أصبح Open Graph معيار الإنترنت العالمي الذي تدعمه LinkedIn وPinterest وTwitter وTelegram وDiscord وSlack وWhatsApp. في هذا الغوص التقني العميق، ستتعلم التركيب الدقيق لعلامات OG الأساسية، وستفهم متطلبات أبعاد الصورة، وتكتشف كيفية تصحيح أخطاء بطاقات المعاينة وتحسينها لتحقيق أقصى قدر من المشاركة الاجتماعية.

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

بالإضافة إلى خلاصات الوسائط الاجتماعية العامة، تتحكم علامات Open Graph أيضًا في كيفية عرض الروابط داخل برامج التعاون الخاصة وأدوات المراسلة الجماعية مثل Slack وMicrosoft Teams وDiscord. عندما يقوم أحد أعضاء الفريق بلصق عنوان URL الخاص بك في قناة Slack الخاصة بالشركة أو خادم Discord للمطورين، يقوم الروبوت الداخلي للتطبيق بتحليل البيانات الوصفية لـ Open Graph في الوقت الفعلي، ويعرض العنوان الرئيسي والصورة المصغرة ومقتطف الملخص مباشرة في دفق الدردشة. تضمن البيانات الوصفية عالية الجودة تفاعل أصحاب المصلحة الداخليين وأعضاء المجتمع مع الرابط الخاص بك على الفور.

ما هو بروتوكول الرسم البياني المفتوح؟

بروتوكول Open Graph عبارة عن مجموعة من العلامات الوصفية المنظمة التي يضعها مطورو الويب داخل قسم <head> في مستند HTML. عندما يزور زاحف آلي (مثل facebookexternalhit أو TelegramBot) صفحتك، فإنه يقوم بتحليل هذه العلامات لإنشاء كائن معاينة تفاعلي غني.

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

علامات Open Graph الأساسية التي يجب عليك تضمينها

يجب أن تتضمن كل صفحة ويب عامة أربع علامات Open Graph أساسية لضمان العرض المتسق عبر جميع الأنظمة الأساسية الرئيسية:

تأكد دائمًا من تطابق og:url مع علامة الرابط الأساسية الخاصة بك، مما يمنع أعداد التفاعلات الاجتماعية وإشارات الروابط الخلفية من التشتت عبر أشكال عناوين URL المختلفة.

تحسين صور الرسم البياني المفتوح لشاشات العرض الحديثة

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

• الدقة القياسية (1.91:1): استخدم 1200x630 بكسل. هذا هو المعيار العالمي للبطاقات التلخيصية لـ Facebook وLinkedIn وTwitter.
• بديل الشاشة العريضة (16:9): يتم استخدام 1200 × 675 بكسل على نطاق واسع لمحتوى الفيديو ومشاركات YouTube والمدونات الحديثة سريعة الاستجابة.
• الإعلان عن الأبعاد بشكل صريح: قم دائمًا بتضمين <meta property="og:image:width" content="1200" /> و<meta property="og:image:height" content="630" />. يتيح ذلك لبرامج الزحف الاجتماعي عرض تخطيط البطاقة فورًا أثناء عملية المسح الأولى دون الحاجة إلى تنزيل أبعاد الصورة وحسابها بشكل غير متزامن.
• قيود حجم الملف: احتفظ بأحجام الملفات أقل من 5 ميغابايت. ستقوم معظم أدوات استخراج البيانات الاجتماعية بإلغاء تنزيلات الصور التي يتجاوز حجمها 5 ميجابايت للحفاظ على النطاق الترددي للشبكة.
• توسيط النص المهم: تقوم الأنظمة الأساسية الاجتماعية بقص رسومات المعاينة بشكل مختلف على خلاصات الهاتف المحمول مقارنة بالأشرطة الجانبية لسطح المكتب. احتفظ بجميع الشعارات والعناوين النصية والوجوه الهامة في وسط "المنطقة الآمنة" الوسطى من الصورة.

بطاقات تويتر مقابل الرسم البياني المفتوح: كيف تتفاعل

يحتفظ Twitter (X) بعلامة البيانات الوصفية الخاصة به والتي تسمى Twitter Cards، ولكنه يدعم أيضًا بشكل أصلي خيار Open Graph الاحتياطي.

لضمان عرض الروابط الخاصة بك كبطاقات مرئية كبيرة وجذابة على Twitter بدلاً من الصور المصغرة المربعة الصغيرة، قم بتضمين علامات Twitter المخصصة هذه إلى جانب علامات Open Graph الخاصة بك:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Catchy Headline" />
<meta name="twitter:description" content="Engaging summary snippet." />
<meta name="twitter:image" content="https://yourbrand.com/images/og-image.jpg" />

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

يجب على الناشرين المتقدمين أيضًا تنفيذ خصائص Open Graph التكميلية مثل og:locale وarticle:published_time. يؤدي الإعلان عن og:locale إلى إعلام برامج الزحف باللغة الأساسية والتنسيق الإقليمي للمحتوى، بينما تساعد الطوابع الزمنية للنشر محركات اكتشاف المحتوى مثل Google Discover في التعرف على التقارير التحريرية الجديدة.

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

يمكنك أيضًا استكشاف كيفية تفاعل علامات Open Graph مع النطاقات الفرعية ذات العلامات التجارية في دليلنا حول النطاقات الفرعية ذات العلامات التجارية.

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

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

• مصحح أخطاء مشاركة التعريف: الصق عنوان URL الخاص بك لمعاينة بطاقات Facebook، وتحقق من تحذيرات العلامات، وفرض تحديث ذاكرة التخزين المؤقت للزاحف كما تمت مناقشته في دليلنا حول إصلاح صور المعاينة الخاطئة.
• Telegram @WebpageBot: أرسل الرابط الخاص بك إلى هذا الروبوت الذي تم التحقق منه داخل Telegram للتحقق من عرض معاينة الهاتف المحمول ومسح الرسومات القديمة المخزنة مؤقتًا.
• LinkedIn Post Inspector: يمسح ذاكرة التخزين المؤقت لمعاينة الرابط لمدة سبعة أيام في LinkedIn ويبلغ عن حقول البيانات التعريفية المفقودة.
• التحقق التلقائي من الارتباط: تحقق من سلاسل إعادة التوجيه وشهادات SSL وأكواد الحالة باستخدام أداة فحص الارتباط المجانية.

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

الأسئلة المتداولة