10 महत्वपूर्ण त्वरित मोबाइल पेज (एएमपी) घटक जो आपको जानना चाहिए

त्वरित मोबाइल पेज या एएमपी के लिए Google की पहल है मोबाइल वेब को तेज़ करें. इस लक्ष्य को प्राप्त करने के लिए, एएमपी मानक प्रतिबंधित करते हैं कि आप एचटीएमएल, सीएसएस और जावास्क्रिप्ट का उपयोग कैसे कर सकते हैं, और बाहरी संसाधनों के लोडिंग का प्रबंधन करता है, जैसे कि चित्र, वीडियो और विज्ञापन अपने स्वयं के क्रम के माध्यम से.

यह आपको मजबूर करता है उपयोग नहीं कर सकते किसी भी कस्टम (लेखक-लिखित या तृतीय-पक्ष) जावास्क्रिप्ट या आपके AMP दस्तावेजों में किसी भी संसाधन-संबंधित HTML तत्व जैसे चित्र और वीडियो.

उपयोगकर्ताओं की आवश्यकताओं और सर्वश्रेष्ठ प्रदर्शन प्रथाओं के बीच अंतर को पाटने के लिए, एएमपी के पास है विशिष्ट घटक आप ऐसा कर सकते हैं इन बहिष्कृत तत्वों के स्थान पर उपयोग करें.

एएमपी घटक हैं विशिष्ट HTML टैग. वे नियमित HTML टैग के समान व्यवहार करते हैं: उनके पास टैग, विशेषताएँ खोलना और बंद करना है, और उनमें से अधिकांश को सीएसएस के साथ स्टाइल किया जा सकता है। वे आसानी से पहचाने जा सकते हैं, जैसे वे हमेशा के साथ शुरू करो amp- उपसर्ग.

एएमपी घटक दो प्रकार के होते हैं: बिल्ट-इन तथा विस्तृत अवयव.

निर्मित में एएमपी घटक

निर्मित-इन एएमपी के जावास्क्रिप्ट रनटाइम में बनाया गया है, इसलिए आपको उन्हें अलग से शामिल करने की आवश्यकता नहीं है.

1. amp-img

की जगह टैग एएमपी एचटीएमएल दस्तावेजों में। आपको जोड़ने की आवश्यकता है src तथा alt जब आप नियमित रूप से काम करते हैं तो जैसी विशेषताएं होती हैं तत्त्व.

दो अन्य आवश्यक विशेषताएँ भी हैं: आपको हमेशा इसकी आवश्यकता होती है विवरण दें चौड़ाई तथा ऊंचाई गुण पूर्णांक पिक्सेल मानों में, यह एएमपी रनटाइम को अनुमति देता है अग्रिम में लेआउट की गणना करें.

यदि आप चाहते हैं छवि को उत्तरदायी बनाएं, जोड़ें लेआउट = "उत्तरदायी" विशेषता। ख़ाका गुण लेआउट को नियंत्रित करता है एएमपी दस्तावेजों में, और इसे किसी भी एएमपी घटकों में जोड़ा जा सकता है (एएमपी लेआउट सिस्टम पर इसके बारे में और जानें).

आप भी उपयोग कर सकते हैं srcset पर विशेषता को टैग करें अलग-अलग चित्र निर्दिष्ट करें विभिन्न व्यूपोर्ट और पिक्सेल घनत्व के लिए। यह उसी तरह काम करता है जैसे गैर-एएमपी छवियों के साथ.

2. amp-वीडियो

क्या इस्तेमाल किया जा सकता है सीधे HTML वीडियो एम्बेड करें एएमपी एचटीएमएल दस्तावेजों में। यह प्रतिस्थापित करता है एएमपी फाइलों में। टैग आलसी वीडियो लोड करता है प्रदर्शन का अनुकूलन करने के लिए.

