ما ستتعلمه
بنهاية هذا الدرس، ستفهم ما هي علامات OpenGraph، ولماذا هي مهمة لتحسين محركات البحث، وكيفية تطبيقها بشكل صحيح على موقعك الإلكتروني لتعزيز التفاعل على وسائل التواصل الاجتماعي ونسب النقر.
ما هي علامات OpenGraph؟
علامات OpenGraph عبارة عن أجزاء من التعليمات البرمجية تتحكم في كيفية ظهور المحتوى عند مشاركته على منصات التواصل الاجتماعي مثل فيسبوك، ولينكدإن، وتويتر، وواتساب. وقد طورتها فيسبوك عام 2010، وتُستخدم الآن على نطاق واسع عبر الإنترنت.
مثال بسيط: عندما تشارك رابطًا على فيسبوك، هل لاحظت كيف يظهر عنوان ووصف وصورة؟ هذا هو عمل OpenGraph.
لماذا تُعدّ علامات OpenGraph مهمة لتحسين محركات البحث؟
لا تُحسّن علامات OpenGraph ترتيبك في جوجل بشكل مباشر، ولكنها تؤثر بشكل كبير على استراتيجية تحسين محركات البحث الخاصة بك بهذه الطرق:
ارتفاع معدلات النقر إلى الظهور (CTR)
تُساهم العلامات المُحسّنة جيدًا في إنشاء معاينات جذابة تُشجع على المزيد من النقرات من وسائل التواصل الاجتماعي.
تجربة أفضل للمستخدم
يرى المستخدمون بالضبط ما يمكن توقعه قبل النقر، مما يقلل من معدلات الارتداد.
مراقبة العلامة التجارية
أنت من يقرر الصورة والعنوان والوصف الذي يمثل محتواك على منصات التواصل الاجتماعي.
زيادة المشاركات على وسائل التواصل الاجتماعي
تؤدي المعاينات الجذابة إلى المزيد من المشاركات، مما قد يؤدي إلى زيادة حركة المرور والروابط الخلفية.
علامات OpenGraph الأساسية التي تحتاجها
فيما يلي العلامات الأساسية الأربع لـ OpenGraph التي يجب أن تحتوي عليها كل صفحة:
og:title – علامة العنوان الخاص بك
العنوان الذي يظهر في معاينات وسائل التواصل الاجتماعي.
<meta property="og:title" content="10 SEO Tips to Rank #1 on Google" />أفضل الممارسات للعناوين
اجعلها أقل من 60 حرفًا لعرضها بشكل مثالي.
og:description – علامة الملخص الخاصة بك
ملخص موجز لمحتواك.
<meta property="og:description" content="Learn proven SEO strategies that helped 500+ websites reach the first page of Google in 2025." />أفضل الممارسات في كتابة الأوصاف
استهدف كتابة نص يتراوح بين 155 و160 حرفاً. اجعله جذاباً ومليئاً بالأحداث.
og:image – علامتك المرئية
الصورة التي تظهر مع رابطك.
<meta property="og:image" content="https://yoursite.com/images/seo-tips.jpg" />أفضل الممارسات للصور
- استخدم 1200 × 630 بكسل (الحجم الموصى به)
- حافظ على حجم الملف أقل من 8 ميجابايت
- استخدم صيغة JPG أو PNG
og:url – علامة الرابط الخاصة بك
عنوان URL الأساسي لصفحتك.
<meta property="og:url" content="https://yoursite.com/seo-tips" />أفضل الممارسات لعناوين المواقع الإلكترونية
استخدم دائمًا عنوان URL الكامل والمطلق.
علامات مهمة إضافية
بالإضافة إلى العلامات الأربع الأساسية، توفر هذه العلامات تحكمًا إضافيًا في وجودك على وسائل التواصل الاجتماعي.
og:type – علامة نوع المحتوى
يحدد نوع المحتوى.
<meta property="og:type" content="article" />أنواع المحتوى الشائعة
- موقع الكتروني
- البند
- الفيديو
- المنتج
og:site_name – علامة اسم العلامة التجارية
موقعك الإلكتروني أو اسم علامتك التجارية.
<meta property="og:site_name" content="ClickRank SEO Academy" />og:locale – علامة اللغة
لغة وموقع محتواك.
<meta property="og:locale" content="en_US" />دليل التنفيذ خطوة بخطوة
اتبع هذه الخطوات الأربع البسيطة لإضافة علامات OpenGraph إلى موقعك الإلكتروني.
الخطوة 1: أضف الوسوم إلى قسم رأس HTML الخاص بك
ضع جميع علامات OpenGraph داخل <head> قسم من مستند HTML الخاص بك.
الخطوة الثانية: التخصيص لكل صفحة
يجب أن تحتوي كل صفحة على علامات og:title وog:description وog:url فريدة.
الخطوة 3: اختبر علاماتك
استخدم أداة تصحيح أخطاء المشاركة في فيسبوك أو أداة فحص المنشورات في لينكدإن لمعاينة كيفية ظهور المحتوى الخاص بك.
الخطوة 4: مراقبة الأداء
تتبع حركة الإحالات من وسائل التواصل الاجتماعي Google Analytics لقياس الفعالية.
مثال من واقع الحياة: التنفيذ الكامل
إليك كيف يجب أن تبدو تدوينة مدونة حول تحسين محركات البحث:
<head>
<meta property="og:title" content="Master Keyword Research in 5 Simple Steps" />
<meta property="og:description" content="Discover how to find profitable keywords that drive organic traffic. Includes free tools and templates." />
<meta property="og:image" content="https://clickrank.com/images/keyword-research-guide.jpg" />
<meta property="og:url" content="https://clickrank.com/keyword-research-guide" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="ClickRank SEO Academy" />
<meta property="og:locale" content="en_US" />
</head>الأخطاء الشائعة لتجنب
تعلم من هذه الأخطاء الخمسة التي تضر بأدائك على وسائل التواصل الاجتماعي.
الخطأ الأول: استخدام نفس الوسوم في كل صفحة
تحتاج كل صفحة إلى علامات فريدة تصف محتواها المحدد بدقة.
لماذا هذه المسائل
تؤدي العلامات العامة إلى إرباك المستخدمين وتقليل معدلات النقر.
الخطأ الثاني: نسيان تحديث روابط الصور
تؤدي روابط الصور المعطلة إلى معاينات عامة بدون صور.
كيف تصلحها
استخدم دائمًا عناوين URL المطلقة واختبرها قبل النشر.
الخطأ الثالث: تجاهل أبعاد الصورة
الصور الصغيرة جدًا أو ذات نسبة العرض إلى الارتفاع الخاطئة يتم اقتصاصها بشكل سيئ.
نقدم الحلول الذكية
التزم بدقة 1200 × 630 بكسل للحصول على معاينات متناسقة واحترافية.
الخطأ الرابع: كتابة أوصاف عامة
عبارة "تفضل بزيارة موقعنا الإلكتروني" لا تحفز النقرات. كن دقيقاً بشأن القيمة التي تقدمها.
ماذا تفعل بدلا من ذلك
ركز على الفوائد وقم بتضمين دعوة واضحة لاتخاذ إجراء.
الخطأ الخامس: عدم إجراء الاختبار قبل النشر
تأكد دائمًا من صحة علاماتك باستخدام أدوات تصحيح الأخطاء قبل نشرها.
أدوات الاختبار التي يجب استخدامها
يكتشف كل من مصحح أخطاء مشاركة فيسبوك ومدقق منشورات لينكد إن الأخطاء مبكراً.
مقارنة بين OpenGraph و Twitter Cards
على الرغم من أن OpenGraph يعمل على معظم المنصات، إلا أن تويتر يستخدم نظامه الخاص المسمى Twitter Cards. وتلجأ العديد من المنصات إلى OpenGraph في حال عدم توفر Twitter Cards.
تطبيق كلا النظامين
لتحقيق أقصى قدر من التوافق، استخدم كلاً من OpenGraph و Twitter Cards:
<!-- OpenGraph -->
<meta property="og:title" content="Your Title" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />متى تستخدم كل
استخدم OpenGraph من أجل:
- فيسبوك، لينكد إن، واتساب، ومعظم منصات التواصل الاجتماعي
استخدم بطاقات تويتر من أجل:
- تويتر ومنصة X تحديدا
أدوات لاختبار علامات OpenGraph الخاصة بك
تساعدك هذه الأدوات الأربع في التحقق من صحة تطبيق OpenGraph الخاص بك ومعاينته.
Facebook مشاركة مصحح الأخطاء
الرابط: developers.facebook.com/tools/debug
ماذا يفعل
يعرض بالضبط كيف يظهر محتواك على فيسبوك ويقوم بمسح ذاكرة التخزين المؤقت.
ينكدين بوست المفتش
الرابط: linkedin.com/post-inspector
ماذا يفعل
يعرض محتواك كما سيظهر في موجزات لينكدإن.
OpenGraph.xyz
أداة معاينة سريعة لمنصات متعددة
ماذا يفعل
يختبر علاماتك عبر فيسبوك، وتويتر، ولينكد إن، وغيرها في وقت واحد.
ملحقات المتصفح
قم بتثبيت أدوات فحص OpenGraph مثل "OpenGraph Preview" لمتصفح Chrome
ماذا يفعل
تحقق من علامات OpenGraph لأي صفحة مباشرة من متصفحك.
مستخدمو ووردبريس: سهولة التنفيذ
إذا كنت تستخدم ووردبريس، فإن هذه الإضافات تجعل تطبيق OpenGraph بسيطًا.
Yoast كبار المسئولين الاقتصاديين
إنشاء OpenGraph تلقائيًا مع خيارات التخصيص
الميزات الرئيسية
- محرر المعاينة المرئية
- التوثيق التلقائي
- التكامل وسائل الاعلام الاجتماعية
Rank Math
معاينة وتحرير مدمجان لوسائل التواصل الاجتماعي
الميزات الرئيسية
- التحسين بنقرة واحدة
- دعم منصة متعددة
- المعاينة في الوقت الفعلي
All in One SEO
إدارة شاملة للعلامات الوصفية الاجتماعية
الميزات الرئيسية
- التخصيص المتقدم
- خيارات التحرير الجماعي
- تتبع الأداء
قياس النجاح
تتبع هذه المقاييس لتقييم تحسين OpenGraph الخاص بك.
حركة الإحالة الاجتماعية
تحقق من إحصاءات جوجل لمعرفة الزيادات القادمة من فيسبوك، لينكد إن، إلخ.
كيفية التتبع
انتقل إلى الاستحواذ > جميع الزيارات > المصدر/الوسيط في Google Analytics.
معدل المشاركة
راقب الإعجابات والمشاركات والتعليقات على الروابط المشتركة
ما الذي تبحث عنه
يشير ارتفاع مستوى التفاعل إلى عروض تقديمية أكثر جاذبية.
معدل النقر
قارن نسبة النقر إلى الظهور قبل وبعد التحسين
الأهداف المعيارية
استهدف تحقيق تحسن بنسبة 20% على الأقل في معدل النقر على وسائل التواصل الاجتماعي.
ترتد قيم
انخفاض معدلات الارتداد يشير إلى تطابق أفضل للمحتوى
مقياس الهدف
تشير معدلات الارتداد التي تقل عن 50% إلى توافق جيد بين المحتوى والمعاينة.
الوجبات السريعة الرئيسية
إليك ما يجب أن تتذكره بشأن علامات OpenGraph:
- تتحكم علامات OpenGraph في كيفية ظهور المحتوى الخاص بك على وسائل التواصل الاجتماعي
- أربع علامات أساسية: og:title، og:description، og:image، og:url
- للحصول على أفضل النتائج، يجب أن تكون أبعاد الصور 1200 × 630 بكسل
- اختبر علاماتك دائمًا قبل النشر.
- قم بتخصيص العلامات لكل صفحة لتحقيق أقصى قدر من التأثير
- قم بمراقبة حركة الإحالات من وسائل التواصل الاجتماعي لقياس النجاح.
ماذا يحدث إذا لم أضف علامات OpenGraph إلى موقعي الإلكتروني؟
بدون علامات OpenGraph، ستقوم منصات التواصل الاجتماعي تلقائيًا بسحب المحتوى من صفحتك، مما يؤدي غالبًا إلى معاينات رديئة الجودة مع صور خاطئة أو نصوص غير مكتملة. هذا يقلل من معدلات النقر ويجعل محتواك أقل قابلية للمشاركة. إضافة العلامات المناسبة تمنحك تحكمًا كاملًا في كيفية ظهور محتواك.
هل تعمل علامات OpenGraph على جميع منصات التواصل الاجتماعي؟
تعمل علامات OpenGraph على معظم المنصات الرئيسية، بما في ذلك فيسبوك، ولينكدإن، وواتساب، وبينترست، وسلاك. يستخدم تويتر بشكل أساسي بطاقات تويتر، ولكنه يلجأ إلى OpenGraph في حال عدم توفر البطاقات. أما إنستغرام، فلا يعرض معاينات الروابط في المنشورات، لذا لا تنطبق عليه علامات OpenGraph.
كم من الوقت يستغرق ظهور التغييرات في OpenGraph؟
تظهر التغييرات فورًا عند مشاركة المنشورات الجديدة. مع ذلك، تحتفظ منصات التواصل الاجتماعي بالبيانات القديمة مؤقتًا، لذا لن يتم تحديث الروابط التي تمت مشاركتها سابقًا تلقائيًا. استخدم أداة تصحيح أخطاء المشاركة في فيسبوك أو أداة فحص المنشورات في لينكدإن لمسح ذاكرة التخزين المؤقت وفرض تحديث عناوين URL التي تمت مشاركتها مسبقًا.
هل يمكنني استخدام صور OpenGraph مختلفة لمنصات التواصل الاجتماعي المختلفة؟
نعم، يمكنك تحديد صور خاصة بكل منصة. على سبيل المثال، استخدم og:image للمنصات العامة وtwitter:image لتويتر. ستستخدم كل منصة وسمها الخاص إن وُجد، وإلا ستستخدم og:image. يتيح لك هذا تحسين الصور لتناسب أبعاد كل منصة.
أين يجب أن أضع علامات OpenGraph في ملف HTML الخاص بي؟
ضع جميع وسوم OpenGraph داخل قسم <head> في مستند HTML الخاص بك، قبل وسم إغلاق <head>. يجب أن تظهر بعد وسم العنوان ووسوم التعريف الأخرى. لا يؤثر الترتيب على الوظائف، ولكن وضعها معًا يُحسّن تنظيم الكود.
هل أحتاج إلى وضع علامات OpenGraph في كل صفحة؟
نعم، يجب أن تحتوي كل صفحة يُحتمل مشاركتها على وسائل التواصل الاجتماعي على علامات OpenGraph فريدة. يشمل ذلك منشورات المدونة، وصفحات المنتجات، والصفحات المقصودة، وحتى صفحتك الرئيسية. ستظهر معاينات عامة أو غير صحيحة للصفحات التي لا تحتوي على علامات عند مشاركتها، مما يؤثر سلبًا على معدلات النقر.
