10 مكونات هامة لصفحات الجوال المتسارع (AMP) يجب أن تعرفها
تسارع صفحات الجوال أو AMP هي مبادرة جوجل ل اجعل شبكة الجوال أسرع. لتحقيق هذا الهدف ، تقيد معايير AMP كيفية استخدام HTML و CSS و JavaScript و يدير تحميل الموارد الخارجية, مثل الصور ومقاطع الفيديو والإعلانات عبر وقت التشغيل الخاص بها.
هذا يستتبعك لا يمكن استخدام إما جافا سكريبت مخصص (مؤلف أو مؤلف من جهة خارجية) أو أي عناصر HTML متعلقة بالموارد مثل الصور ومقاطع الفيديو في مستندات AMP.
لسد الفجوة بين احتياجات المستخدمين وأفضل ممارسات الأداء ، لدى AMP مكونات محددة يمكنك استخدام بدلا من هذه العناصر المستبعدة.
مكونات AMP هي علامات HTML محددة. إنها تتشابه مع علامات HTML المعتادة: تحتوي على علامات فتح وإغلاق ، وسمات ، ويمكن تصميم معظمها باستخدام CSS. يمكن التعرف عليها بسهولة دائما تبدأ مع أمبير- اختصار.
هناك نوعان من مكونات AMP: مدمج و وسعوا المكونات.
المدمج في مكونات AMP
بنيت الإضافية بنيت في وقت تشغيل جافا سكريبت AMP ، لذلك ليس لديك لتضمينها بشكل منفصل.
1. أمبير IMG
يحل محل بطاقة في مستندات AMP HTML. تحتاج إلى إضافة SRC و بديل سمات تماما مثل عند العمل مع العادية جزء.
لديه أيضًا سمتان أخريان مطلوبتان: تحتاج دائمًا إلى حدد ال عرض و ارتفاع سمات في قيم عدد صحيح بكسل ، لأن هذا يسمح لوقت التشغيل AMP ل حساب التخطيط مقدما.
أذا أردت اجعل الصورة سريعة الاستجابة, أضف ال تخطيط = "استجابة" صفة، عزا. ال نسق صفة، عزا يتحكم في التخطيط في مستندات AMP ، ويمكن إضافتها إلى أي مكونات AMP (تعرف على المزيد حول هذا على نظام تخطيط AMP).
يمكنك أيضا استخدام srcset السمة على علامة ل تحديد صور مختلفة لمختلف viewports وكثافة بكسل. يعمل بنفس الطريقة كما هو الحال مع الصور غير AMP.
2. أمبير الفيديو
ممكن أن يستخدم ل تضمين مقاطع فيديو HTML مباشرة في مستندات AMP HTML. يحل محل في ملفات AMP. ال بطاقة كسول الأحمال أشرطة الفيديو من أجل تحسين الأداء.
مصدر الفيديو يجب تقديمه عبر بروتوكول HTTPS. أنت مطلوب لإضافة عرض و ارتفاع السمات ، مثلما هو الحال مع مكون.
ال تحتوي العلامة على العديد من السمات الاختيارية ، مثل تشغيل تلقائي و الملصق التي يمكنك تحديدها لضبط كيفية عرض فيديو HTML5 الخاص بك.
يدعم mp4 و webm و ogg وجميع التنسيقات الأخرى التي يدعمها HTML5
إذا كنت تريد ، يمكنك أيضا إضافة مقاطع الفيديو الاحتياطية للمستخدمين الذين لديهم متصفحات لا تدعم مقاطع فيديو HTML5 ، باستخدام تراجع السمة و علامة HTML.
متصفحك لا يدعم فيديوهات HTML5.
3. أمبير من الاعلانات و أمبير-تضمين
يوفر لك iframe رمل التي يمكنك اعرض اعلاناتك. يجب عليك عرض إعلاناتك عبر بروتوكول HTTPS.
لا يمكنك تشغيل البرامج النصية التي توفرها شبكة إعلاناتك بنفسك. بدلاً من ذلك ، يقوم وقت تشغيل AMP بتنفيذ JavaScript للشبكة المحددة داخل صندوق الحماية. أنت تحتاج فقط إلى تحديد الشبكة التي تستخدمها, وأضف بياناتك.
ال مكون يتطلب منك إضافة أبعاد الإعلان باستخدام عرض و ارتفاع سمات.
يمكنك تحديد الشبكة الإعلانية التي تستخدمها مع نوع صفة، عزا. انظر قائمة شبكات الإعلانات المدعومة.
كل شبكة إعلانية لها شبكة خاصة بها البيانات-* سمات تحتاج أيضا إلى إضافة. لمعرفة أي واحدة تحتاج إليها ، انقر على شبكتك الإعلانية في القائمة أعلاه.
هو الاسم المستعار لل , لا تذكر الوثائق الكثير عن ذلك بخلاف ما يمكن استخدامه بدلاً من ذلك عندما يكون دلالة أكثر دقة. نظرًا لأن Google تعد بتطوير مكونات AMP المتعلقة بالإعلانات بمرور الوقت ، فقد يتغير هذا في المستقبل.
4. أمبير بكسل
مع , يمكنك إضافة بكسل تتبع إلى مستندات AMP HTML الخاصة بك إلى عدد مرات مشاهدة الصفحة. لديها سمة واحدة فقط ، والمطلوب SRC السمة ، والتي تحتاج إلى تحديد عنوان URL الذي ينتمي إلى بكسل التتبع.
ال علامة تسمح بدائل URL القياسية, مما يعني أنك تستطيع توليد قيمة URL عشوائية لتتبع كل انطباع.
راجع دليل استبدال عنوان URL الخاص بـ AMP إذا كنت تريد استخدام هذا المكون. لاحظ أنه لا يمكنك أسلوب مكون.
مكونات AMP الموسعة
كمكونات AMP الموسعة ليست جزءًا من وقت تشغيل JavaScript, أنت دائما بحاجة لاستيرادها في ال قسم من صفحة AMP التي تريد استخدامها.
ملاحظة: قد تتغير إصدارات المكونات في المستقبل ، لذلك لا تنسَ ذلك تحقق من الإصدار الحالي في الوثائق.
5. أمبير السمعية
يحل محل HTML5 العلامة ، ويجعل من الممكن تضمين ملفات الصوت HTML5 مباشرة في صفحات AMP.
لاستخدامها ، أنت مطلوب لتحديد SRC, عرض و ارتفاع السمات ، ويمكنك أيضًا إضافة ثلاث سمات اختيارية: تشغيل تلقائي, عقدة و صامتة.
ويمكن أيضا أن تكون فكرة جيدة ل إضافة ملفات الصوت الاحتياطية للمستخدمين الذين لديهم متصفحات لا تدعم HTML5. يمكنك القيام بذلك عن طريق استخدام تراجع السمة و العلامة ، تماما مثل مع ما سبق ذكره مكون.
ال يدعم مكون AMP نفس تنسيقات الصوت مثل علامة HTML5.
متصفحك لا يدعم صوت HTML5.
ليستخدم , تضمين البرنامج النصي التالي في قسم من وثيقة AMP الخاصة بك:
6. أمبير-IFRAME
يعرض iframe في مستندات AMP. تم جعله أكثر أمانًا من إطارات iframes بلغة HTML العادية. لذلك هم كذلك رمل افتراضيا.
هناك بعض القواعد المتعلقة يجب عليك اتباع لتمرير التحقق من الصحة.
يجب عليك تحديد عرض, ارتفاع, و رمل الصفات. ال رمل السمة فارغة افتراضيًا ، لكن يمكنك منحها قيمًا مختلفة من أجل تعديل سلوك iframe, على سبيل المثالرمل = "السماح النصية"يتيح iframe تشغيل JavaScript. يمكنك استخدام سمات iframes القياسية كذلك.
بينما أبعاد محددة مسبقا من قبل عرض و ارتفاع السمات ، هناك طريقة لتغيير حجمها في وقت التشغيل. لاستخدام ال المكون ، أضف البرنامج النصي التالي إلى صفحة AMP الخاصة بك:
7. أمبير-الأكورديون
الأكورديون تشكل نمط واجهة مستخدم متكرر في تصميم الأجهزة المحمولة ، حيث إنها توفر مساحة ، ولكنها لا تزال تعرض المحتوى بطريقة يمكن الوصول إليها. يجعل من الممكن ل إضافة بسرعة الأكورديون إلى صفحات AMP.
يجب أن تستخدم أقسام الأكورديون HTML5 العلامة ، وتحتاج إلى أن تكون الأطفال مباشرة من بطاقة.
كل قسم يجب أن يكون لديك طفلان مباشران:
واحد لهذا العنوان
واحد للمحتوى (يمكن أن يكون المحتوى أيضًا صورة)
استخدم ال موسع السمة على أي قسم تريد توسيعه بشكل افتراضي.
القسم 1
محتوى القسم 1
القسم 2
محتوى القسم 2
القسم 3
صورة للقسم 3
لاستخدام ال مكون في وثيقة AMP الخاصة بك ، وتشمل البرنامج النصي التالي:
8. أمبير-العلبة الخفيفة
يضيف مفضلتي لعناصر مختلفة (في معظم الحالات ، صور) على صفحات الجوال المتسارعة.
عندما يتفاعل المستخدم مع العنصر ، على سبيل المثال الصنابير عليه ، صندوق الضوء يوسع ويملأ viewport كله. أنت بحاجه إلى إضافة زر أو عنصر تحكم آخر التي يمكن للمستخدم النقر على.
لاحظ أن أمبير-العلبة الخفيفة يمكن استخدامها فقط مع لا يوجد عرض نسق.
لاستخدام ال المكون ، تحتاج إلى استيراده مع التعليمات البرمجية التالية:
9. أمبير-دائري
كثيرا ما تستخدم دائري في تصميم المحمول ، لأنها تسمح ل عرض العديد من العناصر المماثلة (في معظم الأحيان الصور) على طول المحور الأفقي. يتم تقديم نتائج AMP أيضًا بتنسيق دائري في بحث Google.
ال مكون تمكنك من إضافة دائري إلى موقعك. ال الأطفال مباشرة من سوف يعتبر عنصر عناصر من دائري. يجب عليك تحديد أبعاد دائري مع عرض و ارتفاع سمات.
يمكنك استخدام اختياري نوع السمة لتحديد كيفية عرض العناصر دائري. إذا كان نوع السمة يأخذ "دائري" القيمة ، وسيتم عرض العناصر كشريط مستمر (هذا هو الافتراضي) ، في حين أن "الشرائح" سوف قيمة عرض العناصر في شكل الشرائح.
ال تحتوي العلامة أيضًا على سمات اختيارية أخرى يمكن أن تساعدك في تحسين النتيجة.
في المثال أدناه ، لاحظ أن كل من دائري وجميع عناصره استخدم نفس الشيء عرض و ارتفاع القيم.
ال يتطلب المكون إضافة البرنامج النصي التالي:
10. أمبير-تحليلات
ممكن أن يستخدم ل جمع تحليلات البيانات على صفحات AMP. حاليا, يدعم أربعة أنواع من أحداث التتبع, لكن هذا يمكن أن يتغير في المستقبل:
مشاهدة صفحة
نقرات مرساة
مؤقت
التمرير
ليستخدم , أنت بحاجه إلى إضافة كائن تكوين JSON داخل
أضف النص التالي إلى قسم من صفحة AMP HTML الخاصة بك لاستيراد مكون:
الكلمات الأخيرة
في هذا المنشور ، ألقينا نظرة على جميع مكونات AMP المضمنة ، وبعض المكونات الموسعة. نظرًا لأن "تسريع صفحات الجوال" ما زال جديدًا ، يمكن أن تتغير أشياء كثيرة في المستقبل ، لذلك من المفيد مراقبة الوثائق إما على Github أو على موقع AMP الرسمي.
نظرًا لأن مكونات AMP هذه مفتوحة المصدر ، يمكنك أيضًا المساهمة في التطوير ، حتى خلق المكون الخاص بك. إذا كنت تريد أن ترى كيف تبدو صفحة AMP كاملة مع مكونات مختلفة ، يمكنك التحقق من هذه الأمثلة القليلة على جيثب.
