مُولّد وسوم Open Graph الوصفية

الوسوم التي تُبنى منها معاينة الرابط

عندما يلصق أحدهم رابطك في منشور أو رسالة، يرسل التطبيق برنامج زحف إلى الصفحة ويقرأ مجموعة من وسوم <meta> داخل <head>. تأتي هذه الوسوم من بروتوكول Open Graph، الذي يسرد أربعة منها كمطلوبة:

• og:title: العنوان كما ينبغي أن يظهر في المعاينة.
• og:type: ما هي الصفحة. website يناسب معظم الصفحات وarticle يناسب منشور مدونة. يعرّف البروتوكول أيضًا أنواعًا مثل profile وbook وvideo.movie وmusic.song.
• og:image: رابط الصورة التي تمثّل الصفحة.
• og:url: الرابط الأساسي، الذي يسميه البروتوكول المعرّف الدائم للكائن.

يعرّف البروتوكول أيضًا وسومًا اختيارية، ويكتب المولّد المفيدة منها: og:description وog:site_name وتفاصيل الصورة og:image:width وog:image:height وog:image:alt. وبشأن النص البديل يكون البروتوكول صريحًا: إذا حددت الصفحة og:image، فينبغي أن تحدد og:image:alt، وهذا النص يصف ما يوجد في الصورة، وليس تعليقًا.

ما يضيفه X: twitter:card

يقرأ X أيضًا Open Graph. يسرد مرجع ترميز البطاقات (وثائق مطوري X، المرتبطة هنا عبر Internet Archive لأن الصفحة الأصلية تعيد التوجيه الآن) القيمة البديلة لكل وسم: twitter:title يعود إلى og:title، وtwitter:description إلى og:description، وtwitter:image إلى og:image، وtwitter:image:alt إلى og:image:alt. لذا فإن الوسم الوحيد الذي يستحق الإضافة هو twitter:card، الذي يختار التخطيط. أغفله، ويقول المرجع نفسه إن X قد يعود إلى بطاقة ملخص صغيرة، حتى لو أردت الكبيرة:

• summary_large_image: صورة بعرض كامل فوق العنوان. تقول صفحة بطاقة الصورة الكبيرة في X إن الصور الخاصة بها تدعم نسبة أبعاد 2:1، بأبعاد لا تقل عن 300 × 157 وحد أقصى 4096 × 4096 بكسل، وأقل من 5 ميغابايت، بصيغة JPG أو PNG أو WEBP أو GIF. صيغة SVG غير مدعومة.
• summary: بطاقة أصغر بصورة مربعة. تقول صفحة بطاقة الملخص في X إن الصورة تدعم نسبة 1:1، من 144 × 144 حتى 4096 × 4096 بكسل، وتُقتص إلى مربع على جميع المنصات.

يسرد المرجع نفسه بطاقات app وplayer، التي تحتاج إلى حقول إضافية لـ App Store أو مشغّل الفيديو، لذا تُستبعد هنا. كما يوثّق الحدود التي تستخدمها الفحوص أعلاه: 70 حرفًا للعنوان، و200 للوصف، و420 للنص البديل.

أحجام الصور التي تحددها المنصات

• LinkedIn: يطلب دليله لجعل الموقع قابلًا للمشاركة الحقول og:title وog:image وog:description وog:url، ويحدد حجم ملف أقصى 5 ميغابايت، وحدًا أدنى 1200 × 627 بكسل، ونسبة موصى بها 1.91:1.
• Meta: تنص أفضل ممارسات المشاركة على استخدام صور بعرض لا يقل عن 1080 بكسل للشاشات عالية الدقة، ولا يقل عن 600 بكسل لعرض إعلانات روابط الصور. تطلب الصفحة نفسها og:image:width وog:image:height حتى يتمكن الزاحف من عرض الصورة فورًا دون الحاجة إلى تنزيلها ومعالجتها أولًا.

تستوفي صورة بأبعاد 1200 × 630 كل هذه المتطلبات: فهي لا تقل عن 1200 × 627 لـ LinkedIn، وأعرض من 1080 لـ Meta، ونسبتها 1.905:1، أي ضمن 5% من نسبة 2:1 لـ X.

افحصها، وحدّث المعاينات القديمة

تخزّن التطبيقات ما زحفت إليه مؤقتًا، لذا فإن إصلاح الوسوم لا يصلح معاينة محفوظة مسبقًا. تمنحك الشبكتان الكبيرتان أداة لهذا:

