دليل عملي لإعداد AMP

لتسريع وقت تحميل المحتوى ، قدمت Google Accelerated Mobile Pages (AMP). قد تبدو التقنية وكأنها محاولة من Google للتنافس مع Facebook Instant Articles وخيارات المحتوى التي يتم تنزيلها بسرعة والتي طورتها شركات أخرى. إنه يوفر فوائد واضحة لبعض الأنظمة الأساسية ، بينما لا يكون مفيدًا في بعض الحالات. يصف المنشور أدناه التقنية نفسها وعملية الإعداد. تكامل AMP ليس بهذه الصعوبة ، على الرغم من أنه يحتوي على بعض الميزات المحددة التي يجب تذكرها.

التاريخ القصير لـ AMP

لا يمكن أن يظل الاختراق السريع والشامل لتقنيات الهاتف المحمول في الحياة اليومية للأشخاص العاديين خارج نطاق تركيز أكبر محرك بحث - Google. لذلك ، في أكتوبر 2015 ، نشروا المنشور حول التكنولوجيا الجديدة التي أصبحت متاحة لمطوري الويب على الهاتف المحمول.

في الواقع ، أصبحت هذه التقنية لمسة نهائية لسياسة "ملائمة للجوّال" كانت Google تدعمها في السنوات الأخيرة. أولاً ، قدموا الخوارزمية التي صنفت المواقع المحسّنة للأجهزة المحمولة بدرجة أعلى. في وقت لاحق ، قاموا بتطوير وتقديم أداة مجانية جديدة تمامًا لتحسين محتوى الصفحات المقصودة - AMP. لمعرفة الفرق بين صفحات AMP والصفحات الملائمة للجوّال ، راجع هذه المقالة والمقابلة مع Duane Forrester.

المكونات الأساسية لتقنية AMP

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

• AMP HTML هو نفس HTML5 المعروف جيدًا ، ولكن مع بعض التعديلات (يتم استبدال بعض العلامات القياسية بأخرى مصممة خصيصًا لـ AMP) ؛

• AMP JS هي مكتبة جديدة توفر وصولاً إلى العلامات الجديدة وتسمح بتحسين سرعة تنزيل الموارد من خلال التحكم فيها مباشرةً.

• Google AMP Cache هي صفحة AMP للتخزين المؤقت للشبكة تعتمد على خادم وكيل CDN. بسبب ما سبق ، هناك زيادة في كمية المحتوى والنصوص والصور على جانب العميل في سرعة التنزيل ، حيث يتم "سحبها" مباشرة من أقرب مصدر عبر HTTP 2.0.

تحقق من المثال أدناه:

لقد غيرت هذه التقنية تمامًا طريقة تفاعل المستخدمين مع موقع الناشر ، لأن

• لا يزور المستخدمون موقع الويب - فهم يرون محتوى المقالة مباشرةً في Google ، حيث يتم تحميله من ذاكرة التخزين المؤقت ؛

• يبدو التنقل عبر المقالات وكأنه شريط تمرير ، مما يعني أنه يمكنك التمرير بين صفحات AMP لليسار واليمين ، والانتقال من خبر إلى آخر.

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

من يجب أن يجرب AMP

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

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

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

تنفيذ AMP

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

• تسريع تنزيل المحتوى في جزء القراءة عدة مرات باستخدام البرامج النصية غير المتزامنة لصفحات AMP.

• إرسال الأنماط في علامة منفصلة «style amp-custom» ؛ تذكر أن حجمها محدود بـ 50 كيلوبايت.

• ضبط ارتفاع وعرض العناصر الرسومية (الصور والرسوم المتحركة) داخل مستند HTML.

• استبدال نصوص js-scripts المخصصة غير المدعومة باستخدام مكتبة AMP JS.

• استخدم الرابط أو CSS @ font-face لتنزيل الخطوط.

كل هذه الميزات (حتى لو لم تنقل أي شيء إلى ذهنك) تؤثر بشكل مباشر على سرعة وسهولة تنفيذ التكنولوجيا.

كيفية إعداد AMP تلقائيًا

حسنًا ، خوارزمية التنفيذ الفعلية هي كما يلي:

1. تحقق مما إذا كان هناك حل جاهز لـ AMP أم لا.

• نعم - استخدمه والتحكم في صلاحية المخرجات. فيما يلي أمثلة على الحلول الجاهزة لأنظمة إدارة المحتوى الأكثر شيوعًا:

ووردبريس - https://wordpress.org/plugins/amp/

دروبال - https://www.drupal.org/project/amp

جملة - https://weeblr.com/joomla-accelerated-mobile-pages/wbamp

• لا - قم بإجراء الدمج يدويًا كما هو موضح في القسم التالي من هذه المقالة. هناك ، سنتحدث عن القيود التي يجب أن تؤخذ في الاعتبار.

2. تحقق مما إذا كنت بحاجة إلى نموذج وظيفي لجمع العملاء المتوقعين أم لا.

• نعم - استخدم "العكاز" لإدخال كود js المخصص المطلوب من خلال "amp-iframe". لمزيد من المعلومات، انقر هنا.

• لا - تخطي هذه الخطوة.

3. تحقق من طريقة تتبع الصفحة التي تلبي احتياجاتك.

• يسمح AMP pixel بمراقبة إحصائيات مشاهدات الصفحة وفقًا لطلب GET. إنه مناسب تمامًا لتحميل البيانات إلى جهة خارجية أو خدمات إحصائية مخصصة.

• AMP Analytics يسمح بتنظيم نقل البيانات إلى Google Analytics وتتبع نشاط المستخدم مباشرة على الصفحة.

كلا الطريقتين مع عينات التعليمات البرمجية موصوفة هنا.

4. تحقق من صلاحية رمز الصفحات باستخدام أداة "اختبار AMP" في Google Search Console.

كيفية إعداد AMP يدويًا

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

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

2. تناسب القوالب باستخدام الخوارزمية التلقائية أو يدويًا (عادةً ما يكون خيار "لا" للمواقع الأكبر حجمًا ، ولكنه حل جيد للمواقع الأصغر).

3. قم بإعداد التحليلات من خلال دمج بكسل التتبع أو رمز Google Analytics.

4. اختبر الصلاحية باستخدام "اختبار AMP" في Google Search Console ، على وجه الخصوص ، لحظة توجيه العلامة الخاصة من الصفحة الرئيسية للموقع إلى amp-page ، بينما يشير rel = "canonical" في الاتجاه المعاكس.

استنتاج

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