منشئ بيانات Open Graph
أدخل عنوان الصفحة ووصفها ورابطها وصورتها لتحصل على وسوم Open Graph وبطاقة Twitter مكتوبة بشكل صحيح وجاهزة للصق داخل <head>، مع معاينة توضيحية لبطاقة المشاركة. فهي مولّد وسوم Open Graph (Open Graph Generator) لصفحات المتاجر والمقالات وصفحات الهبوط.
جارٍ تحميل الأداة…
المعالجة والخصوصية: تُبنى الوسوم داخل متصفحك ولا تُرسل بياناتك إلى أي خادم. الاستثناء الوحيد اختياري: إذا فعّلت «تحميل الصورة في المعاينة» فإن متصفحك يطلب الصورة مباشرة من خادمها.
شاهد طريقة الاستخدام
خطوات الاستخدام
- اكتب العنوان
- اكتب الوصف
- أدخل رابط الصفحة
- النتيجة: الوسوم ومعاينة البطاقة
طريقة الاستخدام
- اكتب العنوان والوصف كما تريد ظهورهما عند مشاركة الرابط.
- الصق رابط الصفحة ورابط الصورة كاملين، ويبدأ كل منهما بالبادئة https://.
- اكتب نصًا بديلًا للصورة، وأضف عرضها وارتفاعها بالبكسل إن كنت تعرفهما.
- اختر نوع المحتوى واللغة (مثل ar_SA أو ar_AE) ونوع بطاقة Twitter.
- راجع التنبيهات، ثم انسخ الوسوم أو نزّلها والصقها داخل <head> في صفحتك.
مثال
العنوان «عطور & بخور "هدايا"» يُكتب في الوسم هكذا: <meta property="og:title" content="عطور & بخور "هدايا"">. تُحوَّل العلامات & و" و< و> إلى رموز HTML حتى لا ينكسر الوسم.
الرابط https://example.com/عطور/دهن-العود يُكتب في og:url بصيغته المرمَّزة التي تبدأ بالشكل https://example.com/%D8%B9%D8%B7%D9%88%D8%B1/، وهي الصيغة التي تفهمها كل المنصات.
الحدود والملاحظات
- المعاينة توضيحية وبتصميم محايد. تعرض كل منصة (واتساب، X، فيسبوك، لينكدإن، تيليجرام وغيرها) البطاقة بطريقتها، وقد تقصّ الصورة أو النص بشكل مختلف.
- تحتفظ المنصات بنسخة مخبأة من المعاينة، فقد لا يظهر تعديلك فورًا بعد تغيير الوسوم. لدى بعض المنصات أداة رسمية لإعادة جلب الصفحة.
- لا تفتح الأداة رابط صفحتك، ولا تتحقق من وجود الصورة أو مقاسها أو حجمها. إذا فعّلت خيار تحميل الصورة في المعاينة فإن متصفحك يطلبها مباشرة من خادمها، فيرى ذلك الخادم عنوان IP الخاص بك كما في أي زيارة. وإن تعذّر التحميل تظهر رسالة بذلك بدل صورة وهمية.
- الخصائص المطلوبة في بروتوكول Open Graph أربع: og:title وog:type وog:image وog:url. تنبّهك الأداة إلى الناقص منها لكنها لا تمنعك من النسخ.
- رابط الصورة النسبي (مثل /images/a.jpg) يُكتب كما هو مع تنبيه، لأن معظم المنصات لا تستطيع جلبه. أما رابط الصفحة فيجب أن يكون كاملًا.
- الأنواع المعروضة جزء من أنواع Open Graph الشائعة، ولا تُنشئ الأداة الخصائص الإضافية الخاصة بكل نوع مثل article:published_time. الحد الأقصى 2000 حرف لكل نص.
أسئلة شائعة عن هذه الأداة
ما مقاس الصورة المناسب للوسم og:image؟
لا يفرض البروتوكول مقاسًا. الشائع استخدام صورة عريضة بنسبة قريبة من 1.91:1 مثل 1200×630 بكسل للبطاقة الكبيرة، وصورة مربعة للبطاقة الصغيرة (summary). هذه ممارسة شائعة وليست شرطًا، والأداة لا تفحص مقاس صورتك.
لماذا لا تتغير المعاينة في واتساب أو X بعد تعديل الوسوم؟
لأن المنصات تخزّن بيانات الرابط مؤقتًا عند أول مشاركة. انتظر انتهاء مدة التخزين، أو استخدم أداة الفحص الرسمية للمنصة إن وُجدت لطلب جلب جديد، أو شارك الرابط بمعامل مختلف للتجربة.
هل أحتاج وسوم Twitter إذا كانت وسوم Open Graph موجودة؟
تعتمد بطاقات X على twitter:card لتحديد شكل البطاقة، وتستطيع قراءة العنوان والوصف والصورة من وسوم Open Graph إن غابت وسوم Twitter المقابلة. تكتب الأداة الوسوم كاملة ليكون السلوك واضحًا، ويمكنك اختيار «بدون» لحذفها.
ما هي وسوم Open Graph ولماذا أحتاجها؟
وسوم Open Graph أسطر <meta> داخل <head> تخبر تطبيقات المحادثة ومنصات التواصل بالعنوان والوصف والصورة التي تُعرض عند مشاركة رابط صفحتك. بدونها تختار كل منصة ما تعرضه بنفسها، فقد تظهر بطاقة بلا صورة أو بعنوان غير مناسب. وأهمها أربع خصائص: og:title وog:type وog:image وog:url.
كيف أضيف وسوم Open Graph إلى موقعي؟
املأ الحقول هنا ثم انسخ الوسوم والصقها داخل <head> في صفحتك، قبل </head>. فالعنوان «عطور وبخور» يُكتب هكذا: <meta property="og:title" content="عطور وبخور">. وفي أنظمة إدارة المحتوى تُضاف الوسوم عادةً من إعدادات القالب أو من إضافة لتحسين محركات البحث، ثم شارك الرابط لتجربة البطاقة.