إضافة ميتا تاج open graph لمدونات البلوجر للنشر السليم على فيس بوك

  سنستعرض طريقة إضافة ميتا تاج للاوبن قراف الخاص بالفيس بوك بطريقة صحيحة تضمن عدم حدوث مشاكل عند مشاركة روابط المواضيع أو مشاركة الصفحة الرئيسية للمدونة ( بلوجر ) ، وتضمن كذلك عدم التعارض والتكرار بين الميتا تاج الأخرى، وسنشرح الشفرة بالتفصيل وتأثيرها على المدونة.

  بداية أذكر بالتدوينة السابقة وهي ضرورية إن كان هناك ثمة رغبة لتعلم الاصطياد ذاتياً وعدم الاكتفاء باستطعام السمك الصحيح منه والفاسد : التعريف بعلامات الوصف Open Graph الخاصة بالفيس بوك

   تأكد من تواجد "أهم" سطر في مدونات البلوجر

ابحث عن السطر التالي في محرر القالب :

 <b:include data='blog' name='all-head-content'/>

  هذا السطر من اسمه (all-head-content) يولد أهم الأكواد التي ينبغي أن تكون داخل قسم رأس الصفحة HEAD ، وهي كثيرة عبارة عن روابط للخلاصات، وميتا تاق مثل وصف المدونة أو وصف الصفحة ، بل إنه المسؤول عن توليد سطرين لميتا تاق الاوبن قراف سنذكرهما قريباً؛ ولذلك نقول أن بلوجر منصة جاهزه للنشر بنسبة 90% تقريباً لمصادقتها لمحركات البحث والشبكات الإجتماعية كذلك ولكن للأسف ما زال الكثير يعرض أكواد تضر ولا تنفع راجع هذه التدوينة ان شئت.

  من المفيد قبل الخوض في تطبيق الشرح تقوم باستعراض الصفحة المصدرية سواء للصفحة الرئيسية أم لصفحة الرسائل وذلك بالضغط على CTRL+U ، وذلك لفهم واضح لتأثير الكود الذي سأعرضه لك.

   شرح: إضافة ميتا تاج Open Graph  

قبل التطبيق أنصح بما يلي:

• تطبيق الشرح على مدونة تجريبية ، تستخدم نفس قالب المدونة الأصلية.
• إن نجحت في تفعيل الأكواد ونشرت رسائل بشكل سليم في الفيس بوك وذلك في المدونة التجريبية، قم بأخذ نسخة احتياطية من مدونتك الأصلية واحفظها كمرجع أرشيفي للمتغيرات التي أجريتها .
• طبق الأكواد على مدونتك ♥

في موضع مناسب أسفل السطر السابق ، انسخ الكود التالي :

 
<!--OpenGraph START -->
<!--  OpenGraph for Home  -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta expr:content='data:blog.title' property='og:title' />
    <meta content='شعار المدونة' property='og:image' />
</b:if>

<!--  OpenGraph for Posts -->
<b:if cond='data:blog.pageType == "item"'>
    <meta property="og:type" content="article" />
    <meta expr:content='data:blog.pageName' property='og:title' />
    <b:if cond='data:blog.postImageThumbnailUrl == "" '>
        <meta content='شعار المدونة' property='og:image' />
    </b:if>
</b:if>

<!--  OpenGraph description -->
<b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description' />
</b:if>
<b:if cond='data:blog.metaDescription == ""'>
    <meta content='وصف بديل' property='og:description' />
</b:if>

<!-- og:image dimension  -->
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="420" />
<!--OpenGraph END -->

احفظ القالب وجرب أن ميتا تاج open graph تم تطبيقها بنجاح، ويمكنك التأكد بطريقتين :

1. أداة التصحيح التي ذكرتها في التدوينة السابقة ، Sharing Debugger
2. فتح مصدر الصفحة من خلال المتصفح بالضغط على CTRL+U

  شرح كود الميتا تاج بالتفصيل

  يهمنا توفر الميتاتاج الخاصة بالاوبن قراف 1.للصفحة الرئيسية للمدونة ، 2. لصفحات التدوينات ، وسبق ذكرنا أهمها وهي تلك التي تضمن مشاركة ممتازه عبر الفيس بوك، وهي التي ستتأكد أداة التصحيح من توفرها عند فحص المدونة ، وبما أننا سبق وشرحناها فسأسردها من باب التذكير:

