القائمة الرئيسية

الصفحات

شرح طريقة إعداد جوجل AMP على موقع مدونة بلوجر

اقرأ أيضا

  شرح طريقة إعداد جوجل  AMP على موقع مدونة بلوجر 

how-to-set-up-google-amp-on-blogger


ما هو AMP؟

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


إن إضافة / إعدادات Google AMPجوجلعلى موقع مدونة بلوجرأو AMP for blogger الخاص بصفحات الجوال المسرَّعة طريقة لجعل موقع  بلوجر الخاص بك يتم تحميله بشكل أسرع على أجهزة الجوال.و تقدم مواقع التحميل السريعة تجربة مستخدم أفضل ويمكنها أن تحسن حركة المرور الخاصة بك. 

في هذه المقالة ، سنوضح لك كيفية إعداد جوجل AMP في موقع بلوجر.

AMP سيعزز سرعة موقعك.


شرح الطريقة لإضافة / إعداد جوجل AMP في موقع بلوجر

  • تسجيل الدخول إلى مدونة بلوجر الخاصة بك.
  • انتقل إلى التصميم وانقر فوق تحرير القالب.
  • عدّل العلامات الحالية لمزامنتها مع العلامات بتنسيق AMP. استبدل الكود الحالي بالرمز المعدل.
  • احفظ القالب.
  • تم تكوين AMP الخاص بك في بلوجر الآن. يمكنك التحقق من صحة موقع الويب الخاص بك.


رمز معدل لإضافة / إعداد AMP في قالب بلوجر

استبدل نموذج الرموز أدناه وستكون جاهزًا باستخدام AMP في بلوجر. هذا مجاني تمامًا.

 ملاحظة لعمل نسخة احتياطية من مدونتك قبل المتابعة.


الخطوة 1: إنشاء AMP HTML

قم بعمل نسخة احتياطية من قالب بلوجر الخاص بك لتكون في مأمن من أي نوع من المشاكل.

 انتقل الآن إلى لوحة تحكمبلوجر -> نموذج -> تحرير القالب.


استبدل كود <html> بالكود التالي:


<html amp = ’amp’> code-box


الخطوة 2: إضافة مجموعة أحرف وعلامات تعريف لإطار العرض:

ابحث وتحقق من مجموعة الأحرف وعلامات إطار العرض الوصفية. 

إذا لم يكن موجودًا ، فانسخ الكود التالي والصقه بعد علامة <head>:


<meta charset = ”utf-8 ″>code-box

<meta name = ”viewport” content = ”width = device-width، min-scale = 1، initial-scale = 1 ″> code-box


الخطوة 3: إضافة العلامات الأساسية:

اجعل مدونتك قابلة للاكتشاف باستخدام العلامة الأساسية.

 تحقق من وجود علامات الارتباط الأساسي. إذا لم يكن موجودًا ، أضف الرابط الأساسي مثل <link rel = ”canonical” href = ”http://example.blogspot.com/article-2021.html” /> والذي سيشير إلى نفسه ببساطة.

انسخ الكود التالي والصقه بعد علامة منفذ العرض:

<link expr: href = ’data: blog.url’ rel = ’canonical’ /> code-box


ابحث عن علامة <header وقم بتغييرها بالكود التالي

  <header class='all_colors header_color light_bg_color  av_header_top av_logo_left av_main_nav_header av_menu_right av_custom av_header_sticky_disabled av_header_shrinking_disabled av_header_stretch_disabled av_mobile_menu_phone av_header_searchicon_disabled av_header_unstick_top_disabled av_bottom_nav_disabled  av_header_border_disabled' id='sp-header' itemscope='itemscope' itemtype='https://schema.org/WPHeader' role='banner'>code-box


الخطوة الرابعة: إعداد AMP CDN:

الصق هذه الأكواد أعلى العلامة </head> مباشرةً:


    <style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><style amp-custom='amp-custom'/>code-box

  <script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>code-box

 <script type='application/ld+json'>{&quot;@context&quot;:&quot;https:\/\/schema.org&quot;,&quot;@type&quot;:&quot;NewsMediaOrganization&quot;,&quot;@id&quot;:&quot;https:\/\/www.xxxxxx.com#Organization&quot;,&quot;name&quot;:&quot;NoorTechno&quot;,&quot;url&quot;:&quot;https:\/\/www.xxxxxx.com&quot; }</script> code-box

  <script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/><script async=’async’ src=’https://cdn.ampproject.org/v0.js’></script>code-box 


 لا تنسى اظافة رابط موقعك في المكان الصحيح

الخطوة الخامسة: إعداد صورة AMP:

قم بتغيير علامات الصورة إلى علامات amp-image مثل رمز المثال التالي:


<amp-img src = ”AmpImage.jpg” alt = ”amp-img” height = ”500 width =” 500 ″> </amp-img> code-box


ضع هذا الكود بين علامة <b:skin> و ]]></b:template-skin> وان كان موجود استبدله بالكود التالي

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,amp-img,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} code-box


الآن كل شيء انتهى...وما زال هناك عمل يجب اتباعه 


التحقق من صحة جوجل AMP في بلوجر

للتحقق من صحة صفحات جوجل AMP الخاصة بك على بلوجر ، يمكنك زيارة الموقع الرسمي لـ Google AMP إذا كان هناك أي خطأ ، فإن المدقق سيساعدك على اصلاح هذا الخطأ.alert-success


لتحميل ملف الأكواد الموجودة في الشرح هذا رابط الملف من تحميل الملف/download/button


لجميع تساؤلاتكم ارجوا ارسال رسالة لحل جميع المشاكل المتعلقة بالموضوع .alert-error

contact-form

  • فيس بوك
  • بنترست
  • تويتر
  • واتس اب
  • لينكد ان
إظهار التعليقات