شرح Accelerated Mobile Pages واضافة AMP لموقعك

شرح كامل عن تسريع صفحات الجوال AMP

 

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

 

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

 

اخطاء amp

 

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

 

 

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

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

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

 

ماهو AMP؟

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

 

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

 

ampproject-test

لاحظ ان حجم الصفحة ليس بالخفيف “2.7ميغا” وتم تحميلها في نصف ثانية فقط :), ونحن اعتدنا ان مثل هذا الحجم يتم تحميله في 5-6 ثواني على الاقل, ولكن مع AMP التجربة مختلفة, واعتقد انك الان فهمت ما هو AMP والية عمله.

 

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

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

 

كيف اضيف AMP لموقعي؟

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

 

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

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

 

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

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

رابط الصفحة الاصلي هو: https://sitesuccessful.com/vary-anchor-text

رابط الصفحة التي تعمل بالـamp هو: https://sitesuccessful.com/vary-anchor-text/amp/

 

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

 

كيف أتاكد ان AMP تعمل بشكل سليم في موقعي؟

للتأكد بأن صفحة AMP تعمل بشكل سليم, استخدم متصفح جوجل كروم, ثم قم بوضع #development=1 في نهاية الرابط وادخل الى الصفحة من جديد ليكون الرابط أستكمالاً للمثال في الاعلى:

https://sitesuccessful.com/vary-anchor-text/amp/#development=1

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

 

AMP Validation Successful

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

 

تحديث: في التحديث الجديد لإضافة AMP أصبح يمكنك التحكم اكثر بشكل قالب AMP الافتراضي مثل الالوان (لون الهيدر – لون النصوص – لون الخلفية), كما واصبحت تدعم الصورة البارزة مباشرة, واضافة فوتر جميل وتحويل الزائر الى مكان التعليقات في حال كان يريد ان يضع تعليق.

%d8%aa%d8%ad%d8%af%d9%8a%d8%ab-amp

 

تحويل الزائر القادم من الجوال الى صفحات AMP

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

 

 

مع تغيير https://sitesuccessful.com/ الى رابط موقعك. (هذا الكود لم يعد يعمل بعد تحديث اضافة AMP الاخير, ونبحث عن حل)

 

هذا كل شيء عن AMP أو Accelerated Mobile Pages حتى الآن, فالمشروع مازال قيد التطوير والعمل من جوجل, وأي جديد ستجده في هذه المقالة بأذن الله, اتمنى ان تكونو استفدتم, اخوكم وليد حمود.

لا تذهب دون ترك تقييمك للموضوع

نجمة واحدةنجمتانثلات نجماتأربع نجماتخمس نجمات (9 votes, average: 4.33 out of 5)

اشترك في قائمتنا البريدية وانضم لمشتركينا ليصلك كل جديد.

