مولّد وسوم Open Graph

أنشئ وسوم Open Graph لمعاينات الروابط في Facebook وLinkedIn وWhatsApp وSlack وDiscord: العنوان والوصف والصورة بحجمها ونصها البديل والنوع والرابط واللغة.

عنوان مطلق؛ المقاس 1200×630 بكسل يناسب معظم الشبكات.

en_US, vi_VN, fr_FR…

شيفرة HTML لقسم <head>
<meta property="og:type" content="article">
<meta property="og:title" content="My Awesome Article">
<meta property="og:description" content="A short summary shown when the link is shared.">
<meta property="og:url" content="https://example.com/article">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:secure_url" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Article cover">
تقرأ Facebook وLinkedIn وWhatsApp وSlack وDiscord وغيرها وسوم Open Graph. بعد تعديلها قد تستمر الشبكات في عرض معاينة مخزّنة حتى تعيد زيارة الصفحة.

ما هو مولّد Open Graph؟

تولّد هذه الأداة وسوم Open Graph <meta property="og:…"> التي تتحكم في شكل الرابط عند مشاركته على Facebook وLinkedIn وWhatsApp وSlack وDiscord وTelegram وتطبيقات كثيرة أخرى. تغطي og:type والعنوان والوصف والرابط واسم الموقع واللغة والصورة مع الرابط الآمن والعرض والارتفاع والنص البديل، وتحذّر عند غياب خصائص مطلوبة.

كيفية استخدام مولّد Open Graph

  1. املأ og:title وog:type وog:url وog:image (الخصائص الأربع المطلوبة).
  2. أضف الوصف واسم الموقع واللغة وحجم الصورة ونصها البديل.
  3. عالج أي تحذير بخصائص ناقصة.
  4. انسخ الوسوم إلى <head> الصفحة.

متى تستخدم مولّد Open Graph

استخدمه كلما ستُشارَك صفحة وتريد التحكم في المعاينة بدل ترك كل تطبيق يخمّن. تخزّن الشبكات المعاينات مؤقتاً؛ وبعد تغيير الوسوم استخدم أداة التشخيص في المنصة (مثل Facebook Sharing Debugger) للتحديث. ولمنصة X (تويتر) راجع أيضاً مولّد Twitter Card.

كيف يعمل مولّد Open Graph

يصبح كل حقل غير فارغ وسماً واحداً <meta property="og:…" content="…"> بمحتوى مهرّب بـ HTML، بالترتيب الذي يوصي به بروتوكول Open Graph. وعندما يستخدم رابط الصورة https يُضاف وسم og:image:secure_url بالرابط نفسه؛ ولا يُكتب عرض الصورة وارتفاعها ونصها البديل إلا عند تحديد صورة.

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

  • إعطاء مقالات المدونة معاينة بصورة كبيرة على LinkedIn وFacebook.
  • ضبط og:locale لصفحة مترجمة.
  • إضافة og:image:alt لإمكانية الوصول.
  • جعل صفحات المنتجات تعرض اسم المنتج وصورته في WhatsApp.

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

ما حجم الصورة الأفضل؟

تُعرض 1200×630 بكسل (1.91:1) جيداً في معظم المنصات. أبقِ المحتوى المهم في المنتصف لأن بعض التطبيقات تقتص إلى مربع.

ما وسوم og المطلوبة؟

يشترط البروتوكول og:title وog:type وog:image وog:url. الوصف واسم الموقع اختياريان لكن يُنصح بهما.

لماذا ما زال Facebook يعرض صورتي القديمة؟

تُخزَّن المعاينات مؤقتاً. أعد كشط الرابط في Sharing Debugger أو غيّر رابط الصورة.

استكشف المزيد من الفئات

CRC
خوارزميات التحقق من التكرار الدوري لاكتشاف الأخطاء
MD
خوارزميات ملخص الرسالة (MD2، MD4، MD5)
SHA-1
خوارزمية التجزئة الآمنة 1 - دالة تجزئة 160 بت
SHA-2
عائلة خوارزمية التجزئة الآمنة 2 (SHA-224، SHA-256، SHA-384، SHA-512)