• og:image    ←   ← وتمثل صورة شعار المدونة للصفحة الرئيسية أو صورة رأس الرسائل
• og:title       ←   ← عنوان المدونة / الرسائل
• og:description  ← وصف المدونة / الرسائل
• og:url       ←    ← رابط الصفحة الرئيسية / الرسائل
• og:type     ←   ← نوع المحتوى موقع أم مقال، لا أجده مهماً ولكن أداة التصحيح تبحث عنه!

  ميتا تاج open graph للصفحة الرئيسية 

  نبدأ بالسطر 3 : الذي يتحقق بجملة الشرط من أن عنوان الصفحة الحالي هو الصفحة الرئيسية data:blog.homepageURL فإن كان المتصفح يستعرض المدونة في صفحتها الرئيسية سينفذ السطور اللأحقة، وان كان في صفحة أخرى سيتجاوز كامل الجملة الشرطية ويقفز خارج السطر السادس .

  السطر 4 :  يحدد عنوان الصفحة الرئيسية (og:title) الذي هو هنا عنوان المدونة data:blog.title ، إذا لم نكتب هذا السطر فسيضل عنكبوب فيس بوك قادراً على قراءة عنوان المدونة من الوسم title ، ولكن مع ظهور رسالة تحذير ، ولا بأس أن نكون دقيقين في كتابة الكود.

  السطر 5 : يحدد صورة شعار المدونة (og:image)، وهو سطر مهم؛ فبدونه وعند نشر صفحتك الرئيسية على فيسبوك فسوف يلتقط فيس بوك أي صورة تلقائياً، ربما تكون صورة ايقونة مشاركة، أو صورة ملف الكاتب التعريفي، وهذا من الأمور المزعجة حقاً والتي توحي بعدم احترافية الموقع وصاحبها ☺ ؛ لذلك عليك تحديد صورة شعار المدونة أو صورة مخصصة وتكتب رابطها في موضع العبارة ( شعار المدونة ) .

  السطر 18 : جملة شرطية تتحقق من وجود وصف للصفحة ( سواء الرئيسية أم غيرها ) الذي هو وصف المدونة الذي نكتبه في اعدادت المدونة، أو وصف الرسائل الذي نكتبه من خلال محرر البلوجر، فإن كان الوصف موجود فسيتم تنفيذ السطر 19 الذي يعرف قيمة (og:description) .

  السطر 21 : يتحقق من عدم وجود وصف للصفحة ، فإن لم يوجد سينفذ السطر 22 والذي ينتظر منك كتابة وصف مخصص واحد لأي تدوينة ترسلها بدون وصف للبحث ، فإن كان هذا شيء لا يهمك فيمكنك حذف الأسطر ( 21 إلى 23 ) وبالتالي سيظهر المنشور في الفيسبوك بدون وصف، وأعتقد أن المنشور إذا احتوى على عنوان واضح وجذاب بصورة عرض متميزة ممكن جداً الاستغناء عن هذه الأسطر .. الأمر لك!

  السطران 26 و 27 : يحددان مقاس صورة العرض لأي صفحة ؛ وقد شرحت في التدوينة السابقة أن الغرض منهما هو حل مشكلة عدم ظهور الصور عند أول مشاركة ، في الكود حددت المقاس 800 في 420 بيكسل يمكنك تغييرها ان شئت ولكن لا تنسى أن يكون نسبة العرض إلى الطول قريبة من 1.9 .

  هل انتبهت لشيء ؟. لم يُذكر في الكود الميتا تاج og:url للصفحة الرئيسية. والحقيقة أنه لا مشكلة، لأن بلوجر ستولد og:url تلقائياً ، وتستطيع التأكد بعرض مصدر الصفحة .

وفيما يتعلق بالميتا og:type فإن الفيس بوك سيعطيه النوع website كقيمة افتراضية ، فليس هناك داعٍ لكتابته 

ميتا تاج Open Graph لصفحات الرسائل 

    السطور (9 إلى 15) خاصة فقط بصفحات الرسائل أو الصفحات الثابتة وذلك بحكم جملة الشرط في السطر 9 ، ونلاحظ في السطر 10 عرفنا الميتا تاج og:type وأعطيناه القيمة article  وحقيقة لا أعرف كيف سيتعاطى فيس بوك مع النوعين website و article وماهو الفرق، عملياً وحسب تجربتي لم أجد فرقاً، وطالما أنني لا أعلم فالأضمن أن أكتبها!

  السطر 11 : عرفنا ميتا تاج العنوان og:title لصفحات الرسائل والصفحات الثابتة .

  السطر 12 : جملة شرطية تتحقق من وجود صورة عرض للتدوينة og:image ، فإن كانت التدوينة لا تحتوي على صورة فلعله من الأفضل عرض صورة شعار المدونة في السطر 13 ؛ لإضفاء نوع من الجاذبية والتنسيق لمنشور الفيسبوك. في حال وجود صورة للموضوع فليس هناك داعٍ لكتابة أي كود خاص ؛ لأن بلوجر ستقوم بتوليده تلقائياً.

  أما ميتا تاق الأوبن قراف لوصف الرسائل أو الصفحات الثابتة og:description فسيتم توليدها عند طريق السطر 18 فهذا السطر من الكود خاص بأي صفحة سواء الرئيسية أم صفحة الرسائل.

* انتهى بحمد الله *

← إن شاء الله سنستعرض طريقة النشر بالمحتوي الغني عبر تويتر بما يعرف twitter cards في تدوينة لاحقه ، وربما بينترست كذلك والذي يواجه مشكلة مع مدونات بلوجر.

←إذا واجهت صعوبة أو تعارض فيما يتعلق بموضوع Open graph  ميتا تاق في مدونتك المرجو عرض الشفرة كاملة التي بين الوسم head واستخدم بي بي كود في التعليق، أو من هنا:

[code]انسخ الكود هنا[/code]