جدول المحتويات
شرح كامل عن تسريع صفحات الجوال 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 لقياس حجم الصفحة والوقت المستغرق لتحميل الصفحة.
لاحظ ان حجم الصفحة ليس بالخفيف “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 بشكل كامل, مع التحقق بأن AMP تعمل بشكل جيد وسليم.
تحديث: في التحديث الجديد لإضافة AMP أصبح يمكنك التحكم اكثر بشكل قالب AMP الافتراضي مثل الالوان (لون الهيدر – لون النصوص – لون الخلفية), كما واصبحت تدعم الصورة البارزة مباشرة, واضافة فوتر جميل وتحويل الزائر الى مكان التعليقات في حال كان يريد ان يضع تعليق.
تحويل الزائر القادم من الجوال الى صفحات 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-]+)([\/]*)$ https://sitesuccessful.com/$1/amp [L,R=302]
مع تغيير https://sitesuccessful.com/ الى رابط موقعك. (هذا الكود لم يعد يعمل بعد تحديث اضافة AMP الاخير)
هذا كل شيء عن AMP أو Accelerated Mobile Pages حتى الآن, فالمشروع مازال قيد التطوير والعمل من جوجل, وأي جديد ستجده في هذه المقالة بأذن الله, اتمنى ان تكونو استفدتم, اخوكم وليد حمود.
تحياتى لك على المقال ومجهودك الرائع
انا شخصيا قمت بتجربه الاضافه واعلم انها قيد التطوير لذلك لا احملك اى لوم لانك تحاول تقديم المساعده لنا كما تعودنا منك
الاضافه لها جانب سلبي فى حاله وجود اعلانات علي الموقع فهي تقوم بإيقاف تحميلها لانها تعطي الاولويه للمحتوي وهكذا هي سيئه لاصحاب المواقع الربحيه
لكنه جيده فى حاله لم يكون لديك اعلانات على الموقع
شكرا لكم
يمكنك استخدام هذه الاضافة لإظهار الاعلانات
https://wordpress.org/plugins/pagefrog/
صديقى انا وضعت الرابط بهذا الشكل
“رابط مكسور”
وكانت النتيجة
Failed to load resource: net::ERR_EMPTY_RESPONSE
هل وضع الرابط بهذا الشكل صحيح وان كان وضعه بهذه الطريقة صحيح فلماذا النتيجة بهذا الشكل وشكرا
أخي حسام شاهد الرابط, وانت استخدمته بشكل خاطئ, حيث عليك وضع
amp/#development=1
أما أنت لم تضع amp ووضعت فقط #development=1
اهلاً بك
طب معلش بعتذر مضر لوضع الرابط وانته عدل التعليق
انا وضعت الرابط بهذه الصورة
“تم حذف الرابط بعد اطلاع الادارة عليه”
وكانت النتيجة
Powered by AMP ⚡ HTML – Version 1457112743399
ثم وضعت الرابط بهذه الصورة
“تم حذف الرابط بعد اطلاع الادارة عليه”
وكانت النتيجة
AMP validation had errors:
بعتذر مرة اخرى
هل الرابط الاول سيليم وهل كده AMP شغالة تمام ولا ايه
وان كنت مش عارف اختبرها صح استاذنك تختبرها انته لى وتوافينى بالرد
تقبل تحياتى
الشكل الاول غير صحيح اخي
الشكل الثاني هو الصحيح, وأخطاء AMP تعود لعدة أسباب, مثل استخدام اضافة تحويل روابط أو تحويل برتوكول من HTTP الى HTTPS ولكنك لا تستخدم HTTPS
أو في حال كنت مشترك في Cloudflare
كما أن هناك عدة اخطاء من الاضافة نفسها تظهر عند الجميع, وهي اخطاء طبيعية ستختفي المستقبل بأذن الله.
أشكرك على مرورك.
انا بالفعل مشترك فى كلاود فلير وهذا بناء على نصيحة وتوصية منك فى احد مقالاتك هل احذف اشتراك كلاود فلير
نعم اخي قم بتعليق حسابك فقط حتى تقوم كلاود فلير بحل هذه المشكلة, حيث تم مراسلتها وننتظر الاجابة منها
طيب اخ وليد هذا بالنسبة للوورد برس
ولكن اذا كان موقعي لا يدعم وورد برس
في هذة الحالة ما العمل ؟
الووردبريس هو المهتم الوحيد من المنصات بالAMP, وفي حال وجود أي تطور من المنصات الاخرى سأذكر هذا الشيء على صفحات الموقع الناجح في وسائل التواصل الاجتماعي وفي الموقع بأذن الله.
شكرا لك اخ وليد
بالفعل موقع ناجح (:
اخي وليد يا باشا
قلي بالنسبة للورد برس بس انصب انزل الاضافة و خلص ؟ ولا لازم اعمل شي تاني
نعم قم بتنزيل الاضافة فقط, كل شيء مشروح بالفيديو والصور اخي نبيل.
اهلاً بك.
مشكور اخي وقمت بتركيبها على موقعي لكن عندما ادخل الرابط يعيدني الى الصفحه الرئيسية
انت تستخدم نوع اخر من الروابط, ضع في آخر الرابط /?amp=1
إذا لم تنجح معك, تواصل معي لنحل المشكلة.
اشكرك على سرعة الرد اخي وتعاونك الذي ليس بغريب عليكم …لم تفلح معي اخي هل بالامكان كتابة الرابط
ارسل لي ما قمت به بالكامل لأعرف سبب المشكلة, وهل طبقت الدرس الموجود بالفيديو؟ وهل أهملت شيء؟
حملت الاضافه على الموقع وفعلتها فقط وسويت حفظ للروباط الدائمة
عندما تريد اضافة مقالة تقوم بعمل توليد مقالة جديدة؟ ام صفحة جديدة؟
من اضافة مقالة جديدة
تواصل معي عبر الفيسبوك وبأذن الله سنجد الحل سوياً.
شكراً لك اخ وليد على ماتقدمه
من اكثر المواقع اللى متابعها
وبانتظار للبلوجر
وبالتوفيق للموقع الناجح
اخ وليد قمت بتطبيق كافة الخطوات الموجودة ولكن عندما اقوم بفتح المقالة من جوال لا يتم تحويلي الى رابط ال amp وقمت بتعديل ملف ال .htaccsess
تأكد من كل الخطوات من البداية صديقي, لأن هذه الطريقة طبقتها في الموقع الناجح ونجحت وجميع الاصدقاء ايضاً ولم يشتكي احد من مشكلة ما, ولو متأكد من انك قمت بعمل جميع الخطوات, أدخل من جوال آخر غير جوالك.
راجعت الخطوات اكثر من مرة وكلها حسب المقالة وقمت بتجربتها من اكثر من جوال ولا يوجد تغيير
تواصل معي
مرحبا
انا استخدمت هاي الاضافة واجهت مشكلة انو اعلانات الادسنس ما تظهر بنسخة ال AMP ظهر اعلان فقط اسفل الصفحة
كمان اللغة العربية عندي بنسخة ال AMP من اليسار لليمين يعني مقلوبة
يا ريت تقدر تساعدني بحل هاي المشاكل
بالنسبة لاعلانات ادسنس يمكنك استخدام هذا الكود
مع التعديل على كود الاعلان
اما بالنسبة لتحسين الصفحة للغة العربية قم بأضافة dir=rtl داخل html ليصبح
html dir=rtl amp
عفوا اخ وليد بس الكود مو ظاهر بالرد
واذا في مجال توضيح اكثر وين اضيف هاد الكود
****
وكود ال html dir=rtl بأي ملف يتم اضافته لانو الملفات اغلبها php كود
كل هذه التعديلات ستكون على ملف single.php
السلام عليكم ورحمة الله
لقد قمت بتطبيق جميع الخطوات وتمت بنجاح الحمد لله
ولكن عندما اريد اضافة كود amp-ads من خلال صفحة single.php فان الاعلان لا يظهر بالمقالة , أما اذا وضعت الكود amp-ads مباشرة داخل المقالة فانه يظهر .
ارجو اخباري بحل حتى لا اضطر لاضافة الكود لجميع المقالات
شكرا
صديقي الموضوع بسيط, تأكد من مكان الكود الذي تقوم بأدخاله في صفحة single.php لان الامر ليس بحاجة لشرح وبسيط.
اخي الموقد عندك من اليمين لليسار بعد amp اما انا من اليسار لليمين ما الحل
اخي قد حللت المشكلة الاولى لكن الموقع لا يعيد توجيه الى amp بالمقالات عند فتحها من الجوال علما اني طبقت الخطوات دون اي زيادة او نقصان
اتوقع ان تكون المشكلة من احد الاضافات لديك, راجع الاضافات الخاصة بتحويل الروابط او التعديل عليها.
شكرا لك على الشرح الرائع طبقت الخطوات وقد نجحت في اكمالها جميعا بقت خطوة واحدة وهي ان يتم تحديث الاضافة من قبل الشركة المطورة ليدعم اللغة العربية واضافة الاعلانات داخل amp
اتمنى ذلك ايضاً صديقي, وبالنسبة للاعلانات فإن AMP تدعم ادسنس من خلال استخدام amp-ad
السلام عليكم صديقي الغالي قمت بتطبيق شرحك بالكامل
واشتغلت معاي الاضافة ولكن هناك تعليق صغير
اضافة Yoast SEO اكواد الميتا تاج لم تظهر في عرض مصدر الصفحة على amp
بل تظهر الاكواد الافتراضية للميتا تاج
نرجو منك اوضاح لنا المشكلة حتى تظهر اكواد الميتا تاج بتعت الاضافة
الاضافة لا تدعم الان AMP ولكن في المستقبل اعتقد انها ستدعمها, كما ان الميتا تاج الافتراضية كافية لمحركات البحث.
شكراً على متابعة تعليقي
ولكن عند تجربة موقعكم في اضافة amp
على الرابط التالي
view-source:https://sitesuccessful.com/accelerated-mobile-pages/amp/
تبين لي انه اضافة الميتا تاج فعالة بدون اي مشاكل
نرجو منكم توضيح الامر وشكراً
نعم تعمل وهي من الاضافة نفسها, يعني شغالة بدون اي تدخل مني, ولو تحب تراسلني عالخاص لفحص مشكلة موقعك اهلا بك.
اخي الكريم شكراً على تواصلك معي واتمنا ان اتواصل معك على الخاص لتبادل الافكار بيننا ولعله ان نفيد بعضنا البعض
واريد اخذ رأيك في الاضافة التالية
https://wordpress.org/plugins/accelerated-mobile-pages/
والاضافة الثانية
https://wordpress.org/plugins/amp/
ما هو الفرق بين الاضفتين
وشكراً
اهلا بك صديقي محمد
الاضافة الاولى ليست رسمية, اما الاضافة الثانية فهي الرسمية والتي تدعمها ووردبريس بنفسها.
شكراً صديقي على التوضيح ان كان ما عندك مانع نراسل بعض على الخاص لتبادل الأفكار
مع فائق الاحترام
بانتظارك
بعد التركيب وعمل كل الخطوات بصورة صحيحة 100% روابط الجوال لا تتحول الى amp نهائيا من اى جوال فى العالم
ارجو الحل
شكرا شرح في قمة الروعة
اخي بالنسبة للتحويل وجدت الحل وحابب افيدكم فيه (سهل للغاية)
اذهب إلي cPanel موقعك و بعدها ادخل علي File Manager و بعدها اذهب إلي مجلد wp-content و بعدها ادخل علي Themes و ادخل علي القالب المفعل حاليا علي موقعك و قم بالتعديل علي ملف header.php و اضف في بدايته هذا الكود
شكراً جزيلاً صديقي بشار على المعلومة.
السلام علكم اخ وليد
ارسلت لك على حسابك على الفيسبوك تفاصيل المشكلة التي اعاني منها مرفقة بالصور
ارجو ان تتمكن من مساعدتي
شكرا
السلام عليكم اخي وليد كود تحويل الزوار للجوال مش شغال
انا الان طبقت شرحك ونزلت الاضافة والامور عندي تمام
بس ناقصني احول الزوار على amp
هل هناك حل او اقتراح وشكراً
لا صديقي الى الان لا يوجد حل
الاضافة اشتغلت عندي بدون أدنى مشاكل
وبدأت المقالات الجديدة تتأشرف AMP
ولكن المشكلة عدم ظهور اعلانات ادسنس فما الحل لهذا ؟
أرجو المتابعة والرد بالحل وجزاك الله خيراً
قد تكون احدى مشكلتين:
الاولى انك لم تستطع وضع اعلانات ادسنس بالشكل الصحيح كما هو مشروح في هذه المقالة: https://sitesuccessful.com/optimize-amp-pages/
او انك لم تفعل ادسنس للدومين الذي تضع فيه الاعلانات.
مشكور اخى … ممكن اعرف اسباب تراجع عدد الزوار ؟؟
موقعى
http://www.down-pro.com
موقعك بحاجة لمحتوى وعمل اكثر, استمر بالعمل عليه.
شكرا اخي على المقالة الرائعة
لكن ماذا عن الblogger
البلوغر يجب تعديلها بشكل يدوي.
السلام عليكم هل مازال تطبيق صفحاتamp ممكن فقط على الوردبريس وبالنسبة للمواقع الاخرى هل هناك طريقة لتطبيقها عليه . وشكراً
نعم صديقي للووردبريس فقط.
قمت بعمل كل الخطوات لكن لم يقوم بتحويلي من الجوال الي صفحة amp اود كود التحويل الصحيح لو سمحت ياخي
لم يعد هناك كود صديقي
ياريت اللى جربها على الورد بريس يقولنا رأية
ممكن الكود الذي استعمل الاخ بشار تيري
السلام عليكم تحياتي على المحتوى الرائع
هل الاضافة وردبريبس يتم فيها ظبط amp في الصفحات ؟ ادا لا هل من طريقة لفعل دلك
مجرد تنصيب الاضافة كافي, وستقوم بكل شيء لوحدها.
محتاج اخر شرح للاضافة
السلام عليكم هذه الاضافة موجودة عندي منذ ثلاث شهور لكن اليوم تفاجئت برسالة الى مشرفي المواقع تفيد
اكتشفت انظمة جوجل ان بعض الصفحات الجوال المسرعة لديك لا تتوافق مع ارشادتنا ما حل هذه المشكلة
ممكن كيف فيني فعل الاضافة على فيسبوك طبعا انارفعلتها ع ووردبريس بس لاحظت مواقع عالفيسبوك ومنها روسيا اليوم لديها هذه الميزة لكن لااعرف كيف استطيع مشاركة المقال على فيسبوك
التي على الفيسبوك ليست AMP هي Facebook Instant Articles , واذا اردت تهيئتها تابع هذا الشرح
https://sitesuccessful.com/facebook-instant-articles/
تحياتى لك على المقال ومجهودك الرائع , سيتم التجربة هذه التقنية قريبا على موقعنا
المعذرة إضافة الamp الرسمية الخاصة بالووردبريس مافيها مميز للاقسام لتظهر الفوار على أنه القائمة ، وانا لاحظت انه عندك مميز (قائمة) اضافيه بالاسفل المميز العلوي ، فهل هذه إضافة أخرى أو ماذا وفى انتظار ردك الكريم
أقصد مافيها منيو بتظهر الفوتر
لاحظت أن عندك منيو ، أسف الكيبوورد عندى لخبط
أشرتم في نهاية المقال أن كود ملف htaccess الذي يحوّل الزائر من الموبايل إلى صفحة amp لم يعد يعمل بعد تحديث اضافة AMP الاخير. كيف إذن يمكن تحويل الزائر من الموبايل إلى الصفحة المطلوبة؟
مع الشكر
سيقوم بالتحويل لوحده في حال لزم الأمر, وللتأكد تابع احصائيات موقعك, ستجد ان هناك نقرات اتت لصفحات الAMP من محرك البحث.
مرحبا اخي الكريم .
هل ممكن ان اضيف اضافتين لل AMP يوجد الاضافة التي ذكرتها ويوجد اضافة اخرى موصى بها من Yoast SEO , هل ممكن اجمع بينهما
نعم اخي بالطبع
كيف أقوم بإعادة تحويل القادم من الجوال ؟