الدليل الشامل لإضافة علامات Open Graph لمدونة بلوجر 2025
📌 ما هي علامات Open Graph (OG)؟
علامات Open Graph هي بيانات وصفية (Meta Tags) تُضاف إلى رأس موقعك لتحديد كيفية ظهور المحتوى عند مشاركته على وسائل التواصل الاجتماعي مثل فيسبوك، تويتر، واتساب، لينكدإن، وغيرها.
بدون هذه العلامات، قد لا تعرض المنصات الاجتماعية عنوان المقال، الصورة، أو الوصف بشكل صحيح.
✨ لماذا يجب عليك إضافة علامات Open Graph إلى بلوجر؟
تحسين ظهور المقالات على السوشيال ميديا
- ضمان ظهور العنوان، الصورة، والوصف بشكل منسق وجذاب.
زيادة معدل النقر (CTR)
- المشاركات ذات العلامات الوصفية تجذب انتباه أكثر وتزيد الزيارات.
دعم منصات متعددة
- تعمل مع فيسبوك، تويتر، واتساب، تلجرام، Slack، وغيرها.
🛠 3 طرق لإضافة Open Graph Meta Tags في بلوجر 2025
1 إضافة الكود يدوياً إلى قالب بلوجر (الأفضل للمحترفين)
- انتقل إلى "الموضوع" (Theme) → "تعديل HTML".
- ابحث عن
<head>وأضف الكود التالي تحته:
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="<data:blog.pageTitle/>"/>
<meta property="og:type" content="<data:blog.pageType == 'item' ? 'article' : 'website'/>"/>
<meta property="og:url" content="<data:blog.canonicalUrl/>"/>
<meta property="og:image" content="<data:blog.postImageUrl/>"/>
<meta property="og:description" content="<data:blog.metaDescription/>"/>
<meta property="og:site_name" content="<data:blog.title/>"/>
<meta property="og:locale" content="ar_AR" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="<data:blog.pageTitle/>"/>
<meta name="twitter:description" content="<data:blog.metaDescription/>"/>
<meta name="twitter:image:src" content="<data:blog.postImageUrl/>"/>
<meta name="twitter:site" content="@YourTwitterHandle"/>2 استخدام إضافة جاهزة (أسهل للمبتدئين)
- انتقل إلى "الإضافات" (
Plugins) في لوحة تحكم بلوجر. - ابحث عن
"Social Meta Tags"أو"Open Graph Meta Tags". - ثبّت إحدى هذه الإضافات:
"Social Metadata , Open Graph Tags""Blogger SEO Meta Tags""Meta Tag Manager for Blogger"
3 إضافة ديناميكية عبر JavaScript (للمقالات فقط)
<b:if cond='data:blog.pageType == "item"'>
<script>
const postImage = document.querySelector(".post-body img")?.src || "رابط-صورتك-الافتراضية";
const metaDesc = document.querySelector("meta[name='description']")?.content || "وصف مدونتك";
document.write(`
<meta property="og:title" content="${document.title}"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="${window.location.href}"/>
<meta property="og:image" content="${postImage}"/>
<meta property="og:description" content="${metaDesc}"/>
<meta name="twitter:card" content="summary_large_image"/>
`);
</script>
</b:if>🔍 نصائح احترافية لعلامات Open Graph في 2025
✅ استخدم صورًا بأبعاد مثالية (1200x630 بيكسل لفيسبوك).
✅ اختر وصفًا جذابًا (لا يزيد عن 300 حرف).
✅ اضف علامات المقالات (للتدوينات) مثل:
<meta property="article:published_time" content="<data:blog.post.timestamp/>"/>
<meta property="article:author" content="اسم الكاتب"/>
<meta property="article:div" content="التصنيف"/>✅ تحقق من العلامات باستخدام:
الخلاصة: كيف تضمن ظهور مشاركاتك بشكل مثالي؟
| المشكلة | الحل |
|---|---|
| الصورة لا تظهر | تأكد من أن الصور غير محمية بـ "منع hotlinking" |
| الوصف غير واضح | أضف وصفًا Meta في إعدادات بلوجر |
| العلامات لا تعمل | استخدم أدوات الفحص لتنظيف كاش فيسبوك وتويتر |
🎯 الخلاصة النهائية
إضافة Open Graph Tags إلى بلوجر ضروري لـ تحسين المشاركات على السوشيال ميديا، ويمكنك فعل ذلك بـ 3 طرق:
- يدويًا عبر كود HTML (للتحكم الكامل).
- باستخدام إضافات جاهزة (أسهل للمبتدئين).
- بطريقة ديناميكية بجافاسكريبت (للمقالات فقط).
جربها الآن وشاهد الفرق في مشاركاتك!
