كل المواضيع

كيف تضيف كود Open Graph tags الخاص بالفيس بوك لمدونات بلوجر

كيف تضيف كود Open Graph tags الخاص بالفيس بوك لمدونات بلوجر
لماذا من المهم إضافة كود Open Graph tags لمدونة بلوجر هذه قصة طويلة ولكن سنشرح المختصر والمفيد منها وهو إذا قام شخص بعمل شير علي الفيس بوك لأحد موضوعات المدونة  سيظهر الشير بطريقة جميلة وإحترافية تعكس صوره أجمل و إحترافية عن مدونتك وتجعل من الزوار الاخرين زيارة الصفحة وبهذا نكسب زيارات إضافية عن طريقة هذا الشير علي الفيس بوك والطريقة التي تظهر بها صفحتك علي صفحات المستخدمين الاخرين .

ومن المعروف أيضا أذا كنت لاتستخدم إسكربت الوورد بريس قد تحتاج لتوليد كود Open Graph في كل صفحة من صفحات موقعك. ولكن الحمدلله لانحتاج ذلك علي مدونات بلوجر, بلوجر تدعم كثير من خدمات SEO . وفي هذا الشرح سنقوم بتركيب كود Open Graph علي مدونات بلوجر .

طريقة تركيب كود Open Graph tags علي مدونات بلوجر 

1. علينا بإعلام Google بي namespace الخاص بكود Open Graph كيف نقوم بذلك ؟
 فقط عليك البحث عن هذا الكود وهو في أعلاء ملف القالب اي في بداية القالب ويختلف في بعض الاحيان من قالب لاخر

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 وأضف الية هذا الكود , وهو كود Open Graph

xmlns:og='http://ogp.me/ns#'
ليصبح بالشكل التالي

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

 2. وفي هذه الخطوه نقوم بإضافة كود Open Graph tags لمدونة بلوجر
 الان قم بالحث عن هذا الكود  </head> وقبلة مباشره قم بلصق الكود التالي

 <!-- Begin Open Graph metadata -->

<meta expr:content='&quot;en_US&quot;' property='og:locale'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>

</b:if>

<meta expr:content='data:blog.title' property='og:site_name'/>

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='ضع هنا رابط الصوره الذي تريده فقط اذا لم تتوفر صوره للموضوع' property='og:image'/>
</b:if>

<b:if cond='data:blog.metaDescription'>

<meta expr:content='data:blog.metaDescription' property='og:description'/>

<b:else/>

<!-- Still looking for a way to use the post snippet if there's no description -->

</b:if>

<!-- End Open Graph metadata -->
 والان تم كل شي بحمدالله , فقط اذا كنت تستخدم تطبقات في موقعك مثل صندوق تعليقات الفيس بوك إذن عليك ان تقوم بإضافة الكود التالي قبل هذا الكود "<!-- End Open Graph metadata -->"

<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/>

وبهذا يكون كل شي جاهز فقط عليك الان ان تقوم بتجربة بعمل شير لاحد موضوعات المدونة , و لا إستفسار يسرنا الاجابة علية في التعليقات

التعليقات:0

إرسال تعليق

الروابط الدعائية ستحذف لكونها تشوش على المتتبعين و تضر بمصداقية التعليقات.