مولّد وسوم Open Graph
املأ الحقول أدناه لتوليد وسوم meta الخاصة بـ Open Graph و Twitter Card للصقها في <head> لصفحتك.
كيف تعمل؟
عند مشاركة رابط إلى موقعك على Facebook أو LinkedIn أو Slack أو Discord أو X (تويتر)، تبحث هذه المنصات عن وسوم meta الخاصة بـ Open Graph في <head> الصفحة لإنشاء بطاقة معاينة بعنوان ووصف وصورة. بدون هذه الوسوم، غالبًا ما تعرض الشبكة الاجتماعية رابطًا مجردًا أو معاينة عامة غير جذابة. تولّد هذه الأداة الوسوم og:title وog:description وog:url وog:image وog:type، بالإضافة إلى نظائرها twitter:card لتظهر البطاقة بشكل صحيح على X أيضًا.
أين يجب وضع هذه الوسوم؟
الصق النتيجة مباشرة في قسم <head> من صفحة HTML، قبل وسم الإغلاق </head>. في معظم أطر العمل (Nuxt، Next.js، إلخ)، يوجد مكوّن مخصص لإدارة head يقبل نفس وسوم meta هذه.
ما حجم الصورة المناسب لـ og:image؟
الحجم الموصى به عمومًا هو 1200×630 بكسل (نسبة 1.91:1)، وهو ما يتوافق مع التنسيق المطلوب من Facebook وLinkedIn وX للعرض ببطاقة كبيرة. قد تتعرض الصورة الصغيرة جدًا أو ذات النسبة غير الصحيحة إلى قصّ غير مناسب من طرف المنصة.
لماذا لم تتغير المعاينة بعد التعديل؟
تخزّن معظم الشبكات الاجتماعية وسوم Open Graph لرابط في الذاكرة المؤقتة (الكاش) عند أول مشاركة له. بعد تعديل الوسوم، استخدم أداة التصحيح الرسمية للمنصة (مثل "Sharing Debugger" من Facebook) لفرض فحص جديد للصفحة.
معالجة محلية 100% في متصفحك — لا يُرسل أي شيء إلى خادم.