لماذا تبدو معاينة رابطك خاطئة، وكيف تصلحها باستخدام Open Graph

تشارك رابطاً لصفحة الهبوط الجديدة، فتظهر المعاينة بلا صورة، أو بعنوان الصفحة الرئيسية، أو بلافتة من حملتين مضتا. الصفحة نفسها سليمة. المعاينة تُبنى من شيء آخر: بضعة أسطر برمجية في رأس الصفحة لا يراها معظم الناس أبداً.

يتناول هذا المنشور الأسباب الستة وراء معظم المعاينات المكسورة، مرتبةً بالترتيب الأجدر بالفحص. إن أردت أن تُكتب الوسوم لك، فإن مولّد Open Graph المجاني يبنيها، ويُحسن ترميزها، ويتحقق منها مقابل الحدود المذكورة أدناه.

كيف تُصنع معاينة الرابط

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

• og:title: عنوان الصفحة كما ينبغي أن يظهر في البطاقة.
• og:type: نوع الصفحة، وغالباً website أو article.
• og:image: الصورة.
• og:url: الرابط القياسي للصفحة، الذي يسميه البروتوكول معرّفها الدائم.

أضف og:description فتكتمل لديك البطاقة. هذه مجموعة كاملة وأدنى ما يلزم:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

السبب 1: الوسوم غائبة

بلا وسوم og:، يضطر كل تطبيق إلى الرجوع إلى ما يجده في الصفحة من عناصر أخرى، مثل <title> أو أول صورة، والاختيار يعود لكل تطبيق. ولهذا قد يبدو الرابط نفسه سليماً في مكان ومكسوراً في آخر. الحل أن تُدرج الوسوم الأربعة الإلزامية مع وصف على كل صفحة تتوقع أن يشاركها الناس، لا على الصفحة الرئيسية وحدها. فصفحة منتج تُشارَك بوسوم الصفحة الرئيسية ستعرض بطاقة الصفحة الرئيسية.

السبب 2: رابط الصورة نسبي

هذا سبب سهل الإغفال، لأن الصفحة تبدو سليمة في متصفحك. فـcontent="/images/og.jpg" يعمل في متصفح يتصفح موقعك أصلاً، لكن الزاحف يأتي من خارجه. اكتب العنوان الكامل، أي يبدأ بـhttps:// ونطاقك. وينطبق الأمر نفسه على og:url.

السبب 3: حجم الصورة أو شكلها خاطئ

تذكر كل منصة ما تريده، وتتفق صدفةً على الصورة العريضة:

• تقول LinkedIn في دليلها لجعل موقعك قابلاً للمشاركة إن الصورة يجب أن تكون بحجم 1200 × 627 بكسل على الأقل، بنسبة 1.91:1 موصى بها، ولا تتجاوز 5 ميغابايت.
• تنصح Meta في أفضل ممارسات المشاركة بصور لا يقل عرضها عن 1080 بكسل للشاشات عالية الدقة، ولا يقل عن 600 لعرض إعلانات الروابط المصورة.
• تدعم بطاقة الصورة الكبيرة في X نسبة 2:1 من 300 × 157 حتى 4096 × 4096 بكسل، بأقل من 5 ميغابايت، بصيغ JPG أو PNG أو WEBP أو GIF، ولا تدعم SVG، وفق توثيقها للمطورين (الصفحة الأصلية تُعيد التوجيه الآن، لذا يمرّ هذا الرابط عبر أرشيف الإنترنت).

مقاس واحد يناسب الثلاثة: 1200 × 630. فهو يتجاوز الحد الأدنى لـLinkedIn البالغ 1200 × 627، وأعرض من 1080 لدى Meta، ونسبته 1200 ÷ 630 = 1.905، أي ضمن 5% من نسبة X البالغة 2:1. أي صورة مربعة أو طولية ستُقص لتناسب بطاقة عريضة، فاحرص على أن يبقى الجزء المهم في الوسط. تُظهر حاسبة نسبة العرض إلى الارتفاع ما يبقيه القص من المنتصف.

اذكر المقاس أيضاً في الوسوم. تطلب Meta وسمي og:image:width وog:image:height كي يعرض زاحفها الصورة فوراً بدلاً من تنزيلها ومعالجتها أولاً. ويقول دليلها للمشرفين على المواقع ذلك ببساطة: حدّد الارتفاع والعرض كي تُحمَّل الصورة بشكل صحيح من أول مشاركة للصفحة.

