شكل روابط متجرك في واتساب: وسوم Open Graph ومقاس الصورة

حين يشارك عميلك أحد منتجاتك في واتساب، فإن المعاينة التي تظهر تحت الرابط، بعنوانها ووصفها المختصر وصورتها، تأتي من وسوم Open Graph ‏(وسوم في رأس الصفحة تحدد كيف يظهر الرابط عند مشاركته). وفيسبوك وتطبيقات أخرى تقرأ الوسوم نفسها. إذا غابت هذه الوسوم، أو لم تستوفِ الصورة شروط واتساب، فقد تظهر المعاينة دون صورة، أو بنص خاطئ، أو لا تظهر أصلًا. وحين يُشارك منتج في محادثة، تكون هذه المعاينة أول ما يراه المشتري منه.

ما يحتاجه واتساب وفيسبوك

يقول توثيق ميتا الخاص بواتساب:

الوسوم og:title وog:description وog:url مطلوبة. أما og:image فاختياري، لكن المعاينة دونه تظهر بلا صورة.
يجب أن يكون حجم الصورة أقل من 600 كيلوبايت، وعرضها 300 بكسل على الأقل، وألا تزيد نسبة عرضها إلى ارتفاعها على 4:1.
يجب أن يقع رأس الصفحة <head> ضمن أول 300 كيلوبايت من HTML. والسكربتات أو التنسيقات الكبيرة المكتوبة داخل الصفحة قبل الوسوم قد تدفعها إلى ما بعد هذا الحد.
استخدم في og:url رابطًا نظيفًا دون معاملات تتبّع.
يظهر العنوان في سطرين على الأكثر، والوصف في سطر أو سطرين، وتقول ميتا إن «80 حرفًا تكفي» للوصف.

وبالنسبة لفيسبوك، توصي ميتا بصورة لا تقل عن 1200 × 630 بكسل (بنسبة 1.91:1)، بحد أدنى 200 × 200 بكسل وحد أقصى 8 ميجابايت. وإضافة og:image:width وog:image:height تسمح لزاحفها بأن «يعرض الصورة فورًا». لذلك تناسب صورة JPEG بمقاس 1200 × 630 ومضغوطة إلى أقل من 600 كيلوبايت المنصتين معًا.

أما بروتوكول Open Graph نفسه فيتطلب og:title وog:type وog:image وog:url، ويستخدم property= لا name=، ويحدد اللغة عبر og:locale بصيغة language_TERRITORY، أي ar_SA للعربية في السعودية:

<meta property="og:title" content="عطر عود، 50 مل">
<meta property="og:description" content="عود ثابت الرائحة، مع توصيل إلى كل مناطق المملكة.">
<meta property="og:url" content="https://example.com/products/oud-50ml">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/share/oud-50ml-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="زجاجة عطر عود، 50 مل">
<meta property="og:locale" content="ar_SA">
<meta property="og:locale:alternate" content="en_US">
<meta name="twitter:card" content="summary_large_image">

والسطر الأخير وسم بطاقة X ‏(تويتر سابقًا)، وتستخدمه X لاختيار شكل البطاقة.

كيف تتحقق

افتح مصدر الصفحة الرئيسية وصفحة منتج، وابحث عن og:.
افتح رابط og:image في المتصفح، ثم تحقق من حجم الملف وأبعاده.
الصق الرابط في محادثة واتساب وانظر إلى المعاينة قبل الإرسال.
استخدم أداة Sharing Debugger من ميتا لترى الوسوم التي يقرؤها زاحف فيسبوك.
شغّل الفحص المجاني: يتحقق «فحص المتجر — أحمد فايد» من وجود og:title وog:description وog:image ومن أن الصورة تُحمَّل، ويتحقق أيضًا من وسم twitter:card ومن أيقونة الموقع (favicon).

كيف تصلح المشكلة

سلة وزد وشوبيفاي

في المنصات المستضافة تكتب المنصة أو القالب (الثيم) هذه الوسوم من اسم متجرك وأوصافك وصورك. لم أتحقق من الإعداد الذي تأتي منه صورة الصفحة الرئيسية في كل منصة، فابحث عن رابط og:image في مصدر صفحتك الرئيسية، وطابقه مع الشعار أو البنر أو إعداد صورة المشاركة الذي جاء منه، ثم استبدل تلك الصورة بنسخة بمقاس 1200 × 630 وحجم أقل من 600 كيلوبايت. وفي صفحات المنتجات ضع أهم الكلمات في بداية اسم المنتج ووصفه، لأن المعاينة لا تعرض إلا سطرًا أو سطرين.

ووردبريس وووكومرس (WordPress/WooCommerce)

إضافات السيو تضيف عادة وسوم Open Graph وحقلًا لصورة المشاركة في كل صفحة. تأكد أن مصدرًا واحدًا فقط يطبع وسوم og:: إضافة واحدة أو القالب، لا الاثنين.

متجر مبرمج خصيصًا

أضف الوسوم السابقة إلى كل قوالب الصفحات، واملأها من بيانات المنتج، وضعها قريبًا من أعلى <head>.

المتاجر ثنائية اللغة

أيًّا كانت منصتك، إذا كان لمتجرك نسختان عربية وإنجليزية فيجب أن تحمل كل نسخة وسومها بلغتها: العنوان والوصف ونص الصورة البديل بالعربية في الصفحة العربية، مع og:locale بقيمة ar_SA، وبالإنجليزية في الصفحة الإنجليزية مع en_US أو رمز إنجليزي آخر، وأن تذكر كل نسخة لغة الأخرى في og:locale:alternate. وهكذا يرى من يشارك الرابط العربي معاينة عربية.

أيقونة الموقع (favicon)

تعرض جوجل أيقونة موقعك بجانب صفحاتك في نتائج البحث. أضف <link rel="icon"> إلى الصفحة الرئيسية، واستخدم أيقونة أكبر من 48 × 48 بكسل، وتأكد أن robots.txt لا يمنع Googlebot أو Googlebot-Image من جلبها.

أخطاء شائعة

صورة PNG بحجم 3 ميجابايت في og:image، أي أكبر بكثير من حد واتساب البالغ 600 كيلوبايت.
مسار نسبي في og:image بدل رابط كامل يبدأ بـ https://.
كتابة name="og:title" بدل property="og:title".
معاملات تتبّع داخل og:url.
وسوم og: مكررة من إضافة ومن القالب.
وصف لا تقول أول 80 حرفًا منه شيئًا مفيدًا.

شغّل «فحص المتجر — أحمد فايد» المجاني لتعرف هل روابط متجرك مهيأة للمشاركة. إذا أردت مساعدة في إصلاح ذلك، تواصل معي عبر واتساب ‎+20 102 702 0701 أو عبر ahmed-fayed.com.