Draftcamp

معاينة Open Graph

شاهد كيف يظهر الرابط عند مشاركته، وأي وسم يعتمد عليه كل منصة فعليًا

أدخل رابطًا لرؤية بطاقته

نقوم بجلب الصفحة، وحل الوسوم كما تفعل المنصة، ونُظهر لك البطاقة بالإضافة إلى ما هو مفقود.

ما تقرأه المنصة فعليًا

عندما تُلصق رابطًا في Slack أو LinkedIn أو X أو iMessage، تستدعي المنصة الصفحة وتبني بطاقة من علامات الميتا الخاصة بها. لا تشغل جافاسكريبت الخاصة بك ولا ترى CSS - تقرأ فقط العلامات في الرأس ولا شيء آخر.

سلسلة البدائل

معظم المنصات تحل بنفس الترتيب، وهذه المعاينة تتبعه:

  • العنوان - twitter:title، ثم og:title، ثم <title>
  • الوصف - twitter:description، ثم og:description, ثم وصف الميتا
  • الصورة - twitter:image، ثم og:image, ثم لا شيء

لهذا السبب تكرار كل وسم Open Graph كوسم Twitter غالبًا ما يكون مضيعة للوقت. الوسم الوحيد الذي يستحق الإعداد بشكل منفصل هو twitter:card, لأنه يحدد بين الصورة الكبيرة والصورة المصغرة الصغيرة.

ثلاثة أخطاء تسبب معظم بطاقات المعطلة

  • og:image نسبي. العنكبوت لا يملك سياق الصفحة لحلها. يجب أن يكون رابط HTTPS مطلق أو لا شيء.
  • صورة لا يمكن الوصول إليها. محجوبة بالمصادقة، محظورة في robots.txt، أو مقدمة من مضيف يرفض وكلاء المستخدم غير المعروفين.
  • تخزين مؤقت مفرط. قمت بإصلاح الوسوم والبطاقة القديمة تبقى لأيام. Facebook Sharing Debugger و LinkedIn Post Inspector يجبران على إعادة الفحص؛ ذاكرة التخزين المؤقت لـ X يجب أن تنتهي فقط.

ليست ميزة SEO

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

لكتابة الوسوم في المقام الأول، استخدم مولد وسم الميتا بدلاً من ذلك.

أسئلة شائعة

لماذا لا يظهر أي صورة عند مشاركة الرابط؟
غالبًا لأن og:image مفقود، أو مسار نسبي بدلًا من رابط HTTPS مطلق، أو يشير إلى شيء لا يمكن للمنصة جلبه - خلف مصادقة، محجوب بواسطة robots.txt، أو كبير جدًا. الزاحف الذي يجلب البطاقة لا يملك سياق صفحة، لذا المسارات النسبية لا تُحل.
ما حجم الصورة الذي يجب أن أستخدمه؟
1200×630 بكسل، أقل من 5 ميجابايت. المنصات تقص الصور بشكل مختلف، لذا أبعد النصوص والوجوه عن الحواف. أقل من 600×315 معظم المنصات تخفض الجودة إلى صورة مصغرة مربعة صغيرة بغض النظر عن إعداد twitter:card.
حدّثت العلامات لكن البطاقة القديمة لا تزال تظهر.
المنصات تخزن مؤقتًا بشكل مكثف، غالبًا لأيام. استخدم Facebook Sharing Debugger وLinkedIn Post Inspector لإجبار إعادة الزحف. X لا يملك أداة عامة لذلك يجب أن تنتهي صلاحية ذاكرته المؤقتة تلقائيًا.
هل أحتاج علامات twitter: إذا كان لدي Open Graph؟
غالبًا لا - X يعتمد على Open Graph للعنوان والوصف والصورة. الاستثناء هو twitter:card، التي تحدد بين الصورة الكبيرة والصغيرة. هذه تغير البطاقة بشكل جوهري وتستحق التعيين صراحة.
هل يؤثر أي من هذا على SEO؟
ليس بشكل مباشر. علامات Open Graph ليست عوامل ترتيب. تؤثر على مدى جاذبية الرابط المشترك للنقر، وهذا يؤثر على الحركة والإشارات الثانوية الناتجة - والرابط الذي يظهر كصندوق رمادي فارغ في Slack يُشارك أقل.