السبب 4: الوسوم تُضاف عبر JavaScript

تضيف بعض منصات بناء المواقع وتطبيقات الصفحة الواحدة وسوم meta بعد تحميل الصفحة، داخل المتصفح. وقد لا يشغّل الزاحف، الذي يقرأ HTML الذي يرسله خادمك، هذا الكود، فلا يرى الوسوم أبداً. افحص مصدر الصفحة (عرض المصدر View Source، لا المفتش الذي يعرض الصفحة بعد تشغيل السكربتات). إن لم تكن الوسوم في المصدر، فالأرجح أن الزاحف لا يراها أيضاً. ويكون الإصلاح في إعدادات موقعك أو في قالبه على الخادم.

السبب 5: حرف خاص كسر الوسم

عنوان يحتوي على علامة اقتباس مزدوجة، مثل The "only" linen you need، ينهي سمة content="..." مبكراً فيضيع باقي العنوان. يجب ترميز الأحرف المؤثرة داخل السمة: تصبح " هي "، و& تصبح &، و< تصبح <. تعيدها المتصفحات والزواحف إلى أحرفها الأصلية عند قراءة الوسم. ويفعل المولّد ذلك عنك، وهذا نصف السبب لاستخدام واحد.

السبب 6: التطبيق يحتفظ بالنسخة القديمة

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

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

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

وسم twitter:card: سطر واحد، لا أربعة

تقرأ X بروتوكول Open Graph أيضاً. يذكر مرجع البطاقات لديها قيمة احتياطية لكل وسم: فـtwitter:title يرجع إلى og:title، وtwitter:description إلى og:description، وtwitter:image إلى og:image، وtwitter:image:alt إلى og:image:alt. لذا لا حاجة إلى تكرار كل شيء. السطر الوحيد الذي تضيفه هو twitter:card: summary_large_image لصورة كاملة العرض، أو summary لمربع صغير. إن أغفلته، يقول المرجع نفسه إن X قد تعرض بطاقة ملخص صغيرة بدلاً منها، وهذا سبب ظهور الصورة الكبيرة أحياناً كصورة مصغرة. ويحدد المرجع نفسه الحد الأقصى للعنوان بـ70 حرفاً، والوصف بـ200، ونص البديل بـ420.

فحص خمس دقائق قبل الإطلاق

1. افتح مصدر الصفحة واعثر على وسوم og:. الأربعة الإلزامية كلها، مع وصف.
2. تحقق أن og:image وog:url يبدآن بـhttps://.
3. افتح رابط الصورة وحده في المتصفح. يجب أن يُحمَّل، بمقاس 1200 × 630 أو قريب منه.
4. الصق الرابط في Sharing Debugger وPost Inspector واقرأ البطاقات.
5. وبعدها فقط شاركه.

موقع Hermoso من ذلك

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

أسئلة شائعة

لماذا لا يظهر رابطي صورةً على Facebook أو LinkedIn؟

غالباً لأن وسم og:image مفقود، أو يستخدم مساراً نسبياً بدلاً من عنوان https:// كامل، أو يشير إلى صورة صغيرة أكثر من اللازم. تطلب LinkedIn حداً أدنى 1200 × 627 بكسل. بعد الإصلاح، مرّر الرابط عبر Sharing Debugger لدى Meta أو Post Inspector لدى LinkedIn كي يُعاد جلبه.

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

يعمل 1200 × 630 بكسل مع الشبكات الكبيرة. فهو يحقق الحد الأدنى لـLinkedIn البالغ 1200 × 627 بنسبة تقارب 1.91:1، وهو أعرض من 1080 بكسل التي توصي بها Meta، وقريب من نسبة 2:1 التي تدعمها X لبطاقات الصور الكبيرة.

كيف أحدّث معاينة رابط LinkedIn؟

أصلح الوسوم في الصفحة، ثم أدخل الرابط في Post Inspector لدى LinkedIn. تنطبق المعاينة المحدّثة على المنشورات الجديدة فقط. أما المنشورات التي تتضمن الرابط من قبل فتحتفظ بالمعاينة القديمة.

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

يكفي twitter:card فقط. تعود X إلى og:title وog:description وog:image وog:image:alt عند غياب نسخ twitter:.