2019/02/02

إضافة كود الميتا تاج Meta Tag لمدونة بلوجر


الكثير منا يملكون مدونة على منصة بلوجر، لكن يشتكون من عدم ظهورها على محركات البحث لجوجل. أو عدم تصدرها لقمة نتائج البحث، ذلك راجع بالدرجة الأولى إلى سوء استعمال أكواد الميتا تاج ( Meta Tag ) و التي هي عبارة عن تعريفات برمجية بسيطة في مدونة بلوجر تلعب دور هام في تحسين SEO  ( و التي تعني Search Engine Optimization ) لمدونتك لمحركات البحث لاكتشاف صفحات موقعك بسهولة. 

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

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

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

مميزات الميتا تاج META TAG:   

1- تعريف مدونتك لمحركات البحث.
2- التعريف بصاحب المدونة. 
3- حفظ حقوق الملكية لصاحب الموقع.
4- التعرف على محتوى موقعك من مواضيع و أقسام صفحات مدونتك.
5- تسريع أرشفة مواضيع مدونة بلوجر.
6- نشر روابطك بشكل صحيح على موقع الفيسبوك وتويتر. 

كيفية إضافة الكود لقالب مدونة بلوجر. 

لإضافة الكود... اتبع ما يلي:
1- الذهاب إلى قالب بلوجر لمدونتك.
2- و كما ننصح دائما، يجب أخذ نسخة احتياطية لقالب مدونتك لتفادي الوقوع في أية مشاكل.
3- تحرير قالب الــ HTML.
4- ابحث عن الكود التالي: <head> تم ألصق الكود أسفله مباشرة مكان الكود القديم المتواجد على مدونتك. 
<!-- [ Meta Tag SEO ] -->
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;http://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESKRIPSI-BLOG' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/about' rel='author'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS' rel='me'/>
<meta content='GOOGLE-WEBMASTER-CODE-VALIDATION' name='google-site-verification'/>
<meta content='CODE-VALIDATION-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='ADMIN-COUNTRY' name='geo.placename'/>
<meta content='NAME-ADMIN' name='Author'/>
<meta content='general' name='rating'/>
<meta content='ma' name='geo.country'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='DESCRIPTION-OF-YOUR-BLOG' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https:img/BLogo.png' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/PROFIL-FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/FAN-PAGE-FACEBOOK' property='article:publisher'/>
<meta content='FACEBOOK-APPLICATION-CODE' property='fb:app_id'/>
<meta content='ADMIN-FACEBOOK-CODE' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>
<meta content='summary_large_image' name='twitter:card'/>
<!-- [ End of Meta Tag SEO ] -->
كل ما عليكم فعله للتعديل على الكود هو تغيير كل ما هو باللون الأحمر بمعطياتكم الخاصة. ثم حفظ.
في النهاية انصحكم بالمحتوي فهو العامل الاساسي فى تحسين موقعك في نتائج البحث .


تتمة الموضوع

2019/01/27

إضافة أداة آخر التعليقات لمدونات بلوجر بشكل متقدم و احترافي.

أداة التعليقات لمدونات بلوجر، هي أداة تمكننا من إظهار آخر و أحدث التعليقات للمدونة بشكل احترافي و متقدم. 

زوار مدونتنا الكرام، نقدم لكم اليوم أداة " أحدث التعليقات " لمدونات بلوجر و التي تقوم بعرض أحدث و آخر التعليقات المنشورة في مواضيع و مشاركات مدوناتكم و ذلك بترتيب تنازلي، أي من الأحدث إلى الأقدم. بحيث أن هذه الاداة مَبْنية من الصفر و بشكل متقدم جدا للغاية. كما أنها تتسم بتحميل سريع و تُظهِر التعليقات بطريقة فريدة من نوعها. و هي تعمل مع كل قوالب بلوجر الرسمية و المخصصة، كما أنها تستجيب بشكل كامل للهواتف المحمولة. 
أداة آخر التعليقات لمدونات بلوجر بشكل متقدم و احترافي

مميزات أداة أحدث التعليقات لبلوجر: 

أهم ما يجب أن يتوفر في هذه الأداة هو سرعة التحميل و ملائمتها مع كل واجهات الإستخدام لكي  تبدو أفضل، و هذا ما تم وضعه في الإعتبار من أجل تطوير الأداة، بحيث تقوم بجلب التعليقات الأخيرة و الأحدث من خلاصة مدونتك بطريقة غير متزامنة دون أن تؤثر كثيرا على سرعة تحميل المدونة، و فيما يلي أهم المميزات: 

