ما هو معاينة Open Graph؟

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

المعاينة تقرأ وسوم og:title وog:description وog:image وog:site_name وog:url وتعيد رسم الشكل الفعلي الذي تستخدمه كل شبكة. فيسبوك يقصّ العناوين عند نحو ٨٨ حرفاً، وبطاقة Twitter الكبيرة تطلب نسبة ٢:١، وLinkedIn يقصّ الوصف إلى نحو ٢٠٠ حرف ويضيف ثلاث نقاط.

كيفية الاستخدام

1. أدخل وسوم Open Graph الخاصة بك: العنوان والوصف وعنوان URL للصورة واسم الموقع والرابط.
2. شاهد المعاينات الحية لتنسيقات بطاقات بحث Google وفيسبوك وتويتر ولينكد إن وواتساب وسلاك وديسكورد وبينترست جنبًا إلى جنب.
3. عدّل طول العنوان والوصف وأبعاد الصورة حتى تبدو المعاينة مثالية على جميع المنصات.

متى تستخدم

• قبل نشر مقال أو صفحة تسويقية ستُشارَك على شبكات التواصل.
• عند فحص موقع قائم تظهر معاينات مشاركته مكسورة أو بصورة فارغة.
• عند تصميم قالب صورة OG جديد للتأكد أن العنوان لا يحجب التصميم.

النتيجة

قبل مشاركة تدوينتك الجديدة على لينكد إن، تحقق من أن صورة OG لا تُقتطع بشكل غريب وأن الوصف يُقرأ جيدًا ضمن حد 200 حرف في بطاقة تويتر.

الأسئلة الشائعة

ما الحجم المناسب لصورة Open Graph؟

١٢٠٠×٦٣٠ بكسل هو المقاس الآمن. فيسبوك وLinkedIn يعرضانها بنسبة ١٫٩١:١، وبطاقة summary_large_image في Twitter تتبع النسبة نفسها. أبقِ حجم الملف دون ٥ ميغابايت واستخدم JPEG أو PNG.

لماذا لا يحدّث فيسبوك المعاينة بعد تعديل الوسوم؟

فيسبوك يخزّن بيانات OG في ذاكرة مؤقتة لنحو ٢٤ ساعة. الصق الرابط في Sharing Debugger من Meta واضغط «Scrape Again» لإجبار النظام على إعادة القراءة. LinkedIn يقدّم الأداة ذاتها عبر Post Inspector.

هل أحتاج وسوم twitter:* إذا كانت لديّ وسوم og:* أصلاً؟

Twitter يرجع إلى og:title وog:description وog:image إذا غابت وسوم twitter:*، فالصفحة الاعتيادية تعمل دونها. أضف twitter:card وtwitter:image فقط حين ترغب بعنوان أو صورة مختلفة لتويتر تحديداً.

ما الفرق بين summary وsummary_large_image في تويتر؟

summary يعرض صورة مربعة صغيرة بجانب النص، وهو مناسب لروابط الأخبار والمقالات. أما summary_large_image فيضع صورة عريضة فوق النص ويلائم المحتوى البصري كصفحات الهبوط والفيديو.

هل يصلح استخدام GIF متحرّك صورةً لـ og:image؟

الشبكات تقبل الـ GIF لكنها تعرض الإطار الأول فقط. استخدم PNG أو JPEG ثابتاً تكون فيه المعلومات الأهم ظاهرة، أو حوّل الحركة إلى MP4 قصير وأشِر إليه عبر og:video.

أدوات ذات صلة