اكاديمية ورشة لونك

شرح صفحات الجوّال المُسرّعة و اضافة AMP لموقعك

السلام عليكم , أكيد أنت تريد موقعك من أفضل المواقع و تريد أن تحتل مركز في محركات البحث يكون مركز رائع و ممتاز و لكنك لتحتل مركز في نتائج محركات البحث يجب أن يكون موقعك متوافق مع الزوار و متوافق مع محركات البحث و من العوامل المهمة أن يكون موقعك سريع و سهل التصفح , و بهذا الموضوع سوف أشرح لكم صفحات الجوال المسرعة “Accelerated Mobile Pages” أو بمعني صحيح و أفضل تسريع صفحات الجوال AMP و سوف اشرح لكم اضافة AMP للموقع الخاص بك .

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

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

YourColor.Net

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

المحتوى الموجود في الفيديو

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

هذا الموقع ampproject.org هو الموقع الرسمي لمشروع Accelerated Mobile Pages و سوف تجد به كل ما تريد معرفته حول AMP , بالإضافة إنك سوف تجد رأي المساهمين بهذا المشروع , و مشاهده فيديوهات تعريفية عن AMP .

ماهو أو تعريف الـ “AMP” ؟

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

بتجربة عملية بسيطة , قم بفتح الموقع الرسمي لمشروع AMP و قم بمشاهده السرعة الرهيبة التي يتم تحميل الموقع بها , و اعمل اختيار للموقع بواسطة اداة Pingdom للقيام بقياس حجم الصفحة و الوقت الذي يتم استغراقه للقيام بتحميل الصفحة .

YourColor.Net

قم بالملاحظة إن حجم الصفحة ليس خفيفه 2.7 ميجا و تم تحميلها بنصف ثانية فقط , و لقد اعتدنا ان مثل هذا الحجم يتم تحميله في فترة 5 أو 6 ثواني علي الأقل , و لكن مع AMP التجربة مختلفة و انا اعتقد انك الأن فهمت ما هو AMP و اليه عمله .

لماذا قامت Google بهذا المشروع ؟

مع ازدياد و انتشار استخدام الهواتف في العالم لتصفح الإنترنت بشكل ضخم , أصبح من المهم جعل تجربة التصفح من الهاتف مميزة , و هذا بالبداية يجعل المواقع متوافق مع الهاتف و يجعلها سريعة , و هذا هو الهدف الرئيسي لـ جوجل في تحسين تجربة المستخدم , فإنه بواسطة شاشة صغيرة يجب أن يشاهد المستخدم جميع محتوي الصفحة و لا يقوم بالإنتظار وقت طويل لتظهر له الصفحة .

طريقة اضافة AMP للموقع الخاص بي ؟

إن هذا هو الجزء الأهم في الموضوع , بالنسبة إلي بلوجر و المنتديات و باقي المنصات , إن جعل الموقع الخاص بك يعمل بـ AMP ليس بالأمر السهل لأن المشروع في البداية و لا يزال تطويره جاري , و أنا متأكد بإن كل المشاكل سوف يتم حلها في الوقت القريب , و إذا كان لديك خبرة التطوير يمكنك زياره شروحات جوجل حول تصميم صفحة AMP HTML بخطوات بسيطة .

و لكن إذا كنت تقوم بإستخدام سكربت ووردبريس بإن الأمر بسيط , سوف أشرح لكم طريقة تركيب AMP علي موقعك بكل سهولة .

قم بالتوجه للوحة التحكم و بعدها اذهب إلي إضافات > أضف جديد > و بعدها قم بالبحث عن AMP و سوف تظهر لك الاضافة الرسمية بأول نتيجة , و هذه هي صفحة الإضافة AMP WordPress .

بعد تثبيت الاضافة و القيام بتفعيلها قم بالذهاب إلي “الروابط الدائمة” و بعدها قم بالضغط علي حفظ التغييرات و هذا للقيام بإعاده توليد قاعده بيانات جديدة تحتوي علي روابط AMP .

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

الصفحة الأصلية هي : https://www.academy.yourcolor.net/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD-%D9%85%D9%86-%D8%A7%D9%84%D8%A7%D9%86%D8%AA%D8%B1%D9%86%D8%AA
الصفحة التي بها AMP هي : https://www.academy.yourcolor.net/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD-%D9%85%D9%86-%D8%A7%D9%84%D8%A7%D9%86%D8%AA%D8%B1%D9%86%D8%AA/amp

ملحوظة مهمة : إن اضافة AMP تقوم بتهيئة الموضوعات فقط , و لا تقوم بعمل AMP للصفحة الرئيسية و الصفحات و التاجات و الاقسام .

كيفية التأكد إن AMP تقوم بالعمل بشكل صحيح في الموقع ؟

للقيام بالتأكد إن صفحة AMP تقوم بالعمل بشكل صحيح , قم بإستخدام متصفح Google Chrome , و بعدها ضع #development=1 في اخر الرابط و قم بالدخول إلي الصفحة من جديد ليكون الرابط استكمال للمثال بالأعلي : https://www.academy.yourcolor.net/professional-seo/online-marketing.html/amp/#development=1

قم بالضغط الأن علي F12 و سوف تظهر لك هذه الرسالة : “AMP Validation Successful” كما بالصورة .
YourColor.Net

و هكذا قد تكون انتهيت من تهيئة الموقع الخاص بك للـ AMP بالكامل , مع التحقق بأن AMP تقوم بالعمل بشكل رائع و صحيح .

تحويل زائر الهاتف إلي صفحات AMP

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

[code]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-]+)([\/]*)$ https://academy.yourcolor.net/$1/amp [L,R=302][/code]

مع القيام بتغيير https://academy.yourcolor.net إلي رابط الموقع الخاص بك . (هذا الكود لم يعد يعمل بعد القيام بتحديث اضافة AMP الأخير و يوجد الكثير من المواقع تبحث عن الحل و لكنني وجدت الحل) تابع معي

أنا وجدت الحل لتحويل الزائر بدون ملف .htaccess و لكن سوف تقوم بتحويل الزائر من داخل ملفات القالب تابع معي أولاً اذهب إلي cPanel موقعك و بعدها ادخل علي File Manager و بعدها اذهب إلي مجلد wp-content و بعدها ادخل علي Themes و ادخل علي القالب المفعل حاليا علي موقعك و قم بالتعديل علي ملف header.php و اضف في بدايته هذا الكود

[code]<? if( is_single() ) { ?>
<? if( wp_is_mobile() ) { ?>
<? header(‘Location: ‘.get_the_permalink().’amp’); ?>
<? } ?>
<? } ?>[/code]

كما موضح بالصورة التالية :

YourColor.Net

مهاب البوشي

مهاب البوشي

مهاب البوشي ، مؤسس شركة ترويج 'Trweeg.Com' و مسئول السيو و التسويق في ورشة لونك و مدير اكاديمية ورشة لونك التعليمية .

اضف تعليق

Your Header Sidebar area is currently empty. Hurry up and add some widgets.