تم ترميزها باستخدام جافا سكريبت و باستخدام Blogger JSON Feed API.
عرض الصورة الشخصية للمؤلف صورة - الكاتب الصورة الرمزية.
رابط المؤلف، لصورة ملفه الشخصي في + Google.
صورة متحركة:  preloader.
يظهر عنوان الموضوع التي نُشِر به التعليق.
يظهر تاريخ التعليق.
يعرض مقتطفات التعليقات (مقتطف على شكل وصف قصير).
رابط قراءة المزيد، أي الذهاب للموضوع الذي نُشِر به التعليق. (  »  )
خفيف و سريع التحميل.
استجابة لكل قوالب بلوجر.
استخدام التلميحات  (EN= tooltips - FR= infobulles) لعرض المعلومات. 

يعرض أداة التحميل المسبق GIF التالية و التي تدور و تنبض عندما يتم تحميل عنصر واجهة المستخدم أو عندما يطلب المتصفّح البيانات من خلاصة JSON.
صورة أداة التحميل المسبق
بمجرد تحميل الاداة بالكامل، يتم عرض التعليقات بترتيب تنازلي (الأحدث في الأعلى). 
عندما تمرر الماوس على اسم المستخدم المعلِّق، سيعرض تلميح الاداة معلومات حول تاريخ و وقت التعليق. 
عرض تلميح الاداة معلومات حول تاريخ و وقت التعليق
كما يتم إظهار تلميح آخر باسم الموضوع عندما يتم تمرير الماوس على رمز المجلد (أو الملف). 
إظهار تلميح باسم الموضوع

عرض أحدث التعليقات مع إظهار صورة مصغرة للمعلق: 

لإضافة الأداة، التي تمكن من إظهار آخر التعليقات التي يُدلي بها زوار مدونتك... اتبع ما يلي: 
     1- الذهاب إلى قالب بلوجر لمدونتك. 
     2- و كما ننصح ددائما، يجب أخذ نسخة احتياطية لقالب مدونتك لتفادي الوقوع في أية مشاكل. 
     3- تحرير قالب الــ HTML. 
     4- ابحث عن الكود التالي: </head> تم ألصق الأكواد أسفله قبله. 

ملاحظة: إذا كان قالب مدونتك يحتوي على رابط مصدر الــ jQuery، أو أحد الأكواد أسفله يُرجى عدم إضافتها. 
<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
     5- قم بإضافة الكود التالي قبل ]]></b:skin>. 
