Google AMP - बेसिक सिंटैक्स

इस अध्याय में, हम Google AMP पृष्ठों के साथ आरंभ करने के लिए मूलभूत आवश्यकताओं पर चर्चा करेंगे।

नमूना Amp पृष्ठ

एक amp पृष्ठ के लिए एक मूल उदाहरण नीचे दिखाया गया है -

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img 
            src = "images/christmas1.jpg" 
            width = "300" 
            height = "300" 
            layout = "responsive">
         </amp-img>
      </p>
   </body>
</html>

अनिवार्य टैग

Amp पेज में शामिल होने के लिए कुछ अनिवार्य टैग हैं। यह खंड उन पर विस्तार से चर्चा करता है -

हमें यह सुनिश्चित करना होगा कि हम जोड़ें amp या as html टैग के रूप में नीचे दिखाया गया है

<html amp>
   OR 
<html ⚡>

हमें html पेज में <head> और <body> टैग को जोड़ना चाहिए।

यदि आप किसी अनिवार्य मेटा टैग से चूक जाते हैं तो Amp सत्यापन विफल हो सकता है। कुछ अनिवार्य मेट्स टैग जिन्हें पेज के हेड सेक्शन में जोड़ा जाना है, उन्हें यहाँ दिखाया गया है -

<meta charset="utf-8">
   <meta name  =  "viewport" 
      content = "width = device-width,
      minimum-scale = 1,
      initial-scale = 1">

हेड टैग के अंदर जोड़ने के लिए rel = "canonical" का लिंक

<link rel = "canonical" href = "./regular-html-version.html">

Amp- बॉयलरप्लेट के साथ स्टाइल टैग -

<style amp-boilerplate>
   body{
     -webkit-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;animation:
      -amp-start 8s steps(1,end) 0s 1 normal both
   }
   @-webkit-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>

Amp- बॉयलरप्लेट के साथ नोस्क्रिप्ट टैग -

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none}
   </style>
</noscript>

Async के साथ amp स्क्रिप्ट टैग को इसमें जोड़ा गया जैसा कि नीचे दिखाया गया है। यह सभी का सबसे महत्वपूर्ण टैग है -

<script async src = "https://cdn.ampproject.org/v0.js">
</script>

आपको इस टैग का उपयोग करना चाहिए जिसे आप पृष्ठ पर कस्टम सीएसएस जोड़ना चाहते हैं। कृपया नोट करें कि हम बाहरी शैली की शीट को amp पृष्ठों में नहीं कह सकते। कस्टम सीएसएस जोड़ने के लिए, आपके सभी सीएसएस को यहां जाना होगा -

<style amp-custom>
   //all your styles here
</style>

आप पृष्ठ-url के अंत में # developement = 1 का उपयोग करके अपने ब्राउज़र में उपरोक्त पृष्ठ को मान्य कर सकते हैं।

अब, हम ब्राउजर में इसका परीक्षण करते हैं। मैंने पृष्ठ को स्थानीय रूप से होस्ट किया है और इसे amppage.html के रूप में सहेजा है।

ऊपर दिए गए परीक्षण के लिए url है

http://localhost/googleamp/amppage.html#development=1

उदाहरण

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width=device-width,
      minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img 
            src = "images/christmas1.jpg" 
            width = "300" 
            height = "250" 
            layout = "responsive">
         </amp-img>
      </p>
   </body>
</html>

उत्पादन

आप डेवलपर कंसोल में amp सत्यापन स्थिति निम्नानुसार देख सकते हैं -

यह हमें AMP सत्यापन को सफल बनाता है क्योंकि हमने एक वैध amp पेज के लिए सभी आवश्यक अनिवार्य टैग जोड़े हैं।