ما هي علامات Open Graph؟ دليل معاينات الروابط والمشاركة الاجتماعية
عندما تشارك رابطًا على Facebook أو LinkedIn أو Slack أو Twitter، تظهر بطاقة معاينة عادة — مع عنوان ووصف وصورة. هذه المعاينات ليست سحرًا. يتم التحكم بها بواسطة علامات Open Graph (OG) في HTML الخاص بصفحتك.
الحصول على علامات Open Graph الصحيحة يعني أن روابطك المشاركة تبدو احترافية وتحصل على المزيد من النقرات. الحصول عليها بشكل خاطئ يعني معاينات قبيحة أو صور مفقودة أو نصوص بديلة عامة.
ما هو بروتوكول Open Graph؟
Open Graph هو بروتوكول أنشأته Facebook في عام 2010 يسمح لصفحات الويب بتحديد كيفية ظهورها عند مشاركتها على منصات التواصل الاجتماعي. يستخدم علامات meta في قسم HTML <head>:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short summary of the page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />
عندما تكتشف منصة تواصل اجتماعي عنوان URL مشترك، تجلب الصفحة وتقرأ هذه العلامات لبناء بطاقة المعاينة.
علامات Open Graph الأساسية
og:title
العنوان المعروض في بطاقة المعاينة. احتفظ به تحت 60 حرفًا للعرض الأفضل عبر المنصات.
<meta property="og:title" content="How to Create Branded Short Links" />
النصائح:
- لا تكرر علامة
<title>فقط — قم بتحسينها للتفاعل الاجتماعي - ضع الكلمات المهمة في البداية
- تجنب الأشياء المثيرة (قد تعاقب المنصات عليها)
og:description
ملخص قصير يظهر تحت العنوان. استهدف 120-160 حرفًا.
<meta property="og:description" content="Create custom branded short links with click tracking and analytics. Set up in 5 minutes." />
og:image
الصورة المعروضة في المعاينة. هذه هي العلامة الأكثر تأثيرًا — المنشورات التي تحتوي على صور تحصل على تفاعل أكثر بكثير.
<meta property="og:image" content="https://example.com/social-preview.jpg" />
متطلبات الصورة حسب المنصة:
| المنصة | الحجم الموصى به | نسبة العرض |
|---|---|---|
| 1200 × 630 بكسل | 1.91:1 | |
| 1200 × 628 بكسل | 1.91:1 | |
| 1200 × 627 بكسل | 1.91:1 | |
| Slack | 500 × 500 بكسل بحد أدنى | أي |
استخدم 1200 × 630 بكسل لتغطية جميع المنصات.
og:url
عنوان URL الأساسي للصفحة. هذا يخبر المنصات بعنوان URL الذي سيتم عرضه ويساعد في منع المحتوى المكرر.
<meta property="og:url" content="https://example.com/page" />
og:type
يصف نوع المحتوى. القيم الشائعة:
website— للصفحات الرئيسية والصفحات العامةarticle— لمنشورات المدونة والمقالاتproduct— لصفحات المنتجات
علامات Twitter Card
تستخدم Twitter علامات meta خاصة بها (بالإضافة إلى Open Graph) لبطاقات المعاينة:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />
إذا لم تكن علامات Twitter card موجودة، تستخدم Twitter علامات Open Graph كبديل. تقوم معظم المواقع بتعيين كليهما للتحكم الأقصى.
كيفية جلب منصات التواصل الاجتماعي لبيانات Open Graph
عندما تشارك عنوان URL:
- 1يزور زاحف المنصة عنوان URL
- 2يقرأ HTML
<head>بحثًا عن علامات OG - 3يخزن بيانات بطاقة المعاينة مؤقتًا
- 4تستخدم المشاركات اللاحقة لنفس عنوان URL الإصدار المخزن مؤقتًا
مهم: التغييرات على علامات OG لا تنعكس فورًا. تقوم المنصات بالتخزين المؤقت بقوة، لذلك قد تحتاج إلى مسح الذاكرة المؤقتة يدويًا (انظر تصحيح الأخطاء أدناه).
تخصيص معاينات الروابط باستخدام Linkly
ماذا لو كنت تشارك عنوان URL لا تتحكم فيه — أو تريد بطاقات معاينة مختلفة لسياقات مختلفة؟
تتيح لك ميزة المعاينات الاجتماعية المخصصة الخاصة بـ Linkly تجاوز بيانات Open Graph لأي رابط مختصر:
- اضبط عنوانًا وصفًا وصورة مخصصة
- معاينات مختلفة للجماهير المختلفة
- لا حاجة لتعديل HTML الخاص بصفحة الوجهة
- يعمل مع أي عنوان URL، حتى الصفحات التي لا تمتلكها
هذا مفيد بشكل خاص عندما:
- مشاركة محتوى من جهات خارجية مع علامتك التجارية الخاصة
- اختبار A/B لبطاقات معاينة مختلفة لمعرفة أيها يحصل على المزيد من النقرات
- صفحة الوجهة لديها علامات OG سيئة أو مفقودة
تصحيح أخطاء علامات Open Graph
Facebook Sharing Debugger
تتيح لك أداة Facebook معاينة وتحديث بيانات OG المخزنة مؤقتًا:
- 1أدخل عنوان URL الخاص بك
- 2انقر فوق Debug
- 3شاهد ما تقرأه Facebook من صفحتك
- 4انقر فوق Scrape Again لمسح الذاكرة المؤقتة
Twitter Card Validator
يعرض المدقق الخاص بـ Twitter كيفية ظهور بطاقتك ويسلط الضوء على أي مشاكل.
LinkedIn Post Inspector
تعاين أداة LinkedIn بطاقة الرابط الخاصة بك وتحديث البيانات المخزنة مؤقتًا.
نصائح عامة
- تحقق من المصدر: اعرض مصدر صفحتك وابحث عن
og:للتحقق من وجود العلامات - استخدم عناوين URL المطلقة: يجب أن تكون عناوين URL للصور مطلقة (تبدأ بـ
https://)، وليست نسبية - اختبر بعد التغييرات: امسح دائمًا ذاكرة المنصة المؤقتة بعد تحديث علامات OG
- تحقق من عرض JavaScript: بعض المنصات لا يمكنها تنفيذ JavaScript، لذا يجب أن تكون علامات OG في استجابة HTML الأولية
الأخطاء الشائعة
- 1علامة og:image مفقودة: المنشورات بدون صور تحصل على نقرات أقل بـ 2-3 مرات
- 2الصورة صغيرة جدًا: استخدم ما لا يقل عن 1200 × 630 بكسل
- 3نسبة عرض خاطئة: يتم قص الصور بطريقة محرجة
- 4ذاكرة مؤقتة قديمة: حدثت علامات OG الخاصة بك ولكنت نسيت مسح ذاكرة المنصات المؤقتة
- 5علامات مكررة: يؤدي وجود علامات OG متعددة من نفس النوع إلى سلوك غير متوقع
- 6صور HTTP: استخدم HTTPS لعناوين URL للصور — تحظر بعض المنصات صور HTTP
- 7عناوين URL نسبية: لا يمكن لزحافات المنصة حل المسارات النسبية
Open Graph لأنواع محتوى مختلفة
منشورات المدونة
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Your Name" />
المنتجات
<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />
مقاطع الفيديو
<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />
الخلاصة
علامات Open Graph هي إضافة صغيرة إلى HTML الخاص بك لها تأثير كبير على كيفية ظهور المحتوى الخاص بك عبر الويب الاجتماعي. الحصول عليها بشكل صحيح — مع العنوان والوصف والصورة الصحيحة — يزيد مباشرة من معدلات النقر عند مشاركة روابطك.
هل تريد معاينات روابط مخصصة بدون تعديل HTML؟ ابدأ مع Linkly وخصص بطاقة المعاينة الاجتماعية لأي رابط مختصر — اضبط عنوانك الخاص والوصف والصورة.
احصل على 100 رابط مختصر وتتبع 500 نقرة شهريًا مجانًا.