वीडियो का स्रोत HTTPS प्रोटोकॉल के माध्यम से सेवा की जानी चाहिए. आपको जोड़ना आवश्यक है चौड़ाई तथा ऊंचाई विशेषताओं, बस के साथ की तरह अंग.

टैग में कई वैकल्पिक विशेषताएँ हैं, जैसे कि स्वत: प्ले तथा पोस्टर जिसे आप अपने HTML5 वीडियो को प्रदर्शित करने के तरीके के बारे में बता सकते हैं.

HTML5 द्वारा समर्थित mp4, webm, ogg और अन्य सभी स्वरूपों का समर्थन करता है

अगर आप चाहें, तो आप भी कर सकते हैं फ़ॉलबैक वीडियो जोड़ें उन ब्राउज़र वाले उपयोगकर्ताओं के लिए जो HTML5 वीडियो का समर्थन नहीं करते हैं, का उपयोग करते हुए मैदान छोड़ना विशेषता और HTML टैग.

  
 
आपका ब्राउज़र HTML5 वीडियो का समर्थन नहीं करता है.
 
    

3. amp-विज्ञापन तथा amp-एम्बेड

आपको प्रदान करता है iframe सैंडबॉक्स जिसमें आप कर सकते हैं अपने विज्ञापन प्रदर्शित करें. आपको अपने विज्ञापनों की सेवा करनी चाहिए HTTPS प्रोटोकॉल के माध्यम से.

आप अपने विज्ञापन नेटवर्क द्वारा आपूर्ति की गई स्क्रिप्टों को स्वयं नहीं चला सकते। इसके बजाय, एएमपी रनटाइम सैंडबॉक्स के अंदर दिए गए नेटवर्क के जावास्क्रिप्ट को निष्पादित करता है। आप केवल यह निर्दिष्ट करने की आवश्यकता है कि आप किस नेटवर्क का उपयोग करते हैं, और अपना डेटा जोड़ें.

घटक आपको करने की आवश्यकता है विज्ञापन के आयाम जोड़ें का उपयोग करते हुए चौड़ाई तथा ऊंचाई गुण.

आप अपने द्वारा उपयोग किए जाने वाले विज्ञापन नेटवर्क को परिभाषित कर सकते हैं प्रकार विशेषता। समर्थित विज्ञापन नेटवर्क की सूची देखें.

प्रत्येक विज्ञापन नेटवर्क का अपना है डेटा-* विशेषताएँ आपको भी जोड़ने की आवश्यकता है। यह देखने के लिए कि आपको किसकी ज़रूरत है, उपरोक्त सूची में अपने विज्ञापन नेटवर्क पर क्लिक करें.

का उपनाम है , प्रलेखन इसके बारे में ज्यादा नहीं कहता है कि इसके बजाय इसका उपयोग किया जा सकता है जब यह बात है शब्दार्थ अधिक सटीक. जैसा कि Google समय-समय पर विज्ञापन से संबंधित एएमपी घटकों को विकसित करने का वादा करता है, यह भविष्य में बदल सकता है.

4. amp पिक्सेल

साथ में , आप ऐसा कर सकते हैं एक ट्रैकिंग पिक्सेल जोड़ें अपने एएमपी एचटीएमएल दस्तावेजों को पृष्ठ दृश्य गिनें. इसकी केवल एक विशेषता है, आवश्यक src विशेषता, जिसमें आपको आवश्यकता है ट्रैकिंग पिक्सेल से संबंधित URL निर्दिष्ट करें.

टैग की अनुमति देता है मानक URL प्रतिस्थापन, जिसका मतलब आप कर सकते हैं एक यादृच्छिक URL मान उत्पन्न करें प्रत्येक छाप को ट्रैक करने के लिए.

यदि आप इस घटक का उपयोग करना चाहते हैं, तो एएमपी का URL प्रतिस्थापन गाइड देखें। ध्यान दें कि आप शैली नहीं कर सकते अंग.

