تقضي ساعة في كتابة منشور على LinkedIn، ثم تلصق الرابط وتنتظر ظهور المعاينة. لا شيء. أو ما هو أسوأ: تظهر صورة خاطئة، ويأتي العنوان مشوهًا، والوصف مقتطف عشوائي من نص الصفحة لا معنى له خارج سياقه.
لست وحدك في هذا. فمعاينات الروابط المعطلة من أكثر مشكلات التسويق الرقمي شيوعًا، ومن أسهلها إصلاحًا أيضًا. يشرح هذا الدليل الأسباب الثمانية الأكثر تكرارًا، ويوضح لك ما الذي تبحث عنه بالتحديد، ويتيح لك اختبار عنوان URL الخاص بك بأداة معاينة Open Graph المضمنة أدناه.
ما هي وسوم Open Graph؟
حين تشارك عنوان URL على LinkedIn أو Facebook أو Slack أو Twitter/X أو iMessage أو أي منصة اجتماعية تقريبًا، لا تعرض المنصة الرابط كما هو، بل تجلب الصفحة في الخلفية، وتقرأ مجموعة من وسوم HTML المخفية تُسمى وسوم Open Graph (OG)، وتستخدمها لبناء بطاقة معاينة غنية تعرض عنوانًا ووصفًا وصورة.
طوّرت Facebook بروتوكول Open Graph في الأصل ونشرته بروتوكولًا مفتوحًا عام 2010.[1] ومنذ ذلك الحين صار المعيار العالمي لمعاينات الروابط في كل المنصات تقريبًا. وهذا شكل مجموعة نموذجية من وسوم OG داخل قسم <head> في صفحة HTML:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of this page." />
<meta property="og:image" content="https://example.com/images/preview.jpg" />
<meta property="og:url" content="https://example.com/your-page/" />
<meta property="og:type" content="website" />
حين تكون هذه الوسوم موجودة وصحيحة ويمكن الوصول إليها، تعمل المعاينات كما ينبغي. وحين يغيب أي منها أو يكون خاطئًا أو محجوبًا، تتعطل المعاينة، وأحيانًا دون أي إشارة إلى الخطأ.
المصطلحات جديدة عليك؟ راجع معجم اختصار الروابط لتعريفات واضحة لوسوم Open Graph والمعاينات الاجتماعية وعناوين URL الأساسية والمفاهيم المرتبطة بها.
اختبر عنوان URL الآن
قبل الدخول في الأسباب الثمانية، استخدم الأداة أدناه لفحص أي عنوان URL تعمل عليه. فهي تجلب صفحتك بالطريقة نفسها التي يجلبها بها LinkedIn و Facebook، وتعرض لك بالضبط الوسوم الموجودة والناقصة وكيف ستبدو المعاينة.
جرّبها مجانًا، بدون تسجيل
فاحص Open Graph
شاهد الوسوم التي يحملها الرابط والبطاقة التي تنتج عنها.
أكثر 8 أسباب شيوعًا لتعطل معاينة الرابط
1. وسوم OG غائبة تمامًا
هذا هو السبب الأكثر شيوعًا. فكثير من المواقع، خصوصًا القديمة منها والأدوات المبنية خصيصًا وصفحات التطبيقات، لا تحتوي أصلًا على وسوم Open Graph في شيفرة HTML. وحين لا تجدها المنصة الاجتماعية ترتجل: فقد تأخذ وسم <title> للصفحة، أو تلتقط أول فقرة من النص، أو لا تعرض أي صورة.
ما الذي تبحث عنه: اعرض مصدر صفحتك (انقر بزر الفأرة الأيمن ثم «View Page Source» في معظم المتصفحات) وابحث عن og:title. إن لم تجد شيئًا، فالوسوم غير موجودة.
طريقة الإصلاح: أضف الوسوم الخمسة الأساسية المذكورة أعلاه إلى قسم <head> في صفحتك. وإن كنت تستخدم WordPress، فإن إضافات مثل Yoast SEO أو Rank Math تتولى ذلك تلقائيًا. وفي معظم أدوات بناء المواقع (Squarespace و Webflow و Wix) توجد لكل صفحة لوحة إعدادات مخصصة لتحسين محركات البحث أو للمشاركة الاجتماعية.
2. صورة OG صغيرة جدًا
تفرض المنصات حدًا أدنى لأبعاد الصور وترفض عرض الصور الأصغر منه. فعلى سبيل المثال، يشترط LinkedIn ألا تقل الصورة عن 1200 × 627 بكسل لتنسيق البطاقة الكبيرة.[2] وتوصي Facebook بالأبعاد نفسها، وتكتفي بصورة مصغرة صغيرة، أو لا تعرض صورة على الإطلاق، إن كانت صورتك أصغر.
الأسباب المعتادة: شعار الشركة (يكون عادة مربعًا وصغيرًا)، أو أيقونة الموقع، أو صورة من مكتبة صور ضُغطت قبل رفعها.
ما الذي تبحث عنه: ستعرض لك أداة المعاينة الصورة التي تُستخدم فعلًا وأبعادها. وصورة OG بالحجم الصحيح للمنصات الحديثة أبعادها 1200 × 630 بكسل (بنسبة عرض إلى ارتفاع 1.91:1).
طريقة الإصلاح: أنشئ صورة مخصصة للمشاركة الاجتماعية بأبعاد 1200 × 630 بكسل. وهي تختلف عن الصورة الرئيسية في صفحتك، لأنها مصممة خصيصًا لتبدو جيدة حين تُقص داخل بطاقة أفقية. وتوفر أدوات مثل Canva قوالب جاهزة بهذا الحجم بالضبط.
3. المنصة تحتفظ بمعاينة قديمة في ذاكرتها المؤقتة
يحتفظ LinkedIn و Facebook وغيرهما من المنصات بمعاينات الروابط في الذاكرة المؤقتة لفترات طويلة، قد تصل أحيانًا إلى أيام بل أسابيع. وهذا يعني أنه حتى بعد إصلاح وسوم OG تستمر المعاينة القديمة (المعطلة) في الظهور، لأن المنصة لم تجلب الصفحة من جديد.
وهذه من أكثر الحالات إحباطًا، لأن الإصلاح منشور بالفعل لكن لا شيء يبدو أنه تغيّر.
طريقة الإصلاح: توفر كل منصة كبرى أداة جلب أو تصحيح تفرض إعادة جلب الصفحة:
- LinkedIn: استخدم LinkedIn Post Inspector: الصق عنوان URL وانقر «Inspect»، فيجلب بيانات جديدة ويمسح الذاكرة المؤقتة لذلك العنوان.
- Facebook / Meta: استخدم Meta Sharing Debugger: الصق عنوان URL وانقر «Scrape Again».
- Twitter/X: تُمسح الذاكرة المؤقتة على فترات أقصر، لكن يمكنك فرض التحديث بإضافة معامل استعلام لا يؤثر في الصفحة (مثل
?v=2) في المرة الأولى، ثم إزالته.
اجعل مسح الذاكرة المؤقتة خطوتك الأولى بعد أي تغيير في وسوم OG.
4. إعادة توجيه تعترض الطريق
إذا كان عنوان URL يعيد التوجيه إلى عنوان آخر قبل تحميل الصفحة النهائية، فإن بعض المنصات تقرأ وسوم OG من العنوان الوسيط بدل الوجهة النهائية، أو تفشل في تتبع إعادة التوجيه من الأساس.[3]
ويشيع هذا خصوصًا في:
- الروابط المختصرة (التي تعيد التوجيه إلى عنوان وجهة طويل)
- العناوين القديمة التي تعيد التوجيه بالرمز 301 إلى عناوين جديدة
- الروابط التي تحمل معاملات تتبع وتمر عبر طبقة إعادة توجيه
- روابط التسويق بالعمولة التي تمر بعدة قفزات
وسلسلة إعادة التوجيه، حيث يعيد العنوان A التوجيه إلى العنوان B الذي يعيد التوجيه بدوره إلى العنوان C، تضاعف المشكلة كثيرًا. فكل قفزة فرصة أخرى لأن تستسلم أداة الجلب أو تقرأ الصفحة الخطأ.
طريقة الإصلاح: استخدم أقصر مسار ممكن لإعادة التوجيه (والأفضل قفزة واحدة مباشرة إلى الصفحة النهائية). وتأكد من أن صفحة الوجهة النهائية تحتوي على وسوم OG صحيحة. وإن كنت تستخدم خدمة لاختصار الروابط، فتحقق مما إذا كانت منصتك تدعم تمرير وسوم OG أو تجاوز المعاينة الاجتماعية بإعدادات مخصصة، إذ تتيح لك منصات كثيرة لإدارة الروابط ضبط بيانات OG مباشرة على الرابط المختصر نفسه، متجاوزة ما يوجد في صفحة الوجهة.
5. حجم ملف صورة OG كبير جدًا
الأبعاد مهمة، وحجم الملف مهم أيضًا. توصي إرشادات Facebook الرسمية بأن يبقى حجم صور OG أقل من 8MB،[4] لكن في الواقع كثيرًا ما تتسبب الصور التي يزيد حجمها على 1 إلى 2MB في انتهاء مهلة أدوات الجلب وهي تحاول تحميلها، خصوصًا على الخوادم البطيئة أو الاستضافة المشتركة.
ولقطة شاشة بدقة 4K، أو ملف PNG غير مضغوط مُصدَّر من برنامج تصميم، أو صورة خام من كاميرا، كثيرًا ما يبلغ حجمها بين 5 و 15MB رغم أن أبعادها بالبكسل صحيحة.
طريقة الإصلاح: اضغط صورة OG قبل رفعها. فأدوات مثل Squoosh (أداة Google المجانية لضغط الصور في المتصفح) أو TinyPNG تستطيع تقليل حجم الملف بنسبة تتراوح بين 60% و 80% دون فقدان ملحوظ في الجودة. واستهدف حجمًا أقل من 500KB لتحميل سريع وموثوق على كل المنصات.
6. الخادم يرسل نوع MIME خاطئًا
نوع MIME هو التصنيف الذي يرفقه الخادم بالملف ليخبر المتصفح (أو أداة الجلب) بنوع الملف. فإذا أرسل خادمك صورة بنوع MIME خاطئ، كأن يصنّف ملف JPEG على أنه text/html، فإن أدوات الجلب ترفضها ولا تعرض أي صورة، حتى لو كان الملف نفسه سليمًا تمامًا.[5]
قد يبدو هذا نادرًا، لكنه يحدث أكثر مما تتوقع، خصوصًا مع:
- الصور التي تُقدَّم من شبكة CDN بترويسات مضبوطة خطأً
- الملفات المرفوعة دون امتداد صحيح (مثل
previewبدلpreview.jpg) - الخوادم التي تصنّف كل الملفات غير المعروفة افتراضيًا على أنها
application/octet-stream
ما الذي تبحث عنه: ستعرض لك أداة معاينة Open Graph نوع المحتوى الذي يُرجَع لصورة OG. ويجب أن يكون image/jpeg أو image/png أو image/gif أو image/webp. وأي نوع آخر سيسبب مشكلات على بعض المنصات على الأقل.
طريقة الإصلاح: إن كنت تتحكم في الخادم، فاضبطه ليرسل الصور مع ترويسة Content-Type الصحيحة. وإن كنت تستخدم نظام إدارة محتوى أو شبكة CDN، فأعد رفع الصورة بامتداد الملف الصحيح، وتحقق من الترويسات المرسلة باستخدام أدوات المطور في متصفحك (علامة التبويب «Network» ثم انقر طلب الصورة ثم «Headers»).
7. تعارض بين وسوم OG ووسوم Twitter Card
يستخدم LinkedIn و Facebook وسوم Open Graph، أما Twitter/X فيستخدم نظامه الخاص المسمى Twitter Cards.[6] وتعود معظم المنصات إلى وسوم OG إن غابت وسوم Twitter Card، لكن حين تكون المجموعتان موجودتين ومتعارضتين، بعناوين مختلفة وصور مختلفة، تختلط الأمور على بعض المنصات فتعرض المجموعة الخطأ، أو تتنقل بينهما دون نمط يمكن توقعه.
حالة تعارض شائعة: أضاف مطوّر وسوم OG تشير إلى صورة لافتة أفقية، ثم أضاف لاحقًا أحد أعضاء فريق التسويق وسوم Twitter Card تشير إلى شعار مربع. فصار LinkedIn يعرض الشعار المربع بدل اللافتة.
طريقة الإصلاح: راجع المجموعتين معًا. في معظم الصفحات يجب أن تكون قيم og: وما يقابلها في twitter: متطابقة، إلا إن كان لديك سبب مقصود لعرض محتوى مختلف على منصات مختلفة. وإن أردت الاتساق، فاضبط وسوم Twitter Card صراحة لتطابق وسوم OG:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A short description." />
<meta name="twitter:image" content="https://example.com/images/preview.jpg" />
8. لأداة الفحص في LinkedIn خصائصها الغريبة
تتصرف أداة الجلب في LinkedIn بطريقة تختلف عن أداتي Facebook و Twitter في بضعة جوانب لافتة:
- لا تتبع كل عمليات إعادة التوجيه. تتوقف أداة الجلب في LinkedIn أحيانًا عند أول إعادة توجيه وتقرأ الوسوم من العنوان الوسيط، لا من الصفحة النهائية.[2]
- تلتزم بترويسة
X-Frame-Optionsوببعض قواعدrobots.txt. إذا كان ملفrobots.txtلديك يمنع زاحف LinkedIn (Linkedinbot)، فستفشل المعاينات. - المصادقة على شبكة CDN للصور. إذا كانت صورة OG خلف أي نوع من المصادقة أو الرموز أو عنوان URL موقّع تنتهي صلاحيته، فسيجلبها LinkedIn بنجاح في المرة الأولى، ثم يفشل في المحاولات اللاحقة بعد انتهاء صلاحية الرمز.
- تتأخر في مسح ذاكرتها المؤقتة. حتى بعد استخدام Post Inspector لفرض إعادة الجلب، قد لا تتغير المعاينة القديمة في منشورات LinkedIn التي نُشرت بها من قبل، وهذا سلوك مقصود.
طريقة الإصلاح: مرّر عنوان URL عبر LinkedIn Post Inspector قبل النشر، لا بعده. واعتبره فحصًا تمهيديًا في كل مرة تشارك فيها رابطًا مهمًا. وتأكد من أن ملف robots.txt يسمح للزاحف Linkedinbot. وقدّم صور OG من عنوان URL عام ودائم، بلا مصادقة ولا رموز تنتهي صلاحيتها.
كيف تبني التطبيقات بطاقة المعاينة
كل معاينة غنية لرابط تأتي من التسلسل نفسه، أيًا كان التطبيق الذي تلصق فيه الرابط.
- الجلب. تطلب أداة الجلب في المنصة عنوان URL الخاص بك بوكيل مستخدم خاص بها (user agent)، وتتبع عمليات إعادة التوجيه، وتقرأ شيفرة HTML التي يرجعها الخادم. وهي لا تشغّل شيفرة JavaScript في صفحتك كما يفعل المتصفح، ولهذا كثيرًا ما تغيب الوسوم التي تُضاف من جهة العميل.
- قراءة الوسوم. تبحث عن
og:titleوog:descriptionوog:image(يفحص X وسومtwitter:*أولًا ثم يعود إلى Open Graph، ويقرأ Discord و Slack أيضًا oEmbed حين ينشره الموقع). وإن غاب وسم ما، تعود أداة الجلب إلى عنوان الصفحة أو وصف meta، أو لا تعرض شيئًا. - جلب الصورة. يُطلب عنوان URL للصورة على حدة، ويُفحص حجمها وأبعادها. والمسار النسبي أو إعادة التوجيه أو الملف الكبير جدًا أو الصغير جدًا هو أكثر ما يجعل البطاقة تظهر بلا صورة.
- التخزين المؤقت والعرض. تُحفظ النتيجة في الذاكرة المؤقتة لساعات أو أيام بحسب المنصة، وتُرسم بتخطيط تلك المنصة: صورة كبيرة في الأعلى في بطاقة
summary_large_imageعلى X وفي LinkedIn، وبطاقة مدمجة في iMessage، وتضمين بشريط ملون في Discord.
تنفذ أداة فحص معاينة الروابط الخطوات من الأولى إلى الثالثة نيابة عنك، وتعرض البطاقة النهائية لثماني منصات جنبًا إلى جنب، بينما تعرض أداة فحص Open Graph الوسوم الخام التي تقف خلفها. وإن بدت البطاقة صحيحة في الأداة وخاطئة في التطبيق، فالسبب في كل الحالات تقريبًا هو الخطوة الرابعة: نسخة مخزنة مؤقتًا من قبل إصلاحك.
قائمة فحص سريعة
استخدمها قبل مشاركة أي رابط مهم:
| الفحص | شرط النجاح |
|---|---|
وجود og:title | نعم |
وجود og:description | نعم |
وجود og:image | نعم |
وجود og:url وكونه العنوان الأساسي | يطابق الوجهة النهائية |
| أبعاد الصورة | 1200 × 630 px على الأقل |
| حجم ملف الصورة | أقل من 1 MB (والأفضل أقل من 500 KB) |
| نوع MIME للصورة | image/jpeg أو image/png أو image/webp |
| قفزات إعادة التوجيه حتى الصفحة النهائية | 1 أو أقل |
| لا عناوين صور منتهية الصلاحية أو تتطلب مصادقة | نعم |
| مسح الذاكرة المؤقتة عبر LinkedIn Post Inspector | قبل النشر |
| وسوم Twitter Card متسقة مع وسوم OG | نعم |
لماذا يتجاوز الأمر الشكل
المعاينة المعطلة ليست مشكلة شكلية فقط. فالأبحاث تُظهر باستمرار أن المنشورات ذات المعاينات الغنية بالصور تحصد تفاعلًا أعلى بكثير من منشورات الروابط النصية. وتشير بيانات LinkedIn نفسها إلى أن المنشورات التي تحتوي على صور تحصل على تعليقات أكثر بنسبة 98% من المنشورات التي لا تحتوي عليها.[2] وعلى Facebook، تتفوق منشورات الروابط ذات المعاينات المحسّنة باستمرار على غيرها في الوصول العضوي وفي أداء الإعلانات المدفوعة.
وإن كنت توزع أي نوع من المحتوى، كمقالات المدونة أو صفحات الهبوط أو صفحات المنتجات أو البيانات الصحفية، فإن إصلاح وسوم Open Graph من أعلى الطرق عائدًا لاستثمار 30 دقيقة من وقتك.
المراجع
[1] Meta Platforms, Inc. (2010، مستمر). The Open Graph Protocol. ogp.me. https://ogp.me/
[2] LinkedIn. (2024). Share on LinkedIn — Developer Documentation: Best Practices. LinkedIn Developer Platform. https://learn.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/share-on-linkedin
[3] Fielding, R., Nottingham, M., & Reschke, J. (2022). RFC 9110: HTTP Semantics, §15.4 (Redirection). Internet Engineering Task Force (IETF). https://www.rfc-editor.org/rfc/rfc9110#section-15.4
[4] Meta for Developers. (2024). Sharing Best Practices for Websites & Mobile Apps. https://developers.facebook.com/docs/sharing/best-practices/
[5] Freed, N., & Borenstein, N. (1996). RFC 2046: MIME Part Two — Media Types. IETF. https://www.rfc-editor.org/rfc/rfc2046
[6] X Corp. (2024). Cards — X Developer Platform. https://developer.x.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
آخر تحديث: مايو 2026. انظر أيضًا: معجم اختصار الروابط، وفيه: وسوم Open Graph / OG، والمعاينة الاجتماعية، وعنوان URL الأساسي، وسلسلة إعادة التوجيه.