54 تعليق في “شرح Accelerated Mobile Pages واضافة AMP لموقعك

  1. تحياتى لك على المقال ومجهودك الرائع

    انا شخصيا قمت بتجربه الاضافه واعلم انها قيد التطوير لذلك لا احملك اى لوم لانك تحاول تقديم المساعده لنا كما تعودنا منك

    الاضافه لها جانب سلبي فى حاله وجود اعلانات علي الموقع فهي تقوم بإيقاف تحميلها لانها تعطي الاولويه للمحتوي وهكذا هي سيئه لاصحاب المواقع الربحيه

    لكنه جيده فى حاله لم يكون لديك اعلانات على الموقع

    شكرا لكم

  2. صديقى انا وضعت الرابط بهذا الشكل
    “رابط مكسور”
    وكانت النتيجة
    Failed to load resource: net::ERR_EMPTY_RESPONSE
    هل وضع الرابط بهذا الشكل صحيح وان كان وضعه بهذه الطريقة صحيح فلماذا النتيجة بهذا الشكل وشكرا

    1. أخي حسام شاهد الرابط, وانت استخدمته بشكل خاطئ, حيث عليك وضع

      amp/#development=1

      أما أنت لم تضع amp ووضعت فقط #development=1

      اهلاً بك

  3. طب معلش بعتذر مضر لوضع الرابط وانته عدل التعليق
    انا وضعت الرابط بهذه الصورة
    “تم حذف الرابط بعد اطلاع الادارة عليه”
    وكانت النتيجة
    Powered by AMP ⚡ HTML – Version 1457112743399
    ثم وضعت الرابط بهذه الصورة
    “تم حذف الرابط بعد اطلاع الادارة عليه”
    وكانت النتيجة
    AMP validation had errors:
    بعتذر مرة اخرى
    هل الرابط الاول سيليم وهل كده AMP شغالة تمام ولا ايه
    وان كنت مش عارف اختبرها صح استاذنك تختبرها انته لى وتوافينى بالرد
    تقبل تحياتى

    1. الشكل الاول غير صحيح اخي
      الشكل الثاني هو الصحيح, وأخطاء AMP تعود لعدة أسباب, مثل استخدام اضافة تحويل روابط أو تحويل برتوكول من HTTP الى HTTPS ولكنك لا تستخدم HTTPS
      أو في حال كنت مشترك في Cloudflare
      كما أن هناك عدة اخطاء من الاضافة نفسها تظهر عند الجميع, وهي اخطاء طبيعية ستختفي المستقبل بأذن الله.
      أشكرك على مرورك.

  4. انا بالفعل مشترك فى كلاود فلير وهذا بناء على نصيحة وتوصية منك فى احد مقالاتك هل احذف اشتراك كلاود فلير

    1. نعم اخي قم بتعليق حسابك فقط حتى تقوم كلاود فلير بحل هذه المشكلة, حيث تم مراسلتها وننتظر الاجابة منها

  5. طيب اخ وليد هذا بالنسبة للوورد برس
    ولكن اذا كان موقعي لا يدعم وورد برس
    في هذة الحالة ما العمل ؟

    1. الووردبريس هو المهتم الوحيد من المنصات بالAMP, وفي حال وجود أي تطور من المنصات الاخرى سأذكر هذا الشيء على صفحات الموقع الناجح في وسائل التواصل الاجتماعي وفي الموقع بأذن الله.

  6. مشكور اخي وقمت بتركيبها على موقعي لكن عندما ادخل الرابط يعيدني الى الصفحه الرئيسية

    1. انت تستخدم نوع اخر من الروابط, ضع في آخر الرابط /?amp=1

      إذا لم تنجح معك, تواصل معي لنحل المشكلة.

  7. اشكرك على سرعة الرد اخي وتعاونك الذي ليس بغريب عليكم …لم تفلح معي اخي هل بالامكان كتابة الرابط

    1. ارسل لي ما قمت به بالكامل لأعرف سبب المشكلة, وهل طبقت الدرس الموجود بالفيديو؟ وهل أهملت شيء؟

  8. شكراً لك اخ وليد على ماتقدمه
    من اكثر المواقع اللى متابعها
    وبانتظار للبلوجر
    وبالتوفيق للموقع الناجح

  9. اخ وليد قمت بتطبيق كافة الخطوات الموجودة ولكن عندما اقوم بفتح المقالة من جوال لا يتم تحويلي الى رابط ال amp وقمت بتعديل ملف ال .htaccsess

  10. تأكد من كل الخطوات من البداية صديقي, لأن هذه الطريقة طبقتها في الموقع الناجح ونجحت وجميع الاصدقاء ايضاً ولم يشتكي احد من مشكلة ما, ولو متأكد من انك قمت بعمل جميع الخطوات, أدخل من جوال آخر غير جوالك.

  11. مرحبا
    انا استخدمت هاي الاضافة واجهت مشكلة انو اعلانات الادسنس ما تظهر بنسخة ال AMP ظهر اعلان فقط اسفل الصفحة

    كمان اللغة العربية عندي بنسخة ال AMP من اليسار لليمين يعني مقلوبة

    يا ريت تقدر تساعدني بحل هاي المشاكل

    1. بالنسبة لاعلانات ادسنس يمكنك استخدام هذا الكود

      amp-ads

      مع التعديل على كود الاعلان

      اما بالنسبة لتحسين الصفحة للغة العربية قم بأضافة dir=rtl داخل html ليصبح

      html dir=rtl amp

        1. واذا في مجال توضيح اكثر وين اضيف هاد الكود
          ****
          وكود ال html dir=rtl بأي ملف يتم اضافته لانو الملفات اغلبها php كود

  12. السلام عليكم ورحمة الله

    لقد قمت بتطبيق جميع الخطوات وتمت بنجاح الحمد لله

    ولكن عندما اريد اضافة كود amp-ads من خلال صفحة single.php فان الاعلان لا يظهر بالمقالة , أما اذا وضعت الكود amp-ads مباشرة داخل المقالة فانه يظهر .

    ارجو اخباري بحل حتى لا اضطر لاضافة الكود لجميع المقالات

    شكرا

    1. صديقي الموضوع بسيط, تأكد من مكان الكود الذي تقوم بأدخاله في صفحة single.php لان الامر ليس بحاجة لشرح وبسيط.

  13. اخي قد حللت المشكلة الاولى لكن الموقع لا يعيد توجيه الى amp بالمقالات عند فتحها من الجوال علما اني طبقت الخطوات دون اي زيادة او نقصان

    1. اتوقع ان تكون المشكلة من احد الاضافات لديك, راجع الاضافات الخاصة بتحويل الروابط او التعديل عليها.

  14. شكرا لك على الشرح الرائع طبقت الخطوات وقد نجحت في اكمالها جميعا بقت خطوة واحدة وهي ان يتم تحديث الاضافة من قبل الشركة المطورة ليدعم اللغة العربية واضافة الاعلانات داخل amp

  15. السلام عليكم صديقي الغالي قمت بتطبيق شرحك بالكامل
    واشتغلت معاي الاضافة ولكن هناك تعليق صغير
    اضافة Yoast SEO اكواد الميتا تاج لم تظهر في عرض مصدر الصفحة على amp
    بل تظهر الاكواد الافتراضية للميتا تاج
    نرجو منك اوضاح لنا المشكلة حتى تظهر اكواد الميتا تاج بتعت الاضافة

    1. الاضافة لا تدعم الان AMP ولكن في المستقبل اعتقد انها ستدعمها, كما ان الميتا تاج الافتراضية كافية لمحركات البحث.

        1. نعم تعمل وهي من الاضافة نفسها, يعني شغالة بدون اي تدخل مني, ولو تحب تراسلني عالخاص لفحص مشكلة موقعك اهلا بك.

          1. اخي الكريم شكراً على تواصلك معي واتمنا ان اتواصل معك على الخاص لتبادل الافكار بيننا ولعله ان نفيد بعضنا البعض
            واريد اخذ رأيك في الاضافة التالية
            https://wordpress.org/plugins/accelerated-mobile-pages/
            والاضافة الثانية
            https://wordpress.org/plugins/amp/
            ما هو الفرق بين الاضفتين
            وشكراً

            1. اهلا بك صديقي محمد
              الاضافة الاولى ليست رسمية, اما الاضافة الثانية فهي الرسمية والتي تدعمها ووردبريس بنفسها.

              1. شكراً صديقي على التوضيح ان كان ما عندك مانع نراسل بعض على الخاص لتبادل الأفكار
                مع فائق الاحترام

  16. بعد التركيب وعمل كل الخطوات بصورة صحيحة 100% روابط الجوال لا تتحول الى amp نهائيا من اى جوال فى العالم

    ارجو الحل

  17. شكرا شرح في قمة الروعة
    اخي بالنسبة للتحويل وجدت الحل وحابب افيدكم فيه (سهل للغاية)
    اذهب إلي cPanel موقعك و بعدها ادخل علي File Manager و بعدها اذهب إلي مجلد wp-content و بعدها ادخل علي Themes و ادخل علي القالب المفعل حاليا علي موقعك و قم بالتعديل علي ملف header.php و اضف في بدايته هذا الكود

  18. السلام علكم اخ وليد
    ارسلت لك على حسابك على الفيسبوك تفاصيل المشكلة التي اعاني منها مرفقة بالصور
    ارجو ان تتمكن من مساعدتي
    شكرا

  19. السلام عليكم اخي وليد كود تحويل الزوار للجوال مش شغال
    انا الان طبقت شرحك ونزلت الاضافة والامور عندي تمام
    بس ناقصني احول الزوار على amp
    هل هناك حل او اقتراح وشكراً

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

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *