تقنيات Yandex Turbo Pages و Google AMP للتجارة الإلكترونية

مقدمة


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

في الوقت نفسه ، اقترحت محركات البحث تقنيات للتحميل السريع للصفحة. في Google ، توجد صفحات AMP (صفحات الجوال المتسارعة) ، في صفحات Yandex - Turbo.

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

يتلخص جوهر كلتا التقنيتين في حقيقة أن محركات البحث تقوم بتخزين محتويات الصفحة مع الصور وإعطائها للزائر من خوادمها. يأخذ ذلك في الاعتبار عددًا من عوامل الزائر: الجهاز ، الشاشة ، المتصفح ، سرعة الإنترنت ، إلخ. بناءً على دقة الشاشة أو سرعة الإنترنت عبر الهاتف المحمول ، على سبيل المثال ، قد يعطي محرك البحث صورة دقة أقل مما كانت عليه في الموقع ، بالإضافة إلى أن جميع الرسومات ستتأخر عملية التحميل والتحميل المسبق. لقد لاحظت أن Yandex يصنع WebP من صفحات Turbo من صور JPG ، وإذا كان المستعرض يدعمها ، فسيتم عرضها بتنسيق WebP ، مما يعطي ربحًا يتراوح بين 2-3 أضعاف حجم الملف.

في نتائج البحث ، يتم تمييز هذه الصفحات بالبرق (AMP) والصاروخ (Turbo) وفتحها على الفور من ذاكرة التخزين المؤقت لمحرك البحث دون الانتقال إلى الموقع.





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

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

الميزات التقنية


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

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

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

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

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

المتاجر الصغيرة التي لا تحتوي على مستودعات آلية ، وما إلى ذلك ، قد يكون هذا التنسيق مثيرًا للاهتمام. خاصة إذا قمت بإعادة إنشاء الحد الأدنى من منطق التفاعل مع الخلف: تحديث السعر ، والتفويض باستلام خصم / مكافآت شخصية ، وإرسال أمر مع مراعاة المكافآت والخصومات.

سيتم عرض الوقت الذي ستكون فيه هذه التقنيات فعالة مقابل المواقع الكاملة مع مرور الوقت ، ولكن إذا تحركت محركات البحث بنشاط في هذا الاتجاه ، فستكون ببساطة حقيقة جديدة يحتاج الجميع إلى العيش بها.

تتضمن عيوب كلتا التقنيتين في الوقت الحالي حقيقة أن المواقع لا يتم فتحها تحت عنوان حقيقي ، ولكن مع بادئات محرك البحث ، والتي ، على سبيل المثال ، لا تسمح لك بإضافة صفحة إلى مفضلاتك أو مشاركتها:

  • Google: google.com/amp/s/ BudapURL لموقعك]
  • ياندكس: yandex.ru/turbo؟text= BudapURL لموقعك]

يتم حل جزء من هذه المشكلة بواسطة Google في Chrome ، مع إصدار 71 لصفحات AMP ، أصبح من الممكن الآن إنشاء عنوانك. للقيام بذلك ، تحتاج إلى تكوين AMP Packager على الخادم ، وشهادة SSL تدعم "CanSignHttpExchange".

لا يتخلف Yandex أيضًا ، وفي أحدث إصدارات متصفح Yandex لنظامي التشغيل iOS و Android ، سيتم أيضًا عرض نطاق الموقع بدون بادئات.

صفحات AMP و Turbo من حيث التطوير


تعد AMPs صفحات HTML كاملة تدعم جميع العلامات و CSS. هناك عدد من القيود الطفيفة ، والفرق في تصميم الرأس. على سبيل المثال ، علامة img محظورة ، بدلاً من ذلك تحتاج إلى استخدام amp-img. هناك مكونات JavaScript تسمح لك بإنشاء تفاعل مع خادمك من خلال JSON. على سبيل المثال ، يمكنك إرسال نموذج طلب سريع من صفحة AMP إلى الخادم الخاص بك ، وتلقي استجابة في شكل JSON وعرضه. هناك مكونات لمجموعة من الصور ومقاطع الفيديو ، إلخ. تم حظر JavaScript الأصلي في البداية ، ولكن تمت إضافة دعم البرامج النصية مؤخرًا.

