أصبحت AMP متاحة بالكامل الآن لمدونات بلوجر على الويب. في هذا المنشور ، سنستعرض كيفية إضافة Google AMP (Accelerated Mobile
Pages) إلى مدونتك على الويب.
المعنى الكامل لـ AMP هو Accelerated Mobile Pages. يتم عرض هذه الصفحات في عرض الهاتف المحمول الذي يعمل على تسريع سرعة تحميل
صفحة موقع الويب الخاص بك وتحسين ترتيب موقعك فى جوجل عن طريق
تخطي بعض ملفات java و CSS التي تحظر العرض ويتم عرضها ضمن جوجل .
إنه مشروع جديد من جوجل لإنشاء صفحات ويب للجوال لمحتوى ثابت يتم عرضه بسرعة. تستخدم صفحات AMP (Accelerated Mobile Pages) AMP HTML و AMP JS و AMP CDN لمعالجة صفحات الويب الخفيفة وتقديمها بسرعة البرق. مقارنة AMP بسرعة البرق لأنه لا يوجد تحميل بعد النقر على الصفحة التي نفذت AMP. حان الوقت لإضافة AMP إلى Blogger.
الخطوة الأولى. سجّل الدخول إلى Blogger واختر موقع الويب الخاص بك لإضافة رمز HTML AMP.
الخطوة 2. قم بالوصول إلى الأوامر اليسرى بالانتقال إليها إلى أمر القالب
الخطوة 3. انقر فوق أمر القالب ثم حدد موقع تحرير HTML بجوار التخصيص.
الخطوة الرابعة: انقر في أي مكان في التعليمات البرمجية الخاصة بك ثم انقر فوق Ctrl + F في نظام التشغيل windows أو CMD + F في نظام التشغيل mac.
الخطوة 5. ابحث عن <html>
الخطوة 6. استبدل السطر أعلاه بالكود التالي
ما هو AMP
اضافة اصدارGoogle AMP لمدونات بلوجر لمضاعفة سرعة هي زيادة سرعة ظهور صفحات الموقع على أجهزة الهاتف
أو الاجهزة الذكية10x . كما يوحي الاسم ، فإنه يساعد في تسريع تحميل
الموقع على أجهزة الإنترنت الأبطأ. وهي مبادرة مفتوحة المصدر تدعمها
شركات التكنولوجيا مثل جوجل و تويتر. على الرغم من أنه يقلل من تجربة
مستخدم الموقع. يقوم بتصفية بيانات البرامج النصية الثقيلة مما يجعل
تحميل الموقع أسرع. إذا كنت موافقًا على المساومة على تجربة المستخدم
، يمكنك تجربة جوجل AMP. و يمكنك بسهولة إضافتها على مدونة بلوجر.
بهذه الطريقة ستتمكن من إعداداتها على موقعك تابع الشرح ...
إنه مشروع جديد من جوجل لإنشاء صفحات ويب للجوال لمحتوى ثابت يتم عرضه بسرعة. تستخدم صفحات AMP (Accelerated Mobile Pages) AMP HTML و AMP JS و AMP CDN لمعالجة صفحات الويب الخفيفة وتقديمها بسرعة البرق. مقارنة AMP بسرعة البرق لأنه لا يوجد تحميل بعد النقر على الصفحة التي نفذت AMP. حان الوقت لإضافة AMP إلى Blogger.
قبل أن نبدأ في تنفيذ في مدونتك، من الجيد أن تقوم بعمل نسخة احتياطية من القالب الخاص بك لتجنب أخطاء الترميز. إذا كنت مستعدًا ، فلنبدأ في إعداد بلوجرAMP.
كيفية تفعيل AMP في مدونة بلوجر ؟
شرح طريقة إعداد جوجل AMP على موقع مدونة
بلوجر
اتبع الخطوات التالية لإضافة Amp إلى مدونة Blogger الخاصة بك. ابذل جهدًا لحفظ النموذج الخاص بك في كل خطوة حتى تتمكن من معرفة المكان
الذي قد ترتكب فيه أي خطأ من خلال تنبيهات خطأ رمز المدون.الخطوة الأولى. إعداد AMP داخل قالب المدونة
يتضمن إعداد AMP تغيير رمز HTML الموجود في النموذج إلى رمز AMP لتمكين AMP في كود HTML الكامل لمزيد من الإعداد. كيفية إضافة كود HTML لصفحات AMP.الخطوة الأولى. سجّل الدخول إلى Blogger واختر موقع الويب الخاص بك لإضافة رمز HTML AMP.
الخطوة 2. قم بالوصول إلى الأوامر اليسرى بالانتقال إليها إلى أمر القالب
الخطوة 3. انقر فوق أمر القالب ثم حدد موقع تحرير HTML بجوار التخصيص.
الخطوة الرابعة: انقر في أي مكان في التعليمات البرمجية الخاصة بك ثم انقر فوق Ctrl + F في نظام التشغيل windows أو CMD + F في نظام التشغيل mac.
الخطوة 5. ابحث عن <html>
الخطوة 6. استبدل السطر أعلاه بالكود التالي
<html amp = 'amp'>كل هذا مع إضافة AMP إلى HTML قبل قسم الرأس.
ابحث عن علامة <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 ، يتعين عليك إلقاء نظرة على رمز القالب الخاص بك لمعرفة ما إذا كان يحتوي على مجموعة الأحرف وعلامات إطار العرض الوصفية قبل إضافة الرمز المقدم أدناه. إذا لم تكن موجودة ، فستقوم بلصق رمز belw أسفل علامة <head>.إذا كنت تريد معرفة ما إذا كانت مجموعة الأحرف ورمز منفذ العرض موجودان ، فابحث عن أي من الاسمين وستجدهما فقط في قسم الرأس في قالب المدون الخاص بك.<meta charset = ”utf-8 ″><meta name =” viewport ”content =” width = device-width، min-scale = 1، initial-scale = 1 ″>
الخطوة 3. إعداد AMP CDN بلوجر:
رمز AMP CDN هو رمز يحث متصفحات الهاتف على استخدام إصدار AMP عن طريق إضافة البرنامج النصي في قسم الهيدر رأس صفحة.كيفية إضافة AMP CDN في التعليمات البرمجية مدون بلوق هو بسيط، مجرد نسخ BELOW رمز ولصق فقط أعلاه العلامة تنتهي من الرأس. </head>
هذا كل شيء مع إضافة AMP CDN ، احفظ قالب القالب الخاص بك ودعنا ننتقل إلى الخطوة الأخرى.< <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'>{"@context":"https:\/\/schema.org","@type":"NewsMediaOrganization","@id":"https:\/\/www.xxxxxx.com#Organization","name":"NoorTechno","url":"https:\/\/www.xxxxxx.com" }</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. في هذه الحالة ، نضيف رمز AMP للصورة لإبراز صورة منشور موقع الويب الخاص بك لتظهر في صفحات AMP. لنقم بإعداده.عادةً قبل نشر جزء HTML من منشور المدون وتصويره عند إضافة صورة به رمز الصورة ، هذا ما سنقوم به في كل مرة تقوم فيها بتحميل صورة منشور. قم بتغيير رمز الصورة إلى:
<amp-img src = ” AmpImage.jpg ” alt = ”amp-img” height = ”500 width =” 500 ″> </amp-img>يعد AmpImage jpg مثالاً لعنوان URL للصورة كما هو موضح في الكود بعد التحميل ، سيتعين عليك حذف Image src إلى رمز src أعلاه ولكن تأكد من نسخ عنوان URL للصورة أولاً قبل التغيير ثم استبداله بـ Ampimage jpg و هذا كل شيء.
الخطوة الخامسة: قم بإعداد رابط AMP Canonical من
الأهمية بمكان أن ترى أنه يمكن اكتشافك باستخدام العلامة الأساسية المستخدمة في قالب المدون الخاص بك. يستخدم إصدار AMP أيضًا النسخة الأساسية.
أضف الكود أدناه إلى قالب بلوجر الخاص بك أسفل مجموعة الأحرف.
من خلال إضافة علامات كورنيكال ، يمكنك تعيينها للإشارة إلى الصفحة الرئيسية ومنشورات موقع الويب الخاص بك. يرجى تغيير عنوان URL tech24modren إلى عنوان URL لاسم المجال الخاص بك.<link expr: href = 'data: blog.url' rel = 'canonical' /><link rel = "canonical" href = "https: // www. tech24modren .com" />
التحقق من صحة جوجل AMP في بلوجر
لمعرفة ما إذا كانت مدونة blogger الخاصة بك هي الآن صفحة AMP ، يمكنك عندئذٍ التحقق من بعض مواقع التحقق من صحة AMP الموجودة حولك.
الطريقة الأولى
افتح موقع الويب
validator.ampproject.org.
سيساعدك موقع الويب في جميع المشكلات التي قد تحتاج إلى حلها لإصدارات AMP
الخاصة بالمدون باستخدام الفكرة التالية.
أدخل قيمة عنوان url في حقل عنوان URL ، على سبيل المثال -
https://www.tech24modren.com/p/term-of-use.html
، يمكنك زيارة الموقع الرسمي لـ Google AMP إذا كان هناك أي خطأ
الطريقة الثانية:
الانتقال إلى الكروم.
افتح صفحة AMP في متصفح Chrome ، على سبيل المثال -
https://www.tech24modren.com/p/term-of-use.htmlأضف النهاية "#development=1" إلى عنوان URL ، على سبيل المثال -https://www.tech24modren.com/p/term-of-use.html#development=1
كيفية إضافة نمط css تنسيق AMP إلى بلوجر
الخطوة الأولى. سجّل الدخول إلى Blogger واختر موقع الويب الخاص بك لإضافة رمز HTML AMP.الخطوة 2. قم بالوصول إلى الأوامر اليسرى بالانتقال إليها إلى أمر القالب
الخطوة 3. انقر فوق أمر القالب ثم حدد موقع تحرير HTML بجوار التخصيص.
الخطوة الرابعة: انقر في أي مكان في التعليمات البرمجية الخاصة بك ثم انقر فوق Ctrl + F في نظام التشغيل windows أو CMD + F في نظام التشغيل mac.
الخطوة 5. ابحث عن <html>
الخطوة 6. استبدل السطر أعلاه بالكود التالي
أضف أدناه استعلامات وسائط CSS داخل علامة <style amp-custom = 'amp-custom'> قبل النهاية / *]]> * / < / style> الوسم.
سيتم عرض أي رموز نمط تضيفها في نمط AMP أعلاه في إصدار AMP الخاص بك. قد يكون من أزرار المشاركة أو أي أنماط أخرى.
نصيحة AMP واحدة بعد الإضافة.
تتم تغطية كل شيء عن إضافة Blogger AMP والآن سيستمتع زوار صفحة الجوال الخاصة بك بسرعة موقع الويب الخاص بك بسرعات البرق. يمكنك المضي قدمًا وتخصيص مظهر صفحات AMP المحمولة الخاصة بك عن طريق إضافة عدة عناصر إلى رمز نمط AMP. نشكرك على محبتك للدرس التعليمي الخاص بي وكن قريبًا من المزيد من البرامج المجانية لمواقع Blogger.
تعليقات
إرسال تعليق