شرح كيفية اضافة اصدارGoogle AMP لمدونات بلوجر لمضاعفة سرعة موقعك على الهاتف 10x وتحسين ترتيب موقعك في جوجل

Google AMP (Accelerated Mobile Pages) هي تقنية سرعة خفيفة يتعين على المطورين إجراؤها لتسريع موقع الويب عن طريق تجنب بعض التعليمات البرمجية في java و CSS لجعل موقع الويب الخاص بك سريعًا. أنا متأكد أنك سمعت عن هذا. كانت مدونات بلوجر تنتظر تنفيذ هذه الخاصية AMP .

أصبحت AMP متاحة بالكامل الآن لمدونات بلوجر على الويب. في هذا المنشور ، سنستعرض كيفية إضافة Google AMP (Accelerated Mobile Pages) إلى مدونتك على الويب.

ما هو AMP

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

المعنى الكامل لـ AMP هو Accelerated Mobile Pages. يتم عرض هذه الصفحات في عرض الهاتف المحمول الذي يعمل على تسريع سرعة تحميل صفحة موقع الويب الخاص بك وتحسين ترتيب موقعك فى جوجل عن طريق تخطي بعض ملفات java و CSS التي تحظر العرض ويتم عرضها ضمن جوجل .
إنه مشروع جديد من جوجل لإنشاء صفحات ويب للجوال لمحتوى ثابت يتم عرضه بسرعة. تستخدم صفحات 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>

< <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 CDN ، احفظ قالب القالب الخاص بك ودعنا ننتقل إلى الخطوة الأخرى.

الخطوة الرابعة. إعداد وتفعيل 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 أيضًا النسخة الأساسية.
أضف الكود أدناه إلى قالب بلوجر الخاص بك أسفل مجموعة الأحرف.

<link expr: href = 'data: blog.url' rel = 'canonical' />

<link rel = "canonical" href = "https: // www. tech24modren .com" />

من خلال إضافة علامات كورنيكال ، يمكنك تعيينها للإشارة إلى الصفحة الرئيسية ومنشورات موقع الويب الخاص بك. يرجى تغيير عنوان URL tech24modren إلى عنوان URL لاسم المجال الخاص بك.

قراءة: كيفية إضافة إعلانات ادسنس Google Adsense في منتصف المقال بلوجر

التحقق من صحة جوجل 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

بعد ذلك ، افتح أداة التحقق من Crome للتحقق مما إذا كانت صفحات Blogger AMP بها أخطاء.

قراءة: حل مشكلة وصف المدونة المتكرر في Google Search Console مدونة بلوجر

كيفية إضافة نمط 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.

قراءة: تحسين الصورة للحصول على ترتيب أفضل لتحسين محركات البحث في مدونة بلوجر

مدير الموقع :

الكاتب :

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

الملف الشخصي

هل اعجبك الموضوع :

التقنية 24 الحديثة

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

الصفحات