صفحات Turbo مقطوعة بدرجة كبيرة HTML لدعم عدد من العلامات ، على الرغم من دعم CSS3 الكامل. لا يمكن إجراء سيناريوهات للتفاعل مع الواجهة الخلفية في الوقت الحالي. هناك أيضًا مكونات للأدوات الدائرية ومقاطع الفيديو والمزيد.
لاحظت أن Yandex تتبع خطى Google وتخطط لإضافة فرص للتفاعل مع الواجهة الخلفية لـ e-comm على صفحات Turbo بنهاية عام 2019:

  • طلب سريع
  • ترخيص
  • الدفع.

كيفية نقل الصفحات إلى محرك البحث


هناك فرق جوهري بين صفحات AMP و Turbo.

تتوفر AMP في الموقع على عنوان URL محدد ، ويمكن الوصول إليها من خلال المتصفح ، على سبيل المثال:

  • /catalog/category/tovar.html - صفحة عادية
  • /amp/catalog/category/tovar.html - AMP

لكل صفحة ، يتم إنشاء AMP ، ويتم تسجيل رابط من خلال رابط rel في الرأس:

  • من صفحة عادية إلى رابط AMP rel = "amphtml" href = ""
  • مع AMP back link rel = "canonical" href = ""

يزحف Google إلى كل من الصفحات العادية وصفحات AMP أثناء الزحف إلى الموقع. كل شيء شفاف تمامًا للتطوير ، يمكنك إنشاء html مختلف (عادي و AMP) في نفس المكون / البرنامج النصي ومنحه للمتصفح وفقًا لعنوان URL.

صفحات توربو تزداد صعوبة. يجب إرسالها إلى Yandex عبر API في XML ، حيث يتم إرسال صفحات HTML الصادرة داخل CDATA. عند الإرسال ، يجب على المرء أن يأخذ في الاعتبار القيود المفروضة على عدد الصفحات في XML واحد ، وعلى عدد الصور في كل صفحة ، وإجمالي عدد الصور في كل XML.

هنا كان لدي معضلة حيث لإنشاء هذا XML. هناك خياران.

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

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

كلا الخيارين قابلان للتطبيق ، وهذا يتوقف على الموقف وتعقد الموقع ، ويمكن استخدام الأول والثاني. أنا استخدم كلاهما على مواقع مختلفة.

ماذا في المستقبل؟


شاهدت بث AMP Conf 2019 ، الذي حدث في اليابان في أبريل. كانت الفكرة الرئيسية هي أن AMP ستوضع كـ "AMP كخدمة". هذا يعني أنه سيتم تحديث الصفحات التي يتم إنشاؤها باستمرار تلقائيًا من حيث التكنولوجيا. على سبيل المثال ، معرض Lightbox الذي تم إنشاؤه اليوم على صفحات AMP ، قد يبدأ غد العمل مع التأثيرات الأخرى لتكبير الصورة أو تمرير الصورة أو ما إلى ذلك.

أنا أيضًا أعتبر النقاط الرئيسية مهمة ، والتي ظهرت بالفعل أو ستظهر في المستقبل القريب:

  • باستخدام جافا سكريبت الأصلي مع قيود
  • القدرة على إنشاء قصص ، والتي بدأت Google تجريبيا دعمها في كتلة منفصلة في هذه القضية (حتى الآن فقط في الولايات المتحدة الأمريكية)
  • AMP for E-mail (يدعم gmail ، mail.ru ، Outlook في الصيف)
  • دعم اللغة الروسية
  • مكون أمبير التجربة لاختبارات A / B
  • Recaptcha 3 الدعم

يمكن افتراض أن الكثير من هذا سيتم تطبيقه في صفحات Turbo ، لكن مع تأخر.

تتيح لك Google أيضًا إنشاء تطبيق ويب متطور استنادًا إلى AMP. لم أتعمق في هذا السؤال ، لكن إذا قمت بإنشاء الموقع بأكمله على AMP واتبعت تعليمات Google الخاصة بالتكيف لتطبيق Progressive Web App ، فستحصل على PWA ، المثبت من المستعرض على الشاشة الرئيسية. سيسمح لك بمشاهدة الموقع دون اتصال بالإنترنت والوصول إلى إعلامات Push للمستخدم.

استنتاج


ستعمل كل من Google و Yandex على دمج كل من المواقع العادية ومشاريع التجارة الإلكترونية لإنشاء صفحات AMP و Turbo. سيؤدي ذلك بدوره إلى تآكل فهم المستخدم الذي يوجد عليه الموقع والذي يطلب منه البضائع. قد يتحول إلى سوق عالمية داخل محركات البحث.

Source: https://habr.com/ru/post/ar468811/


All Articles