السلام عليكم
أود في البداية أن أشكر فريق نجمة على إتاحة الفرصة لي للتدوين في هذا الموقع ؛ وبهدف تحسين جودة المظهر والمحتوى في البلوجر ، سأقدم لكل المدونين دروسا وإضافات من شأنها أن تحسن مدوناتهم .
وسيكون الدرس الأول هو حول تحسين ظهور المدونة في محركات البحث والشبكات الإجتماعية .
تلعب أكواد الميتا دورا هاما في الموقع الإلكتروني عامة ومدونات البلوجر خاصة ، فهي التي تقوم بتحسين ظهور الموقع في محركات البحث والشبكات الإجتماعية ، وفي هذه التدوينة سأقدم لكم الطريقة الصحيحة والسليمة لإضافتها إلى قالب موقعك أو مدونتك .
- الخطوة الأولى : توجه إلى المدونة ، المظهر ، تحرير HTML
- الخطوة الثانية : ابحث عن وسم <head> وستجده في الأهلى دائما ، تحته مباشرة ضع الأكواد التالية :
- الكود الأول : وظيفته إضافة أكواد الميتا الخاصة ببلوجر ، وهو كود رسمي من البلوجر
<b:include data='blog' name='all-head-content'/>
- الكود الثاني : يلعب نفس دور الكود الأول ، لكنه أكثر تفصيل ، ويفضل إضافته أيضا
<b:if cond='data:blog.canonicalUrl == data:blog.canonicalHomepageUrl'>
<title><data:blog.pageTitle/>: <data:blog.metaDescription/></title>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>الصفحة فير موجودة - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
</b:if>
</b:if>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<b:if cond='data:blog.metaDescription != ""'/>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta content='ضع الكلمات الدلالية لموقعك مفصولة بفاصلة' name='keywords'/>
3. الكود الثالث : كود تحسين ظهور الموقع والتدوينات في الفايسبوك
<!-- Begin Open Graph -->
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<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' name='og:description'/>
</b:if>
<meta content='رمزأي دي تطبيق الفايسبوك' property='fb:app_id'/>
<meta content='أي دي الخاص بحسابك في الفايسبوك' property='fb:admins'/>
<!-- End Facebook Open Graph -->
رابط لشعار الموقع : ضع فيه رابط صورة شعار موقعك ، ويفضل أن تكون مستطيلة وكبيرة
للحصول على الأي دي (id) الخاص بتطبيق الفايسبوك ، كل ما عليك هو الضغط على الرابط التالي (هنا) ، تم إنشاء تطبيق جديد ، تم ،"إضافة تطبيق جديد" ، ستحصل في النهاية على رقم كالتالي : 1820935124819089 ضعه في المكان المناسب في الكود أعلاه .
أي دي الخاص بحسابك في الفايسبوك : هو اسم المستخدم الخاص بك على الفايسبوك ، ومثاله :
https://www.facebook.com/mohamed.asfar.188
الكود الرابع: كود ظهور التدوينة والموقع في تويتر
<!-- Begin twitter card -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<b:if cond='data:blog.metaDescription'>
<meta content='summary' name='twitter:card'/>
<meta content='@User-twitter' name='twitter:site'/>
<meta content='@User-twitter' name='twitter:creator'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
</b:if>
</b:if>
</b:if>
<!-- End twitter card -->
إلى هنا ينتهي هذا الدرس ، يمكنك الحصول على جميع الأكواد من هنا https://jsfiddle.net/4rd9u364/
ليست هناك تعليقات:
إرسال تعليق