وسوم Open Graph: كيف تتحكم في معاينة الروابط
حين يُشارَك رابط على Facebook أو LinkedIn أو WhatsApp أو Slack أو X، تقرّر بضعة أسطر في قسم head من الصفحة العنوانَ والنصَّ والصورةَ التي يراها الناس.
الصق رابطًا في محادثة أو منشور، وبعد لحظة تظهر بطاقة فيها صورة وعنوان وسطر نص. هذه البطاقة لا تُخمَّن من محتوى الصفحة، بل تُبنى من وسوم Open Graph، وهي مجموعة صغيرة من عناصر meta داخل قسم <head> في الصفحة. أما الصفحات التي تخلو منها فتحصل على ما تستطيع الشبكة التقاطه منها، وكثيرًا ما يكون ذلك الشعار، أو شريط ملفات تعريف الارتباط، أو لا صورة على الإطلاق. يشرح هذا الدليل الوسوم المهمة، وقواعد الصورة، وكيف تصلح معاينة ترفض أن تتحدّث بعد تعديل الصفحة.
ما هو Open Graph؟
Open Graph مجموعة صغيرة من الأعراف قدّمتها Facebook في عام 2010 لتتمكن أي صفحة ويب من وصف نفسها حين تُشارَك. وقد انتشرت إلى ما هو أبعد بكثير من Facebook: فـ LinkedIn وWhatsApp وTelegram وSlack وDiscord وMicrosoft Teams وغيرها كثير تقرأ الوسوم نفسها. ويقرؤها X أيضًا، إلى جانب وسومه الخاصة التي تبدأ بـ twitter:. لذا فكتابتها مرة واحدة تغطي تقريبًا كل مكان يمكن أن يُشارَك فيه رابط.
وتبدو الوسوم هكذا:
<meta property="og:type" content="article">
<meta property="og:title" content="How to Make Cold Brew at Home">
<meta property="og:description" content="The grind, the ratio and the steeping time.">
<meta property="og:url" content="https://example.com/cold-brew">
<meta property="og:image" content="https://example.com/images/cold-brew.jpg">
<meta property="og:site_name" content="The Coffee Blog">الوسوم المهمة
| الوسم | ما يحدّده | نصيحة |
|---|---|---|
og:title | العنوان العريض في البطاقة | يمكن أن يختلف عن عنوان البحث: أقصر وأكثر جذبًا |
og:description | السطر تحت العنوان | جملة أو جملتان؛ وكثير من التطبيقات لا تعرض إلا السطر الأول |
og:image | الصورة | عنوان كامل يبدأ بـ https://؛ وانظر قواعد المقاس أدناه |
og:url | العنوان الذي تُحتسب له المشاركة | العنوان الأساسي (canonical)، دون معاملات التتبّع |
og:type | نوع الصفحة | website لمعظم الصفحات، وarticle للمقالات والتدوينات |
og:site_name | اسم الموقع الظاهر فوق العنوان أو تحته | اسم علامتك التجارية |
og:locale | اللغة والمنطقة | مثل en_US؛ وهو اختياري |
لاحظ أن Open Graph يستخدم السمة property لا name. معظم المنصات تقبل الاثنتين، لكن property هي ما تنص عليه المواصفة، فالأسلم الالتزام بها.
الصورة: المقاس والصيغة
الصورة أول ما يلاحظه الناس في البطاقة، وهي الموضع الذي تفشل فيه معظم المعاينات.
- المقاس: 1200 × 630 بكسل، أي نسبة 1.91 إلى 1، يصلح في كل مكان. والصور الأصغر من 600 × 315 قد تُعرض صورة مصغّرة صغيرة أو تُهمل تمامًا.
- الصيغة: JPG وPNG آمنتان. أما WebP فتقبلها معظم المنصات لا كلها، وتُعرض صور GIF صورةً ثابتة.
- حجم الملف: اجعله أقل بكثير من بضعة ميغابايتات. فبعض التطبيقات، وWhatsApp خصوصًا، تتجاهل الصور الثقيلة.
- العنوان: عنوان مطلق يبدأ بـ https:// ويستطيع أي أحد فتحه. المسارات النسبية، والصور التي تتطلب تسجيل الدخول، والعناوين التي يحظرها ملف robots.txt، كلها لا تعمل.
- المنطقة الآمنة: أبعِد النصوص والوجوه عن الحواف، لأن بعض التطبيقات تقصّ الصورة إلى مربع أو إلى شريط أضيق.
يستطيع محوّل الصور تغيير مقاس الصورة إلى هذه الأبعاد وضغطها دون رفعها إلى أي خادم.
بطاقات X (تويتر)
يقرأ X وسوم Open Graph للعنوان والوصف والصورة، لكن قرارًا واحدًا يحتاج إلى وسم خاص به: twitter:card. مع القيمة summary_large_image تُعرض الصورة عريضة فوق النص، ومع summary تظهر مربعًا صغيرًا بجانبه. ومن دون هذا الوسم قد تظهر الروابط عنوان URL عاديًا بلا بطاقة. ويمكن للوسم twitter:site أن يسمّي الحساب الذي يقف خلف الموقع. ويكتب مولد Twitter Card المجموعتين من الوسوم معًا.
Open Graph ومحركات البحث
لا ترتّب محركات البحث الصفحات بحسب وسوم Open Graph؛ فعنصر <title> ووصف الميتا هما ما يشكّل نتيجة البحث. وكثيرًا ما تحمل المجموعتان نصًا متشابهًا، لكنهما تخدمان قارئين مختلفين: عنوان البحث ينبغي أن يحتوي على الكلمات التي يبحث بها الناس، أما عنوان المشاركة فيمكن أن يُكتب لشخص يتصفّح خلاصة منشورات على عجل. وتُظهر معاينة نتيجة جوجل شكل نسخة البحث.
لماذا تكون المعاينة خاطئة أو غائبة؟
| العَرَض | السبب المرجّح | الحل |
|---|---|---|
| صورة أو نص قديم بعد التعديل | خزّنت المنصة المعاينة الأولى مؤقتًا | اطلب منها إعادة قراءة الصفحة، مثلًا بأداة Facebook Sharing Debugger أو LinkedIn Post Inspector |
| لا صورة على الإطلاق | عنوان الصورة نسبي أو لا يمكن الوصول إليه | استخدم عنوانًا عامًا كاملًا يبدأ بـ https:// |
| صورة مصغّرة صغيرة بدل صورة عريضة | الصورة صغيرة جدًا، أو لا يوجد twitter:card على X | استخدم مقاس 1200 × 630 وأضف summary_large_image |
| العنوان الخطأ | وسوم تضيفها JavaScript بعد تحميل الصفحة | ضع الوسوم في HTML الذي يرسله الخادم؛ فمعظم الزواحف لا تشغّل السكربتات |
| لا شيء في صفحة واحدة فقط | الصفحة تحظر الروبوتات أو تتطلب تسجيل الدخول | اسمح للزاحف بجلب الصفحة |
مسألة JavaScript توقع كثيرًا من تطبيقات الصفحة الواحدة: إن كانت الوسوم لا تظهر إلا بعد تشغيل السكربتات، فزواحف الشبكات الاجتماعية لا تراها أبدًا. اعرضها من الخادم، أو اعرض مسبقًا (pre-render) الصفحات الأكثر مشاركة.
كتابة الوسوم
يكتب مولد وسوم الميتا وسوم البحث ووسوم Open Graph ووسوم X من نموذج قصير واحد، مع معاينات لجوجل وFacebook وX تتحدّث أثناء الكتابة. ويستطيع أيضًا قراءة وسوم صفحة موجودة من HTML الخاص بها عبر قراءة الوسوم من HTML، وهي أسرع طريقة لمراجعة صفحة لديك بالفعل. ويفتحه مولد Open Graph مع التركيز على معاينة المشاركة الاجتماعية.