/*############Recent Comments Widget##################*/
.mbtcmts{list-style-type:none; overflow:hidden; }
.mbtcmts li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px;padding:0px;}
.mbtcmts i{color:#999; padding-left:4px;font: normal normal 10px 'Droid Arabic Kufi', serif;}
.mbtcmts .idate {display:block; font-family:arial; font-size:11px;text-align: right;padding:3px; margin:0 40px 0px 0}
.mbtcmts .icontent{ display:block; font: normal normal 10px 'Droid Arabic Kufi', serif; color:#999; line-height:1.5em;}
.mbtcmts .icontent a {color:#999; text-decoration:none; font-weight: bold;font-size: 16px;font-style: normal;}
.mbtcmts div{line-height:2em; clear:both; border-top:1px solid #eee; margin-top:5px;}
.mbtcmts span { margin:5px 0px 0px; padding-left:5px;}
.mbtcmts img {border-radius:100%; float:right; margin:0px 0px 20px 20px; border:1px solid #eee; padding:3px; width:50px; height:50px;box-shadow: 2px 2px 4px #ddd; }
.mbtcmts .icapital {text-transform:Capitalize; display:inline-block;}
.mbtcmts .ititle {color: #0075a3;text-decoration: none;font: normal bold 12px 'Droid Arabic Kufi', serif;}
.mbtcmts .ititle:hover {color:#4d90fe;}
.mbtcmts .idate:before, .mbtcmts .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-left:5px;}
.mbtcmts .idate:before {content:'\f017'; color:#999}
.mbtcmts .ipostTitle a {text-decoration:none; color:#999}
.mbtcmts .ipostTitle a:before {content:'\f07c'; }
#mbtloading{
  margin: 20% auto;background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat right center;width: 80px;height: 80px;}
/*------ CSS3 Tooltip Shortcode -------------*/
.tooltip{outline:none;text-decoration:none!important;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{text-transform:capitalize;width:150px; padding:5px 5px;opacity:0;top:120%;right:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-right;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-right;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:left;width:110px;margin:0 10px 30px 0;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-right:-50px}.tooltip span b{width:15px;height:15px;right:30%;top:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{padding-top:10px;color:#fff;background:#0075a3;border:1px solid #ffffff}.tooltip span b{background:#0075a3;border-top:1px solid #ffffff;border-left:1px solid #ffffff}
.mbtcmts .itotal {color:#333; padding:3px 10px 3px 3px; border:1px solid #eee; font-family: 'Droid Arabic Kufi', serif;font-size: 12px;}
.mbtcmts .itotal i {font-style:normal;float: right;}
.mbtcmts .itotal span{font-family:oswald;  font-weight:normal; color:#333; text-decoration:none}
.mbtcmts .itotal span:before {font-family:FontAwesome; position:relative; content:'\f075'; }
ملاحظة: يمكنكم تغيير اللون (#0075a3) في الكود باللون الذي يوافق مدونتكم.

     6- الآن قم بحفظ القالب، فنحن قد أوشكنا من الانتهاء.

     7- أخيرا ننتقل إلى قسم التخطيط، و نقوم بالنقر على إضافة الأداة في السايدبار.
     8- نختار اداة الــ HTML / JavaScript و نلصق الكود أسفله داخلها، تم حفظ.
<div id="mbtloading" ></div>
<script type="text/javascript">
function mbtcmts(json) {
document.write('<ul class="mbtcmts">');
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListDate = TotalPosts = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListProfile = ListComments = thumbUrl = sk = ListMonth = Y = D = M = m =  "";
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
if(json.feed.entry[i].link[2] != null)
{
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
}
else
{ListUrl = "'#'"}
//####################### Splitting URL into Title
if(json.feed.entry[i].link[2] != null)
{
var mbt_slit = json.feed.entry[i].link[j].href;
        var M_slit = mbt_slit.split("#");
        M_slit = M_slit [0];
        var K_slit = M_slit.split("?");
        K_slit = K_slit[0];   
        var B_slit = K_slit.split("/");
        B_slit = B_slit[5];
        B_slit = B_slit.split(".html");
        B_slit = B_slit [0];
        var T_slit= B_slit.replace(/-/g, " ").charAt(0).toUpperCase()+ B_slit.replace(/-/g, " ").slice(1).substring(0, 50);
        var Link_slit= T_slit.link(K_slit);
}
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
ListAuthor= json.feed.entry[i].author[0].name.$t;
var ListAuth = ListAuthor.split(" ");
var ListAuth = ListAuth.slice(0, 1).join(" ");
ListProfile= "'" + json.feed.entry[i].author[0].uri.$t + "'";
//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0, 10);
                         Y = ListDate.substring(0, 4);
                        m = ListDate.substring(5, 7);
                         D = ListDate.substring(8, 10);
                         M = ListMonth[parseInt(m - 1)];                     
//################### Thumbnail Check
if (json.feed.entry[i].author)
{
thumbUrl = json.feed.entry[i].author[0].gd$image.src;
sk= thumbUrl.replace("/s72-c/","/s60-c/");
ListImage= "'" + sk + "'";
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3uVa0sKwIOKZyMPjK_PqBGAwVzuofypxkntgjEjXp1txYMPVhPH_Uef3vAsg_70Y5qJhEAQNV5ZDqiW4neVg44apq6KqOcZVNvoJ1YaxL3kmnu80D2Nrg88QuRT1BwVNYmgi8bgZVWls/s200/Icon.png'";
}
//################### Printing List
var listing = "<li class='node"+[i]+"' ><a rel='nofollow' href="
+ListProfile+
  "><img src="
+ListImage+
"/></a><a class='ititle tooltip' href="
+ListUrl +
"target='_blank'><span><b></b>"
+ListAuth+
" Commented on » "
+ M +
" "
+ D +
", "
+ Y +
"</span>"
+ ListAuthor+
"</a> <i>نُشِر في: </i>  <span class='ipostTitle'><a class='tooltip'  href='"
+K_slit+
"'><span><b></b>"
+T_slit+
"</span></a></span><span class='icontent'>" + ListContent+" ...   <a href="+ListUrl+">  » </a></span><div></div></li>";
document.write(listing);
}
document.write('<div class="itotal"> <span> '+TotalPosts+' </span><i>عدد التعليقات المنشورة حتى الآن: </i></div></ul>');
}
</script>
<script>
var ListCount = 5;
var ChrCount = 90;
</script>
<script src="https://URL-YOUR-BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script>
<script>document.getElementById("mbtloading").style.display = "none";</script>
     9- يمكنكم إجراء التعديلات التالية على الكود الأخير حسب ما يلائمكم:
- يُرجى استبدال URL-YOUR-BLOG بعنوان مدونتكم.
-  لزيادة أو تقليل عدد التعليقات التي تريدون إظهارها في الأداة، يرجى تغيير الرقم 5 في ( ListCount = 5 ).
- لتحديد عدد الأحرف التي يستم عرضها كملخص تعليق (أي مقتطف)، يرجى تغيير العدد 90 بما يناسبكم في ( ChrCount = 90 ). 

     9- احفظ عملك و استمتع بسحر أداة أحدث التعليقات لمدونات بلوجر.
إن كانت هناك أية مشاكل أو ملاحظات، فنحن دائما رهن إشارتكم ضمن تعليقاتكم في الموضوع.


تتمة الموضوع