هيلبرنت | Helpernt - [ شرح ] : ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)

السلام عليكم ورمه الله وبركاته

في هذه المقالة سنتعرف عن ماهو مشروع ال AMP؟ وما هو وظيفته؟ وكيف يمكنني إضافة هذا المشروع في موقعي؟ كل هذه الاسئلة سنجيب عليها .
ما هو AMP او Accelerated Mobile Pages؟
AMP هو إختصار لـكلمة Accelerated Mobile Pages هو مشروع من جوجل يستخدم لغة HTML وهى لغه مفتوحة المصدر “Open Source” فهو وسيلة لبناء صفحات الموبايل لتكون سريعة حبث باستخدام AMP يجعل سرعة الموقع كبيرة جداً تصل إلى 10 أضعاف سرعة الصفحة العادية, مما يجعل تجربة التصفح من الجوال سريعة وممتعة.
سلبيات استخدام AMP ؟
AMP مثله مثل اى تقنية لها مالها وعليها ماعليها فمن السلبيات انه فى حاله وجود الاعلانات علي موقعك فهو يقوم بإيقاف تحميلها لانه يعطي الاولويه للمحتوي فهو سيئ بالنسبة لاصحاب المواقع الربحيه لكنه جيد فى حاله لم يكون لديك اعلانات على موقعك .

نتائج استخدام AMP ؟
في تجربة عملية وبسيطة منا لتوضيح الامور اكثر, سنقوم باختبار موقع يستخدم تقنية AMP وطبعا لن جد افضل من الموقع الرسمي لمشروع AMP وسوف نقارنه بمعهد هيلبرنت والاختبار سيتم من خلال اداة pingdom لقياس حجم الصفحة والوقت المستغرق لتحميل الصفحة.

نتيجة اختبار الموقع الرسمي لمشروع AMP

https://www.helpernt.com/vb/attachme...1&d=1523875664

نتيجة اختبار معهد هيلبرنت

https://www.helpernt.com/vb/attachme...1&d=1523875664

لاحظ الفرق من ناحية حجم الصفحة وزمن تحميلها فى موقع AMP الصفحة تحمل فى نصف ثانية ام موقعنا هنا تقريبا نفس الحجم لكن تحمل فى وقت اكبر 1.7 ثانية يعنى داخل على ثانيتين

طريقة إضافة الـ AMP الى موقعك ؟
فى البداية احب ان انوه الى ان هذه الاضافة اوالميزة هي ميزة تجريبية و قيد الاختبار اى انها ستمر بمراحل كثيره جدا من التطور والتحديث لحين حصولنا على الاضافة المستقره لكن بإمكاننا تجربتها في مواقعنا ومشاركة النتائج معنا .
اولا: طريقة إضافة AMP لمنصة البلوجر :

اقتباس:

قبل أن تركبها في يرجى آخذ Backup كامل لموقعك في حالة حدوث أي أخطاء وانشاء الله لن يحدث.

1- فى البداية إذهب إلى محرر الـ HTML واستبدل كود ال <html> بــ :

كود:

<html amp='amp'>

2- راجع كود ال Metadata والـ Charset إذا لم تجده كما بالأسفل قم بإضافته :

كود:

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

3- راجع تاج الـ Canonical وإذا لم تجدة قم بإضافته كما هو :

كود:

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

4- أبحث عن </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>

<script async='async' src='https://cdn.ampproject.org/v0.js'></script>

</head>

5- غير أكواد الصور إلى amp-img tags كما في الكود :

كود:

<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>

ثانيا : طريقة إضافة AMP لمنصة الووردبريس :

1- توجه إلى لوحة التحكم ثم اذهب إلى أضافات>>أضف جديد

https://www.helpernt.com/vb/attachme...1&d=1523875664

2- ابحث عن AMP, ستظهر لك الاضافة الرسمية في أول نتيجة, وهذه هي صفحة الاضافة AMP WordPress

https://www.helpernt.com/vb/attachme...1&d=1523875664

3- بعد تنصيب الاضافة وتفعيلها

https://www.helpernt.com/vb/attachme...1&d=1523875664

ثم

https://www.helpernt.com/vb/attachme...1&d=1523875664

اذهب الى “الروابط الدائمة” ثم أضغط على حفظ التغييرات وذلك لأعادة توليد قاعدة بيانات جديدة تحوي على روابط AMP.
الآن اصبحت AMP جاهزة في موقعك, وتعمل بشكل سليم, ويمكنك تجربة اي صفحة من خلال اضافة AMP الى اخر الرابط, وكمثال على ذلك:
رابط الصفحة الاصلي هو:

كود:

http://helperntl.com/anchor-text

رابط الصفحة التي تعمل بالـamp هو:

كود:

http://helperntl.com/anchor-text/amp

هناك طريقتان لمعرفة اذا كان مشروع الـAMP قد تم تفعيله بشكل سليم وناجح ام لا؟
الطريقة الاولى :
اذهب الى الرابط validator.ampproject.org وضع رابط الموقع وسيقوم بالتحقق من أكواد ال AMP .
الطريقة الثانية :
استخدم متصفح جوجل كروم ثم أضف هذا الكود "#development=1" في نهاية الرابط لتظهر كما في المثال

كود:

https://example.blogspot.com/p/amp-page.html#development=1

ثم أضغط كليك يمين ثم Inspect وأفتح تاب Console واذا وجدت هذه الرسالة "AMP validation successful" فاعلم بأن المشروع تم تنصيبة بنجاح .

https://www.helpernt.com/vb/attachme...1&d=1523875664

موضوع تجريبى للـ AMP

https://www.helpernt.com/vb/attachme...1&d=1523875664

تحويل الزائر القادم من الجوال الى صفحات AMP
الان تعمل صفحات AMP في موقعك, ولكن الزائر لا يمكنه الوصول لها مباشرة الا عن طريق كود تحويل سنضعه داخل ملف .htaccess وهو:

كود:

RewriteEngine On

RewriteCond %{REQUEST_URI} !/amp$ [NC]

RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\-mobile|iemobile|iphone|ipod|\#opera\ mobile|palmos|webos) [NC]

RewriteRule ^([a-zA-Z0-9-]+)([\/]*)$ http://helpernt.com/$1/amp [L,R=302]

مع تغيير http://helpernt.com/ الى رابط موقعك.