• أداة تصحيح المشاركة من Meta تعرض الوسوم التي يزحف إليها زاحفها، مع أي أخطاء أو تحذيرات، وتُطلق زحفًا جديدًا. يصفها دليل مشرفي المواقع من Meta، وتشير صفحة أفضل الممارسات إلى أن المحتوى المزحوف يُحدَّث خلاف ذلك ضمن دورة قياسية مدتها 24 ساعة.
• Post Inspector من LinkedIn يحدّث عنوان URL مخزَّنًا مؤقتًا. تشير صفحة المساعدة في LinkedIn إلى أن التحديث يؤثر فقط على المنشورات الجديدة: أما المنشورات التي تتضمن الرابط بالفعل فتحتفظ بالمعاينة القديمة.

ما لا تفعله هذه الأداة

لا تجلب الأداة صفحتك أو صورتك، لذا لا يمكنها رؤية ما هو منشور فعليًا، والمعاينة أعلاه هي رسم نصي وليست عرضًا حقيقيًا. إنها تكتب الوسوم؛ ولا يزال على موقعك تقديمها في <head> الصفحة، ضمن HTML الذي يتلقاه الزاحف. فالوسوم المضافة لاحقًا بواسطة JavaScript قد لا تُرى أبدًا. كما أنها لا تكتب بطاقات app أو player، ولا الخصائص الإضافية التي تحددها أنواع مثل book أو video.movie.

إذا كنت تفضّل عدم كتابة هذا يدويًا

Hermoso هو التسويق على الطيار الآلي: يبحث في الإعلانات الناجحة بالفعل في سوقك، وينشئ إعلانات صور وفيديو متوافقة مع علامتك التجارية، ويجدول المنشورات ويدير حملات مدفوعة على حسابات إعلاناتك الخاصة. يعمل في تطبيق الويب، أو داخل Claude وChatGPT وCursor عبر خادم MCP الخاص به.

الأدوات المجانية: منشئ روابط UTM · منشئ رموز QR · دليل أحجام وسائل التواصل

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

ما وسوم Open Graph المطلوبة؟

يُدرِج بروتوكول Open Graph أربع خصائص مطلوبة: og:title وog:type وog:image وog:url. أما og:description وog:site_name ووسوم العرض والارتفاع والنص البديل لـ og:image فهي اختيارية لكن يُستحسن إضافتها.

هل أحتاج إلى twitter:title وtwitter:image إذا كانت لديّ وسوم og:؟

لا. يذكر مرجع ترميز البطاقات في X أن twitter:title وtwitter:description وtwitter:image وtwitter:image:alt تعود إلى مكافئاتها في og:. الوسم الذي يُستحسن إضافته هو twitter:card، الذي يحدد تخطيط البطاقة.

ما الحجم الذي يجب أن تكون عليه صورة Open Graph؟

يطلب LinkedIn ما لا يقل عن 1200 × 627 بكسل بنسبة 1.91:1 وأقل من 5 MB. تقترح Meta عرضاً لا يقل عن 1080 بكسل. تدعم بطاقة الصورة الكبيرة في X نسبة 2:1 من 300 × 157 إلى 4096 × 4096. وصورة بحجم 1200 × 630 تناسب الثلاثة جميعاً.

لماذا لا يزال رابطي يعرض صورة قديمة بعد تغيير الوسوم؟

خزّن التطبيق النسخة القديمة المستخرَجة. مرّر الرابط عبر Sharing Debugger من Meta أو Post Inspector من LinkedIn لجلبه من جديد. يشير LinkedIn إلى أن المنشورات التي تشارك الرابط مسبقاً تحتفظ بالمعاينة القديمة.

لماذا تتغيّر علامات الاقتباس وعلامات العطف في المخرجات؟

يتم تهريبها بترميز HTML كي يبقى الوسم صالحاً. عنوان مثل Tom & Jerry's "Sale" يصبح Tom & Jerry's "Sale" داخل خاصية content، وتقرأه المتصفحات والزواحف من جديد كالنص الأصلي.

هل تُحمّل الأداة صورتي؟

لا. لا يُرسَل أي شيء تكتبه إلى أي مكان ولا يُجلَب رابط الصورة أبداً، ولهذا تعرض المعاينة عنصراً نائباً بدلاً من الصورة.