في المنطقة العربية، جزء كبير من مشاركة الروابط لا يحدث في محركات البحث بل في واتساب ومجموعاته، وفي X وفيسبوك ولينكدإن وتيليغرام. وعند لصق الرابط، تزور المنصة صفحتك وتقرأ وسومًا محددة لتبني بطاقة المعاينة: صورة وعنوان ووصف قصير. إن لم تجد هذه الوسوم، تخمّن: قد تأخذ شعارًا صغيرًا، أو صورة عشوائية من التذييل، أو لا تعرض أي صورة.
الوسوم الأساسية
<meta property="og:title" content="Oud Perfume 100 ml - 350 SAR">
<meta property="og:description" content="Long-lasting Cambodian oud, free delivery in Riyadh and Jeddah.">
<meta property="og:image" content="https://example.com/og/oud-1200x630.jpg">
<meta property="og:url" content="https://example.com/products/oud-perfume">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Example Store">
<meta property="og:locale" content="ar_SA">
<meta name="twitter:card" content="summary_large_image">في موقع عربي ستكتب طبعًا قيم og:title وog:description بالعربية؛ وضعنا هنا قيمًا لاتينية للحفاظ على اتجاه الكود.
| الوسم | الوظيفة | ملاحظة |
|---|---|---|
og:title |
عنوان البطاقة | يمكن أن يكون أقصر وأكثر جاذبية من <title> |
og:description |
الوصف | سطر أو سطران؛ بعض المنصات تخفيه |
og:image |
الصورة | رابط كامل مطلق عبر HTTPS |
og:url |
العنوان القانوني | يجمع المشاركات من عناوين متعددة |
og:type |
نوع المحتوى | website أو article أو product |
og:locale |
لغة المحتوى | مثل ar_SA أو ar_AR |
twitter:card |
نوع بطاقة X | summary_large_image للصورة الكبيرة |
لاحظ أن وسوم Open Graph تستخدم الخاصية property، بينما وسوم X تستخدم name. يمكنك توليد المجموعة كاملة عبر مولد وسوم الميتا.
صورة المعاينة: المقاس والوزن
- المقاس: 1200×630 بكسل (نسبة 1.91:1). هذا يناسب فيسبوك ولينكدإن وبطاقة X الكبيرة.
- المنطقة الآمنة: ضع النص والشعار في الوسط، فواتساب وبعض التطبيقات تعرض الصورة مقصوصة أو مربعة في بعض الحالات.
- النص على الصورة: قليل وكبير؛ المعاينة تظهر صغيرة على الجوال.
- الوزن: اجعل الصورة خفيفة (بضع مئات من الكيلوبايت على الأكثر)؛ الصور الضخمة قد لا تُعرض في بعض التطبيقات، وخصوصًا واتساب.
- الصيغة: JPEG أو PNG هما الأكثر أمانًا؛ دعم WebP في معاينات بعض المنصات غير مضمون.
- رابط مطلق:
https://example.com/og.jpgلا/og.jpg.
خطوة بخطوة: أصلح معاينة رابطك
- افحص الرابط عبر أداة معاينة Open Graph لترى الوسوم التي تجدها المنصات والصورة التي ستظهر.
- تأكد أن الصفحة لا تتطلب تسجيل دخول ولا تحجب روبوتات المنصات (مثل
facebookexternalhitوLinkedInBotوTwitterbotوWhatsApp) عبر جدار الحماية أو robots.txt. - تأكد أن الوسوم موجودة في HTML الأصلي الذي يرسله الخادم. روبوتات المعاينة غالبًا لا تنفذ JavaScript، فالوسوم التي تضيفها تطبيقات الصفحة الواحدة (SPA) بعد التحميل قد لا تُرى.
- تحقق أن رابط الصورة يعمل ويعيد الرمز 200 وليس محوّلًا عدة مرات.
- حدّث المعاينة المخزنة على كل منصة (القسم التالي).
تحديث المعاينة المخزنة
المنصات تحفظ المعاينة أول مرة تُشارك فيها الصفحة، ولا تعيد قراءتها تلقائيًا فورًا عند تعديلها.
| المنصة | طريقة التحديث |
|---|---|
| فيسبوك وماسنجر | أداة Sharing Debugger ثم “Scrape Again” |
| لينكدإن | أداة Post Inspector |
| X | لا توجد أداة عامة حاليًا؛ تتحدث البطاقة بعد مدة، أو استخدم رابطًا بمعامل جديد |
| واتساب | لا توجد أداة؛ أضف معاملًا مثل ?v=2 إلى الرابط، أو انتظر انتهاء التخزين |
| تيليغرام | يمكن طلب التحديث عبر بوت @WebpageBot |
حيلة المعامل (?v=2) تعمل لأن المنصة ترى عنوانًا جديدًا؛ وجود og:url يشير إلى العنوان الأصلي يضمن أن تُجمع الإحصاءات تحت عنوان واحد.
أخطاء شائعة
- صورة واحدة لكل الموقع: الشعار نفسه على كل المنتجات والمقالات يجعل المشاركات متشابهة ومملة. ولّد صورة لكل صفحة مهمة.
- رابط صورة نسبي أو عبر HTTP.
- صورة محمية من “الربط الساخن” (hotlink protection) فتُحجب عن المنصات.
- وسوم مكررة من القالب وإضافة السيو معًا، فتأخذ المنصة القيمة الأولى الخاطئة.
- نسيان
twitter:cardفتظهر بطاقة صغيرة على X بدل الكبيرة. - عنوان مقطوع: العناوين الطويلة جدًا تُقص؛ اجعل
og:titleفي حدود 60 حرفًا تقريبًا.
العلاقة مع العنوان ووصف الميتا
وسوم Open Graph لا تغني عن <title> وmeta description، فمحركات البحث تعتمد على الأخيرة. والعكس صحيح: إن غابت وسوم og، فقد تستخدم المنصات العنوان والوصف العاديين لكن دون صورة مناسبة. اكتب الاثنين معًا؛ وتجد إرشادات كتابة العنوان والوصف في دليل العنوان ووصف الميتا.
Open Graph في ووردبريس والمتاجر ومنصات الصفحة الواحدة
- ووردبريس: إضافات السيو مثل Yoast وRank Math تضيف وسوم Open Graph تلقائيًا، وتتيح اختيار صورة مشاركة مختلفة لكل مقال من تبويب “التواصل الاجتماعي”. إذا كان القالب يضيف وسومه الخاصة أيضًا، عطّل أحد المصدرين.
- Shopify وسلة وزد: تستخدم عادةً صورة المنتج الأولى كصورة مشاركة. اجعل الصورة الأولى واضحة على خلفية نظيفة، لأنها ما سيظهر في واتساب.
- React وVue وتطبيقات الصفحة الواحدة: إذا كان الموقع يُعرض بالكامل في المتصفح، فلن ترى روبوتات المعاينة الوسوم الخاصة بكل صفحة. الحل هو العرض من الخادم (SSR) أو التوليد المسبق (SSG) للصفحات التي تُشارك.
صور مشاركة مولّدة تلقائيًا
للمدونات والمتاجر الكبيرة، تصميم صورة لكل صفحة يدويًا غير عملي. الحل الشائع هو قالب ثابت (خلفية بهوية العلامة + الشعار) يُكتب عليه عنوان الصفحة آليًا عند النشر. انتبه عند توليد صور بنص عربي إلى دعم اتجاه الكتابة من اليمين إلى اليسار واتصال الحروف؛ بعض مكتبات توليد الصور تعرض الحروف العربية منفصلة أو معكوسة إن لم تُضبط بشكل صحيح.
اللغة والاتجاه في المعاينة
المنصات تعرض نص og:title وog:description كما هو، فتأكد أن العنوان العربي لا يبدأ أو ينتهي برقم أو كلمة لاتينية بطريقة تقلب الترتيب في سطر المعاينة. ويُفضّل أن يحمل وسم og:locale قيمة عربية مثل ar_AR حين يكون المحتوى عربيًا، مع وسوم og:locale:alternate للنسخ بلغات أخرى إن وُجدت.
قائمة تحقق
- كل صفحة مهمة لها
og:titleوog:descriptionوog:imageوog:url. - الصورة 1200×630، خفيفة، برابط مطلق عبر HTTPS، والمحتوى المهم في وسطها.
twitter:cardمضبوط علىsummary_large_image.- الوسوم في HTML الأصلي لا تُضاف عبر JavaScript فقط.
- روبوتات المنصات غير محجوبة.
- بعد أي تعديل، حدّثت المعاينة في فيسبوك ولينكدإن واختبرت في واتساب.