ويبقى المحمول المتنامية بوتيرة سريعة.

تواصل الهواتف الذكية بيعها بقوة ، مع توقع أبل وحدها جلب 180 مليار دولار من الهواتف الذكية بحلول عام 2021. هناك أكثر من 224 مليون مستخدم للهواتف الذكية في الولايات المتحدة ، مما يجعل من ويب المحمول التركيز الأساسي لأي مالك للموقع.

إن النمو المستمر لمستخدمي الويب المحمول يجعل من المهم للمصممين ومطوري الواجهة الأمامية فهم التصميم الصحيح لصفحات المحمول المتسارعة.

تؤكد ممارسة صفحات الهاتف المحمول المعجلة على خيارات التصميم التي تتوافق مع ما محركات البحث تصور أنها ودية بما في ذلك جمهور محدد ومحتوى عالي الجودة والتنسيق الصحيح والتوافق السلس للجوّال. ستلاحظ مجموعة متنوعة من صفحات الجوّال المسرَّعة عند تصفح Google في الجوّال باختصار AMP في نتائج البحث .

لا تزال صفحات الجوّال المسرَّعة تستخدم HTML ، على الرغم من أنها تتضمن عناصر خاصة تعطي الأولوية للسرعة على أجهزة الجوّال. يتم إنشاء المتطلبات الفنية لـ AMP بواسطة مشروع AMP ، مع المعايير عملت جنبا إلى جنب مع كبار الشخصيات المؤثرة على حركة المرور مثل جوجل. تم إنشاء المشروع استجابةً لواجهات المستخدم متعددة المستويات وأوقات التحميل البطيئة عند تصفح المواقع على جهاز محمول.

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

والنتيجة هي تجربة تصفح أسرع وأكثر تماسكًا تعمل على تحسين معدلات السقوط ، وزيادة تفاعل القارئ وتوجيه المستخدمين في تصفح الويب المحمول كقاعدة أساسية.

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

1. ضع في اعتبارك AMP-Carousel للصفحة الرئيسية

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

ال ميزة AMP-carousel تمكن المصممين من عرض عدة أجزاء مماثلة من المحتوى على محور أفقي. بعد استيراد مكون الرف الدائري في العنوان ، يمكنك استخدام type = "carousel" لعرض قائمة بالصور ، كظهور شريط متواصل. إنها ميزة جذابة مثالية للصفحة الأولى عندما تحاول ربط الزوار برؤية شيء ما وراء الصفحة الرئيسية.

2. عرض المشاركات والمنتجات ذات الصلة

شجّع زوّار الموقع على التعمق في محتواك. يمكنك تحقيق ذلك من خلال عرض قائمة بالمنتجات أو المشاركات ذات الصلة بالموضوع الذي يتم عرضه حاليًا. يمكنك بشكل ثابت نشر قائمة المحتوى ذات الصلة ، وإنجازها بشكل فوري بواسطة استخدام الذي يملأ طلب CORS في قالب amp-mustache يؤدي إلى علاقة محتوى ذات محتوى ديناميكي يمكنك تخصيصها لتفضيلاتك المحددة.

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

3. استخدم AMP-Analytics لإيجاد مناطق للتحسين

من المهم لأي مالك موقع ويب معرفة كيفية تفاعل الزائرين مع المحتوى. ال مكون يمكن استخدامها مباشرةً أو مدمجة مع نظام أساسي لتحليلات جهة خارجية ، بما في ذلك Google Analytics. في حدود ، وإضافة السمة "type" وتعيين القيمة إلى البائع الذي تختاره ، وهناك العديد من الخيارات. ال سيساعد المكون أصحاب الموقع الإلكتروني على الحصول على صورة أوضح عن الصفحات وعناصر التصميم التي تؤدي إلى التحويلات وأي المكونات تشهد انخفاضًا في تفاعل المستخدم.

من المهم أن تضع في اعتبارك عند تحليل التحليلات التي ، مع AMP ، يتم تضمين التخزين المؤقت الذكي بشكل طبيعي. والنتيجة هي أنك قد تشاهد حركة مرور أقل من المعتاد. فقط ضع عنصر التخزين المؤقت في الاعتبار عند تحليل الأرقام في البداية.

4. استخدم أداة التحقق من الصحة المدمجة

من الناحية المثالية ، لن يحصل المصممون على أي شيء خاطئ ، لكن يمكن أن يحدث. للتأكد من أن كل شيء يعمل بشكل صحيح على الصفحة ، استخدم أداة التحقق من الصحة المدمجة في AMP بإضافة # development = 1 إلى نهاية عنوان URL للصفحة. إذا فتحت أدوات dev-tools في Chrome وشاهدت الرسالة "تم التحقق بنجاح من AMP" ، فسيكون كل شيء يعمل. إذا لم يكن الأمر كذلك ، فيمكنك الحفر بشكل أعمق حتى يتم حل المشكلة. يمكنك أيضًا استخدام أدوات dev-tools من Chrome للتحقق من تحميل جميع الموارد الخارجية ، بدءًا من الصور ومقاطع الفيديو إلى الخطوط والإطارات المضمنة ، بشكل صحيح.

بالإضافة إلى ذلك ، يمكنك التحقق من صحة بيانات التعريف باستخدام أداة اختبار البيانات المنظمة من Google ، إما عن طريق جلب عنوان URL أو إدراج مقتطف شفرة. يمكن أن تساعد هذه الأدوات في التأكد من صحة كل شيء ، بحيث يتم تمكين زحف محرك البحث. على ملاحظة زحف محرك البحث ، تحقق أيضًا من ملف robots.txt الخاص بك للتحقق من عدم وجود "Disallow: / amp /" في أي سطر. إذا كان هناك ، فلن تتمكن برامج الزحف من الوصول إلى ملفات AMP.

5. تنفيذ الإعلانات داخل AMP

هناك فائدة أخرى من AMP وهي إطار موجود مسبقًا لتطبيق الإعلانات. مكون Amp-ad أو amp-embed ، عبارة عن حاوية لعرض الإعلان. تحميل الإعلانات جنبا إلى جنب مع جميع الموارد الأخرى ، مع عنصر مخصص.

جافا سكريبت غير موجودة داخل وثيقة AMP. بدلاً من ذلك ، يتم تحميل AMP iframe من sandbox iframe. يمكنك ضبط قيم العرض والارتفاع داخل ، مع وسيطة "النوع" التي تحدد شبكة الإعلانات المعروضة. تحمل السمة "src" علامة نصية لشبكة الإعلانات المحددة ، مع توفر العديد من سمات البيانات لاستيعاب التهيئة الإضافية من شبكات الإعلانات.

يمكنك أيضًا تعيين عنصر نائب أو خيار لعدم وجود إعلان متاح ، عبر سمة العنصر النائب. يمكن أيضًا عرض إعلانات الفيديو مع دعم أصلي ، مع دعم مكون وسائط شامل .

تساعد صفحات الجوّال المسرَّعة في زيادة مستوى رؤية محرك البحث بين مستخدمي الجوّال ، خاصةً بعد أن أصبحت Google تحتل صفحات AMP في نتائج البحث.

بالإضافة إلى ذلك ، فإن أوقات التحميل الأسرع والتخصيص المرن والمكونات المرئية التي تسعى إلى تحسين معدل الارتداد تؤدي إلى الحصول على تجربة مستخدم جوّال أفضل من أي وقت مضى.

توفر صفحات الجوّال المسرَّعة إطارًا رائعًا للنمو المستمر لمستخدمي الويب للجوال.