وسوم Open Graph
Technical & Infrastructureوسوم Meta تتحكّم في طريقة ظهور المحتوى عند مشاركته على منصات التواصل مثل Facebook.
التعريف
وسوم Open Graph (أو OG) هي وسوم Meta من نوع HTML تُوضع داخل قسم `<head>` لصفحة الويب، وتتحكّم في طريقة ظهور تلك الصفحة عند مشاركة رابطها على منصات التواصل الاجتماعي وتطبيقات المراسلة وسائر الخدمات التي تُولّد معاينات للروابط. أنشأ Facebook هذا البروتوكول في الأصل عام 2010، ومنذ ذلك الحين أصبح المعيار الموحّد لمعاينات الروابط عبر الويب. تُحدّد وسوم OG أربع خصائص أساسية: `og:title` (العنوان الظاهر في المعاينة)، و`og:description` (نص الملخّص)، و`og:image` (الصورة المصغّرة للمعاينة)، و`og:url` (الرابط الأساسي). كما تُوفّر خصائص إضافية مثل `og:type` و`og:site_name` و`og:locale` سياقًا أوسع. وفي غياب وسوم OG، تحاول المنصّات تخمين ما يجب عرضه عبر استخراج محتوى الصفحة، وهو ما يُفضي غالبًا إلى صور معطوبة أو نصوص مبتورة أو محتوى غير ملائم.
لماذا يهم
كلّ رابط يُشارَك على وسائل التواصل يُولّد بطاقة معاينة. هذه البطاقة هي أوّل ما يراه الناس، وغالبًا ما تكون الشيء الوحيد الذي يطّلعون عليه قبل أن يقرّروا النقر. صورة OG مُهيَّأة بعناية، وعنوان واضح، ووصف جذّاب — كلّها عوامل قد تُضاعف معدّلات النقر مقارنةً بمعاينة عامّة أو غائبة. وبالنسبة إلى الناشرين الذين يوزّعون [الكتب التفاعلية](/glossary/flipbook) عبر القنوات الاجتماعية، تعمل بطاقة المعاينة بوصفها إعلانًا مصغّرًا للمحتوى. والمعاينة المعطوبة أو الباهتة تُهدر الانتشار الذي وفّرته المشاركة. كما تُؤثّر وسوم OG في طريقة ظهور الروابط داخل تطبيقات المراسلة مثل WhatsApp و Slack و iMessage، أي إنّ تأثيرها على سلوك النقر يمتدّ إلى ما هو أبعد من خلاصات التواصل الاجتماعي.
كيف يعمل في FlipLink
تتيح لك ميزة [SEO ومعاينات التواصل الاجتماعي](/features/seo-and-social-previews) في FlipLink ضبط وسوم OG لكلّ منشور. تُحدّد عنوانًا مخصّصًا ووصفًا وصورة معاينة من إعدادات المنشور، ثمّ يُولّد FlipLink وسوم Meta الصحيحة `og:title` و`og:description` و`og:image` و`og:url` و`og:type` تلقائيًا. يعني ذلك أنّ كلّ رابط كتاب تفاعلي تُشاركه يعرض بطاقة معاينة أنيقة وموحّدة الهوية البصرية، دون الحاجة إلى أيّ تعديل في HTML. ويمكن أن تكون صورة OG هي صفحة الغلاف للكتاب التفاعلي أو رسمًا مخصّصًا مُصمَّمًا للمشاركة الاجتماعية.
قائمة التحقّق للإعداد
اتّبع هذه الخطوات لضبط وسوم OG بشكل صحيح وتحقيق أقصى أثر للمشاركة الاجتماعية:
1. **اضبط og:title** — اجعله أقلّ من ٦٠ حرفًا. استخدم عنوانًا وصفيًّا يتضمّن موضوع المحتوى، لا اسم علامتك التجارية فحسب. مثال: "كتالوج تشكيلة الربيع | YourBrand" بدلًا من "YourBrand" وحدها.
2. **اكتب og:description** — استهدف ما بين ١٢٠ و١٥٥ حرفًا. اذكر القيمة المُقدَّمة أو دعوة إلى إجراء. صِف ما سيجده القارئ داخل الكتاب التفاعلي.
3. **اختر og:image** — استخدم صورة بدقّة لا تقلّ عن ١٢٠٠×٦٣٠ بكسل. صفحة الغلاف للكتاب التفاعلي خيار جيّد، لكنّ رسمًا اجتماعيًّا مخصّصًا يتضمّن نصًّا مُتراكِبًا قد يحقّق أداءً أفضل. تجنّب الصور المزدحمة بنصوص صغيرة، لأنّها تُعرض بحجم مصغّر.
4. **تحقّق من og:url** — يجب أن يكون [الرابط القانوني](/glossary/canonical-url) للمنشور. إذا كان الكتاب التفاعلي متاحًا عبر أكثر من رابط، فينبغي أن يُشير `og:url` إلى الرابط الأساسي.
5. **اضبط og:type** — استخدم "website" لصفحات الهبوط و"article" للمنشورات الفردية أو مقالات المدوّنة.
6. **اختبر قبل المشاركة** — استخدم Sharing Debugger من Facebook، أو Card Validator من Twitter، أو Post Inspector من LinkedIn لمعاينة كيف سيظهر رابطك قبل مشاركته علنًا.
الأسئلة الشائعة
**ماذا يحدث إذا لم أضبط وسوم OG؟**
ستُحاول منصّة التواصل استخراج صفحتك وتخمين العنوان والوصف والصورة. تكون النتائج غير متوقّعة: قد تظهر صورة عشوائية من الصفحة، أو عنوان HTML مبتور، أو لا تظهر معاينة إطلاقًا. ضبط وسوم OG صراحةً يُلغي هذا التخمين تمامًا.
**هل تُؤثّر وسوم OG في ترتيب SEO؟**
لا تُؤثّر وسوم OG تأثيرًا مباشرًا في ترتيب محرّكات البحث. غير أنّها تُؤثّر بشكل ملحوظ في معدّلات النقر على الروابط المُشاركة، وهو ما يجلب الزيارات. وكثرة الزيارات والتفاعل قد تُحسّن ظهورك في البحث بصورة غير مباشرة مع مرور الوقت.
**هل وسوم OG هي نفسها بطاقات Twitter؟**
يمتلك Twitter وسوم Meta خاصّة به (`twitter:card` و`twitter:title` و`twitter:image`)، لكنّه يلجأ إلى وسوم OG حين لا تكون الوسوم الخاصّة بـ Twitter موجودة. وتعتمد معظم المنصّات — بما فيها LinkedIn و WhatsApp و Slack و iMessage — على وسوم OG مصدرًا أساسيًّا لمعاينات الروابط.
التفاصيل التقنية
تتّبع وسوم OG بنية HTML بسيطة تُوضع داخل عنصر `<head>`:
- `og:title` — العنوان المعروض في المعاينة. ينبغي أن يختلف عن وسم `<title>` للصفحة إذا كان عنوان الصفحة يتضمّن مسارات تنقّل أو لواحق على مستوى الموقع لا تُناسب السياق الاجتماعي.
- `og:description` — ملخّص مُوجز. خلافًا لوصف Meta المُستخدَم لمحرّكات البحث، يُفضَّل أن يكون وصف OG مُحسَّنًا للسياق الاجتماعي: أقصر وأكثر مباشرةً وأقرب إلى الدعوة إلى إجراء.
- `og:image` — رابط مطلق لملفّ الصورة. يُوصي Facebook بدقّة ١٢٠٠×٦٣٠ بكسل. والصور الأصغر من ٢٠٠×٢٠٠ بكسل قد لا تظهر على بعض المنصّات.
- `og:type` — يُصنّف المحتوى. القيم الشائعة هي "website" و"article" و"product" و"video.other".
- `og:url` — الرابط القانوني. يمنع ذلك ازدواج بطاقات المعاينة حين يكون المحتوى نفسه متاحًا عبر أكثر من رابط.
- `og:locale` — يُحدّد لغة المحتوى (مثل "en_US" و"de_DE"). مفيد للمنشورات متعدّدة اللغات.
عند مشاركة رابط، يجلب زاحف المنصّة الصفحةَ ويقرأ وسوم OG من شيفرة HTML ثمّ يُخزّن النتيجة في ذاكرة التخزين المؤقّت. لهذا السبب لا تظهر التعديلات على وسوم OG فورًا على المنصّات التي خزّنت المعاينة القديمة مسبقًا. استخدم أداة التشخيص الخاصّة بكلّ منصّة لإجبارها على إعادة الاستخراج بعد تحديث الوسوم.
مصطلحات ذات صلة
بوابة الدفع
خدمة تعالج المدفوعات الإلكترونية، مثل Stripe، وتُمكّن من بيع المستندات عبر FlipLink.
PDF.js
مكتبة JavaScript مفتوحة المصدر من Mozilla تعرض ملفات PDF مباشرةً داخل متصفّحات الويب.
تطبيق ويب تقدّمي (PWA)
تطبيق ويب يعمل دون اتصال ويمكن تثبيته على الأجهزة كتطبيق أصلي.
التصميم المتجاوب
تكييف التخطيط والمحتوى تلقائياً ليعمل بكفاءة على شاشات بمختلف الأحجام والأجهزة.
التضمين المتجاوب
كود تضمين يضبط حجم الكتاب التفاعلي تلقائياً ليلائم أيّ حاوية أو عرض شاشة.
ميزات ذات صلة
متوفر بلغات أخرى
هل أنت مستعد لتحويل
ملفاتك؟
انضمّ إلى آلاف الشركات التي تستخدم FlipLink لتحويل ملفاتها إلى محتوى جذّاب وتفاعلي. ابدأ مجاناً — بلا بطاقة ائتمان.