مولّد وسوم Open Graph

أنشئ وسوم Open Graph وTwitter Card مع معاينة مباشرة للمشاركة، لتظهر صفحتك بشكل صحيح عند مشاركتها على Facebook وLinkedIn وX وSlack.

واجهة الأداة نفسها باللغة الإنجليزية حاليًا، وتعمل بالكامل داخل متصفحك.

جارٍ تحميل الأداة…

كيف تُبنى معاينات الروابط من وسوم Open Graph

حين يُلصق رابط في Facebook أو LinkedIn أو X أو Slack أو Discord أو WhatsApp، تجلب المنصة الصفحة وتبحث عن بضعة وسوم meta في رأسها: og:title وog:description وog:image وog:url وog:type، المعرّفة في بروتوكول Open Graph، إضافة إلى twitter:card ورفاقه لمنصة X. وتلك الوسوم تحدد العنوان والملخص والصورة في بطاقة المعاينة. ودونها تخمّن كل منصة، وغالبًا ما تختار الصورة الخطأ أو تقتطع النص الخطأ.

والصورة هي الجزء الذي يخطئ فيه الناس أكثر. فصورة بمقاس 1200×630 بكسل (نسبة 1.91:1) تُعرض جيدًا عبر كل المنصات تقريبًا، ورابط og:image يجب أن يكون مطلقًا، يبدأ بـ https://، وإلا تجاهلته الزواحف. يكتب هذا المولّد المجموعة الكاملة من وسوم Open Graph وTwitter Card من نموذج قصير ويعرض بطاقة معاينة مباشرة أثناء الكتابة، فترى النتيجة قبل النشر. وللصفحات العربية، أضف أيضًا og:locale بقيمة ar_AR في صفحتك.

لماذا أنشأنا هذه الأداة

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

ولا شيء يُرفع: تكتب عنوانًا ووصفًا وروابط، وتُجمع الوسوم داخل متصفحك. وتبقى عناوين الصفحات غير المنشورة ونصوص الإطلاق على جهازك حتى تختار نشرها.

نصائح وأخطاء شائعة

استخدم صورة 1200×630 أقل من 5 ميغابايت، وأشر إليها دائمًا برابط https:// كامل.
اجعل og:title في حدود 60 حرفًا وog:description في حدود 155 حتى لا يُقتطع أيهما في البطاقة.
اضبط og:url على الرابط المعتمد للصفحة حتى تُحتسب مشاركات تنويعات الرابط المختلفة معًا.
المنصات تخزّن المعاينات مؤقتًا؛ بعد تغيير الوسوم، أعد جلب الرابط بأداة Sharing Debugger من Facebook أو Post Inspector من LinkedIn.

بداية سريعة: استخدام مولّد وسوم Open Graph

أدخل عنوان الصفحة ووصفها ورابطها.
أضف الرابط المطلق لصورة المشاركة واسم موقعك.
اختر نوع المحتوى: موقع أو مقال أو منتج أو فيديو أو موسيقى.
افحص بطاقة المعاينة المباشرة وعدّل الصياغة حتى تُقرأ جيدًا.
انسخ وسوم meta المولّدة والصقها في رأس صفحتك.

تحتاج الصورة أيضًا؟ أداة استوديو لقطات الشاشة تصدّر بمقاس 1200×627 لـ LinkedIn، وأداة مولّد أيقونات المواقع تنشئ مجموعة الأيقونات للصفحة نفسها.

لماذا تهم وسوم Open Graph

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

ما يفعله كل حقل

اسم الموقع: اسم الموقع أو العلامة الذي يظهر فوق العنوان في المعاينة. اجعله قصيرًا.
عنوان الصفحة: عنوان صفحتك. اقصد 55 إلى 60 حرفًا حتى لا يُقتطع.
الوصف: ملخص لمحتوى الصفحة. اجعله أقل من 160 حرفًا ليُعرض كاملًا.
رابط الصورة: الصورة المصغّرة في المعاينة. استخدم صورة 1200×630 بكسل لأفضل عرض عبر كل المنصات.
رابط الصفحة: الرابط المعتمد للصفحة، وهو ما ينقر عليه الناس للزيارة.
نوع المحتوى: يخبر المنصات هل الصفحة موقع أم مقال أم منتج أم فيديو أم موسيقى.

صنع صورة معاينة ناجحة

صورة المعاينة أبرز جزء في بطاقة المشاركة، والصورة السيئة تقتل التفاعل. ما ينجح:

استخدم 1200×630 بكسل، المقاس المعياري الذي تدعمه كل المنصات الكبرى.
ضع نصًا على الصورة: عنوان أو رسالة رئيسية على الصورة نفسها يضمن أن توصل الفكرة حتى لو اقتُطع الوصف.
اجعلها بسيطة: نقطة تركيز واحدة واضحة، لا مجموعة متراكمة من العناصر.
استخدم تباينًا عاليًا: نص فاتح على خلفية داكنة (أو العكس) يُقرأ بحجم الصورة المصغّرة.
اختبرها: الصق رابط الصفحة في مسودة منشور لترى كيف تظهر المعاينة فعلًا قبل النشر.

أين تضع الوسوم

تُوضع وسوم meta المولّدة داخل قسم <head> في HTML، بين <head> و</head>. ولا تؤثر في شكل صفحتك؛ إنها فقط تخبر المنصات بما تعرضه.

<head>
  <title>عنوان صفحتك</title>
  <meta property="og:title" content="عنوان صفحتك" />
  <meta property="og:description" content="وصف موجز لمحتواك" />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="موقعي" />
  <meta property="og:locale" content="ar_AR" />
</head>

استخدامات شائعة

المقالات والتدوينات: تحكم في ظهور كل تدوينة عند مشاركتها.
صفحات المنتجات: اعرض صورة المنتج في المعاينة.
صفحات الهبوط: تأكد أن المعاينة تطابق رسالتك التسويقية.
أعمال معرض الأعمال: اعرض عملك بصورة مصغّرة مخصصة.

أسئلة شائعة

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

‏1200×630 بكسل (نسبة 1.91:1) يعمل عبر Facebook وLinkedIn وX ومعظم تطبيقات المحادثة. اجعل الملف أقل من 5 ميغابايت وأشر إليه برابط https:// مطلق.

هل أحتاج إلى وسوم Twitter Card منفصلة؟

تقرأ X وسوم Open Graph كبديل، لكن إضافة twitter:card بقيمة summary_large_image تضمن تخطيط الصورة الكبيرة. والمولّد يتضمن المجموعتين.

لماذا ما زالت المعاينة القديمة تظهر بعد تغيير الوسوم؟

منصات التواصل تخزّن معاينات الروابط مؤقتًا. اطلب منها جلب الصفحة من جديد بأداة Sharing Debugger من Facebook أو Post Inspector من LinkedIn.

أدوات أخرى من أدوات المطورين

تصفح جميع أدوات المطورين ←