विस्तारित AMP घटक

विस्तारित एएमपी घटकों के रूप में जावास्क्रिप्ट रनटाइम का हिस्सा नहीं हैं, आप हमेशा उन्हें आयात करने की आवश्यकता है में एएमपी पृष्ठ का अनुभाग जिस पर आप उनका उपयोग करना चाहते हैं.

नोट: घटक संस्करण भविष्य में बदल सकते हैं, इसलिए भूल न करें वर्तमान संस्करण की जाँच करें प्रलेखन में.

5. amp-ऑडियो

की जगह HTML5 टैग, और इसे संभव बनाता है सीधे HTML5 ऑडियो फ़ाइलों को एम्बेड करें एएमपी पृष्ठों में.

इसका उपयोग करने के लिए, आपको यह निर्दिष्ट करना होगा src, चौड़ाई तथा ऊंचाई विशेषताएँ, और आप तीन वैकल्पिक विशेषताएँ भी जोड़ सकते हैं: स्वत: प्ले, पाश तथा मौन.

यह एक अच्छा विचार भी हो सकता है फ़ॉलबैक ऑडियो फ़ाइलें जोड़ें उन ब्राउज़र वाले उपयोगकर्ताओं के लिए जो HTML5 का समर्थन नहीं करते हैं। आप इसका उपयोग करके कर सकते हैं मैदान छोड़ना विशेषता और टैग, उपरोक्त के साथ की तरह अंग.

एएमपी घटक समान ऑडियो प्रारूपों का समर्थन करता है HTML5 टैग.

  
 
आपका ब्राउज़र HTML5 ऑडियो का समर्थन नहीं करता है.
 
    

काम में लाना , निम्नलिखित स्क्रिप्ट में शामिल करें आपके AMP दस्तावेज़ का अनुभाग:

6. amp-आइफ्रेम

एक आइफ्रेम प्रदर्शित करता है एएमपी दस्तावेजों में. नियमित HTML iframes की तुलना में अधिक सुरक्षित होने के लिए बनाया गया है। इसलिए वे हैं सैंडबॉक्स डिफ़ॉल्ट रूप से.

इससे जुड़े कुछ नियम हैं आपको सत्यापन पास करने का पालन करना चाहिए.

आपको निर्दिष्ट करना होगा चौड़ाई, ऊंचाई, तथा सैंडबॉक्स जिम्मेदार बताते हैं। सैंडबॉक्स विशेषता डिफ़ॉल्ट रूप से खाली है, लेकिन आप इसे अलग-अलग मान दे सकते हैं iframe के व्यवहार को संशोधित करें, उदाहरण के लिएसैंडबॉक्स = "अनुमति देते हैं-स्क्रिप्ट"आइफ्रेम जावास्क्रिप्ट को चलाने देता है। आप मानक iframes की विशेषताओं का भी उपयोग कर सकते हैं.

जबकि के आयाम द्वारा पूर्वनिर्धारित हैं चौड़ाई तथा ऊंचाई विशेषताएँ, रनटाइम में इसे आकार देने का एक तरीका है। का उपयोग करने के लिए घटक, अपने AMP पृष्ठ पर निम्न स्क्रिप्ट जोड़ें:

7. amp-अकॉर्डियन

accordions मोबाइल डिज़ाइन में लगातार UI पैटर्न बनाते हैं, क्योंकि वे अंतरिक्ष को बचाते हैं, लेकिन फिर भी सामग्री को एक सुलभ तरीके से प्रदर्शित करता है. यह संभव बनाता है जल्दी से जोड़ जोड़ते हैं एएमपी पृष्ठों के लिए.

समझौते के वर्गों का उपयोग करना चाहिए

  
 
अनुभाग एक
 
धारा १ की सामग्री
 
 
 
धारा 2
 
धारा 2 की सामग्री
 
 
 
धारा 3
 
    
 
  

  विस्तार