Accelerated Mobile Pages की बुनियादी जानकारी

1. खास जानकारी

इस कोडलैब में, Accelerated Mobile Pages या एएमपी बनाने का तरीका बताया गया है. इसके लिए, आपको एक सामान्य समाचार लेख वाला वेब पेज बनाना होगा. यह पेज, एएमपी की खास बातों के मुताबिक होना चाहिए. साथ ही, इसमें मोबाइल पर समाचार दिखाने वाली साइटों पर आम तौर पर इस्तेमाल होने वाली कई वेब सुविधाएं शामिल होनी चाहिए.

आपको क्या सीखने को मिलेगा

एएमपी, मोबाइल वेब इस्तेमाल करने वाले उपयोगकर्ता के अनुभव को कैसे बेहतर बनाता है.
एएमपी साइट की बुनियादी जानकारी.
एएमपी की सीमाएं.
एएमपी के वेब कॉम्पोनेंट, न्यूज़ साइट से जुड़ी सामान्य समस्याओं को कैसे हल करते हैं.
अपने एएमपी पेजों की पुष्टि करने का तरीका.
Google Search के लिए एएमपी को तैयार करने का तरीका.

आपको किन चीज़ों की ज़रूरत होगी

सैंपल कोड
Python (बेहतर होगा कि 2.7) या Chrome 200 OK Web Server एक्सटेंशन
Chrome या ऐसा ही कोई ब्राउज़र जो JavaScript कंसोल की जांच कर सकता हो
कोड एडिटर (उदाहरण के लिए, Atom, Sublime, Notepad++)

2. सैंपल कोड पाना

आपके पास अपने कंप्यूटर पर, पूरा सैंपल कोड डाउनलोड करने का विकल्प होता है:

...या कमांड लाइन से GitHub रिपॉज़िटरी को क्लोन करें:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

आपको एक ZIP फ़ाइल डाउनलोड करनी होगी. इसमें उदाहरण के तौर पर कई संसाधन फ़ाइलें और शुरुआती article.html पेज शामिल होगा.

फ़ोल्डर को अनज़िप करें और अपने कंप्यूटर पर कमांड लाइन के ज़रिए डायरेक्ट्री पर जाएं.

3. सैंपल पेज चलाना

हमारे सैंपल पेज को टेस्ट करने के लिए, हमें वेब सर्वर से फ़ाइलों को ऐक्सेस करना होगा. जांच के लिए, कुछ समय के लिए लोकल वेब सर्वर बनाने के कई तरीके हैं. इस कोड लैब में, हम उपलब्ध तीन विकल्पों के लिए निर्देश देंगे:

Google Chrome ऐप्लिकेशन "Web Server for Chrome" - हमारा सुझाव है कि आप इस ऐप्लिकेशन का इस्तेमाल करें. यह सबसे आसान और सभी प्लैटफ़ॉर्म पर काम करने वाला समाधान है. ध्यान दें: इस तरीके के लिए, Google Chrome इंस्टॉल होना ज़रूरी है.
Firebase Hosting - अगर आपको हमारे नए स्टैटिक ऐसेट होस्टिंग प्लैटफ़ॉर्म "Firebase Hosting" के बारे में भी जानना है, तो यह विकल्प चुनें. एसएसएल की सुविधा डिफ़ॉल्ट रूप से चालू होती है.
लोकल एचटीटीपी Python सर्वर - इसके लिए, कमांड-लाइन का ऐक्सेस ज़रूरी है.

पहला विकल्प: Web Server for Chrome

आपको Chrome वेब स्टोर पर, इस लिंक पर "Web Server for Chrome" ऐप्लिकेशन मिल सकता है.

Chrome ऐप्लिकेशन इंस्टॉल करने के बाद, आपको "फ़ोल्डर चुनें" बटन की मदद से, ऐप्लिकेशन को किसी फ़ोल्डर पर ले जाना होगा. इस कोड लैब के लिए, आपको वह फ़ोल्डर चुनना चाहिए जिसमें आपने कोड लैब की उदाहरण फ़ाइलों को अनज़िप किया है.

इसके अलावा, आपको "Automatically show index.html" विकल्प पर सही का निशान लगाना चाहिए और पोर्ट को "8000" पर सेट करना चाहिए. इन बदलावों को लागू करने के लिए, आपको वेब सर्वर को रीस्टार्ट करना होगा.

इस यूआरएल को ऐक्सेस करें:

http://localhost:8000/article.html

अगर ऊपर दिया गया यूआरएल सही से लोड हो जाता है, तो अगले चरण पर जाएं.

दूसरा विकल्प: Firebase Hosting

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

Firebase Hosting, स्टैटिक होस्टिंग की सुविधा देने वाली कंपनी है. इसका इस्तेमाल करके, स्टैटिक वेबसाइट और उसकी ऐसेट को तुरंत डिप्लॉय और होस्ट किया जा सकता है. इनमें एचटीएमएल, सीएसएस, और JavaScript फ़ाइलें शामिल हैं. स्टैटिक कॉन्टेंट को कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) में कैश मेमोरी में सेव किया जाता है. साथ ही, दुनिया भर में मौजूद पॉइंट ऑफ़ प्रेज़ेंस (पीओपी) के साथ इसे डिलीवर किया जाता है. इससे उपयोगकर्ताओं को कम समय में कॉन्टेंट मिलता है.

आखिर में, Firebase होस्टिंग हमेशा एसएसएल के ज़रिए उपलब्ध कराई जाती है. इसलिए, यह एएमपी और वेब के लिए बहुत अच्छी है. अगर आपको सिर्फ़ एएमपी पर फ़ोकस करना है, तो इस विकल्प को अनदेखा करें.

तीसरा विकल्प: एचटीटीपी Python सर्वर

अगर Chrome का इस्तेमाल नहीं किया जाता है या Chrome एक्सटेंशन इंस्टॉल करने में समस्या आ रही है, तो कमांड-लाइन से Python का इस्तेमाल करके भी लोकल वेब सर्वर शुरू किया जा सकता है.

कमांड लाइन से Python के बिल्ट-इन एचटीटीपी सर्वर को चलाने के लिए, बस यह कमांड चलाएं:

python -m SimpleHTTPServer

इसके बाद, इस यूआरएल को ऐक्सेस करें:

http://localhost:8000/article.html

4. सामान्य एचटीएमएल पेज बनाना

डाउनलोड की गई zip फ़ाइल में, आपको article.html नाम की फ़ाइल मिलेगी. यह वह लेख है जिसके लिए हम एएमपी पेज बना रहे हैं.

article.html के सैंपल से कोड को कॉपी करें और उसे नई फ़ाइल में चिपकाएं. इस फ़ाइल को article.amp.html. के तौर पर सेव करें

अब आपकी article.amp.html फ़ाइल ऐसी दिखनी चाहिए:

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

यह एक सामान्य पेज है, जिसमें स्टैटिक न्यूज़ आर्टिकल के सामान्य एलिमेंट शामिल हैं: सीएसएस, JavaScript, और इमेज टैग.

फ़िलहाल, लेख का एएमपी वर्शन सिर्फ़ मूल लेख की कॉपी है. इसे एएमपी में बदलते हैं. शुरू करने के लिए, हम एएमपी JavaScript लाइब्रेरी फ़ाइल जोड़ेंगे और देखेंगे कि एएमपी की पुष्टि करने वाला टूल चालू होने पर कौनसी गड़बड़ियां दिखती हैं.

एएमपी लाइब्रेरी को शामिल करने के लिए, <head> टैग के सबसे नीचे यह लाइन जोड़ें:

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

अब इस लिंक के ज़रिए, अपने ब्राउज़र में नया article.amp.html पेज लोड करें. इसके बाद, Chrome में Menu > More Tools > Developer Tools के ज़रिए Developer Console खोलें:

अब डेवलपर कंसोल में JavaScript आउटपुट की जांच करें. पक्का करें कि आपने कंसोल टैब चुना हो:

आपको यह लॉग दिखेगा:

Powered by AMP ⚡ HTML

अब एएमपी वैलिडेटर को चालू करने के लिए, अपने यूआरएल में यह फ़्रैगमेंट आइडेंटिफ़ायर जोड़ें:

#development=1

उदाहरण के लिए:

http://localhost:8000/article.amp.html#development=1

आपको अपने ब्राउज़र में पेज को मैन्युअल तरीके से रीफ़्रेश करना पड़ सकता है. अपने ब्राउज़र में किसी पेज को मैन्युअल तरीके से रीफ़्रेश करने के लिए, इस बटन को दबाएं:

आपको पुष्टि करने से जुड़ी कई गड़बड़ियां दिखेंगी:

Screen Shot 2016-05-03 at 10.09.51 AM.png

एएमपी का मतलब Accelerated Mobile Pages होता है. हालांकि, इसका इस्तेमाल रिस्पॉन्सिव पेज बनाने के लिए किया जा सकता है. ये पेज, सभी स्क्रीन साइज़ पर अच्छी तरह से रेंडर होते हैं. ज़्यादा जानकारी के लिए, Google Developers वेबसाइट पर रिस्पॉन्सिव वेब डिज़ाइन सेक्शन देखें.

Chrome डेवलपर टूल में, मोबाइल डिवाइस के अनुभव को सिम्युलेट करने के लिए. यहां मोबाइल फ़ोन डिवाइस के आइकॉन पर क्लिक करें:

अब इस मेन्यू से कोई मोबाइल डिवाइस चुनें. उदाहरण के लिए, "Pixel 2":

आपको अपने ब्राउज़र में, मोबाइल के सिम्युलेटेड रिज़ॉल्यूशन की जानकारी दिखेगी. जैसे:

अब हम काम शुरू करने के लिए तैयार हैं! आइए, पुष्टि की गड़बड़ियों के बारे में एक-एक करके जानें और यह भी जानें कि ये एएमपी से कैसे जुड़ी हैं.

5. पुष्टि करने से जुड़ी गड़बड़ियों को ठीक करना

वर्णमाला का सेट ज़रूरी है

हम यहां दी गई गड़बड़ी को ठीक करने से शुरुआत करेंगे:

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

टेक्स्ट को सही तरीके से दिखाने के लिए, एएमपी को यह ज़रूरी है कि पेज के लिए वर्णसेट सेट किया गया हो. यह हेड टैग का पहला चाइल्ड टैग भी होना चाहिए. ऐसा इसलिए किया जाता है, ताकि मेटा कैरेक्टर सेट टैग से पहले जोड़े गए कॉन्टेंट को फिर से इंटरप्रेट न किया जाए.

हेड टैग की पहली लाइन के तौर पर, यह कोड जोड़ें:

<meta charset="utf-8" />

फ़ाइल को सेव करें, पेज को फिर से लोड करें और देखें कि यह गड़बड़ी अब नहीं दिख रही है.

एएमपी फ़ाइलों में `<link rel=canonical>` टैग होना ज़रूरी है.

हर एएमपी दस्तावेज़ में, कैननिकल पेज का रेफ़रंस देने वाला लिंक होना ज़रूरी है. इसलिए, हम अपने ओरिजनल लेख का लिंक जोड़ते हैं.

यहां दिए गए कोड को <meta charset="utf-8" /> टैग के नीचे जोड़ें:

<link rel="canonical" href="/article.html">

अब, अगर ज़रूरी हो, तो अपने वेबसर्वर को रीस्टार्ट करें और पेज को फिर से लोड करें. हालांकि, अब भी कई गड़बड़ियां ठीक करनी हैं, लेकिन "एएमपी फ़ाइलों में <link rel=canonical> टैग होना ज़रूरी है" वाली गड़बड़ी अब नहीं दिख रही है.

एएमपी एट्रिब्यूट ज़रूरी है

किसी पेज को एएमपी दस्तावेज़ के तौर पर दिखाने के लिए, पेज के रूट एचटीएमएल एलिमेंट पर एक एट्रिब्यूट की ज़रूरत होती है:

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

इस समस्या को हल करने के लिए, <html> टैग में ⚡ एट्रिब्यूट जोड़ें. ऐसा इस तरह से करें:

<!doctype html>
<html ⚡ lang="en">
  <head>
...

अब पेज को फिर से लोड करें और देखें कि दोनों गड़बड़ियां ठीक हो गई हैं.

व्यूपोर्ट ज़रूरी है

इसके बाद, हम इस गड़बड़ी को ठीक करेंगे:

The mandatory tag 'meta name=viewport' is missing or incorrect.

AMP के लिए, व्यूपोर्ट के लिए width और minimum-scale को तय करना ज़रूरी है. इन वैल्यू को क्रमशः device-width और 1 के तौर पर तय किया जाना चाहिए. व्यूपोर्ट एक सामान्य टैग है. इसे एचटीएमएल पेज के <head> में शामिल किया जाता है.

इस समस्या को ठीक करने के लिए, <head> टैग में यहां दिया गया एचटीएमएल स्निपेट जोड़ें. यहां दिया गया meta टैग जोड़ें:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

एएमपी में width और minimum-scale के लिए, सिर्फ़ ये वैल्यू मान्य हैं. initial-scale को तय करना ज़रूरी नहीं है, लेकिन इसे आम तौर पर मोबाइल वेब डेवलपमेंट में शामिल किया जाता है. हमारा सुझाव है कि आप इसे शामिल करें. व्यू पोर्ट और रिस्पॉन्सिव डिज़ाइन के बारे में ज़्यादा जानने के लिए, यहां जाएं.

पहले की तरह, पेज को फिर से लोड करें और देखें कि गड़बड़ी ठीक हुई है या नहीं.

बाहरी स्टाइलशीट

यहां दी गई गड़बड़ी, स्टाइलशीट के इस्तेमाल से जुड़ी है:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

खास तौर पर, यह गड़बड़ी हमारे <head> टैग में मौजूद इस स्टाइलशीट लिंक टैग के बारे में है:

<link href="base.css" rel="stylesheet" />

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

इसलिए, <head> में मौजूद लिंक टैग को हटाएं और उसे इस तरह के इनलाइन टैग से बदलें:

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

स्टाइल टैग के कॉन्टेंट को सीधे तौर पर, आपकी प्रोजेक्ट डायरेक्ट्री में मौजूद base.css फ़ाइल से कॉपी किया जाना चाहिए. स्टाइल टैग पर amp-custom एट्रिब्यूट ज़रूरी है.

एक बार फिर, पेज को फिर से लोड करें और देखें कि स्टाइलशीट से जुड़ी गड़बड़ी ठीक हो गई है या नहीं.

अहम जानकारी: पूरे एएमपी दस्तावेज़ में सिर्फ़ एक स्टाइल टैग हो सकता है. अगर आपके लेखों में कई बाहरी स्टाइलशीट का रेफ़रंस दिया गया है, तो आपको इन स्टाइलशीट को नियमों के एक सेट में इकट्ठा करना होगा. एएमपी दस्तावेज़ों में सीएसएस के कौनसे नियम मान्य हैं, इस बारे में ज़्यादा जानने के लिए इस दस्तावेज़ पेज को पढ़ें.

तीसरे पक्ष की JavaScript

एएमपी में इनलाइनिंग की मदद से, स्टाइलशीट में आसानी से बदलाव किया जा सकता है. हालांकि, JavaScript के मामले में ऐसा नहीं है.

The tag 'script' is disallowed except in specific forms.

एएमपी में, उपयोगकर्ता की जनरेट की गई स्क्रिप्ट इस्तेमाल करने की अनुमति नहीं है. एएमपी में स्क्रिप्ट का इस्तेमाल सिर्फ़ तब किया जा सकता है, जब वे इन दो ज़रूरी शर्तों को पूरा करती हों::

सभी JavaScript एसिंक्रोनस होनी चाहिए. इसका मतलब है कि स्क्रिप्ट टैग में async एट्रिब्यूट शामिल होना चाहिए.
इसमें सिर्फ़ एएमपी लाइब्रेरी और एएमपी कॉम्पोनेंट शामिल किए जा सकते हैं.

इससे तीसरे पक्ष की सभी JavaScript का इस्तेमाल नहीं किया जा सकेगा. हालांकि, इसमें एक अपवाद है. तीसरे पक्ष की JavaScript का इस्तेमाल iframe में किया जा सकता है.

बाहरी base.js फ़ाइल खोलने की कोशिश करें. आपको क्या दिख रहा है? फ़ाइल में कोई JavaScript कोड नहीं होना चाहिए. इसमें सिर्फ़ इस तरह की जानकारी वाला एक कमेंट शामिल होना चाहिए:

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

इस बाहरी JavaScript फ़ाइल को हमारी वेबसाइट का ज़रूरी कॉम्पोनेंट नहीं माना जाता. इसलिए, हम इसके रेफ़रंस को पूरी तरह से हटा सकते हैं.

अपने दस्तावेज़ से, यहां दिया गया बाहरी JavaScript रेफ़रंस हटाएं:

<script type="text/javascript" src="base.js"></script>

अब पेज को फिर से लोड करें और देखें कि स्क्रिप्ट से जुड़ी गड़बड़ी ठीक हो गई है.

ध्यान दें: उपयोगकर्ता की ओर से जनरेट की गई स्क्रिप्ट के लिए, सिर्फ़ दो अपवाद हैं. पहला, जब टाइप एट्रिब्यूट application/ld+json हो. दूसरा, जब टाइप एट्रिब्यूट application/json हो. इनका इस्तेमाल पेज में मेटा-डेटा जोड़ने और एएमपी कॉम्पोनेंट को कॉन्फ़िगर करने के लिए किया जाता है. आने वाले समय में, अन्य नॉन-एक्ज़ीक्यूटेबल स्क्रिप्ट जोड़ी जा सकती हैं.

एएमपी सीएसएस बॉयलरप्लेट

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

अगली गड़बड़ियां, <head> टैग में मौजूद दो टैग के बारे में बताती हैं. हर एएमपी दस्तावेज़ में ये टैग शामिल होने चाहिए:

<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>

ऊपर दिए गए कोड स्निपेट को अपने दस्तावेज़ के <head> टैग में सबसे नीचे जोड़ें.

पहला टैग, पेज के कॉन्टेंट को तब तक नहीं दिखाता, जब तक एएमपी JavaScript लाइब्रेरी, बॉडी टैग को अपडेट नहीं कर देती. ऐसा तब होता है, जब पेज का कॉन्टेंट रेंडर होने के लिए तैयार हो जाता है. एएमपी ऐसा इसलिए करता है, ताकि पेज का ऐसा कॉन्टेंट न दिखे जिसे अब तक स्टाइल नहीं किया गया है. इससे यह पक्का होता है कि उपयोगकर्ता को तुरंत नतीजे दिखें, क्योंकि पेज का कॉन्टेंट एक साथ दिखता है और फ़ोल्ड से ऊपर का पूरा कॉन्टेंट एक साथ रेंडर होता है. अगर ब्राउज़र में JavaScript बंद है, तो दूसरा टैग इस लॉजिक को पहले जैसा कर देता है.

amp-img टैग

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

AMP में एक वेब कॉम्पोनेंट होता है, जिसे खास तौर पर इमेज टैग को बदलने के लिए डिज़ाइन किया गया है. इसे amp-img कहा जाता है:

<amp-img src="mountains.jpg"></amp-img>

ऊपर दिए गए amp-img टैग को शामिल करें और पुष्टि करने वाले टूल को फिर से चलाएँ. आपको कई नई गड़बड़ियां दिखेंगी:

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

amp-img से दूसरी गड़बड़ी क्यों ट्रिगर हुई? ऐसा इसलिए है, क्योंकि amp-img, पारंपरिक एचटीएमएल img टैग का सीधा विकल्प नहीं है. amp-img का इस्तेमाल करते समय, कुछ और ज़रूरी शर्तें पूरी करनी होती हैं.

लेआउट सिस्टम

इस गड़बड़ी से पता चलता है कि amp-img, लेआउट टाइप ‘container' के साथ काम नहीं करता. एएमपी के डिज़ाइन का सबसे अहम सिद्धांत यह है कि इसके वेब पेजों को रेंडर करने के लिए, डीओएम रिफ़्लो की ज़रूरत कम से कम हो.

DOM रिफ़्लो को कम करने के लिए, AMP में एक लेआउट सिस्टम शामिल होता है. इससे यह पक्का किया जाता है कि पेज का लेआउट, पेज को डाउनलोड और रेंडर करने की प्रोसेस के दौरान जल्द से जल्द ज़्यादा से ज़्यादा स्थिर हो.

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

इस मामले में, लेआउट सिस्टम ने amp-img के लिए लेआउट टाइप का अनुमान लगाया है. यह container टाइप का है. हालांकि, कंटेनर टाइप उन एलिमेंट के लिए होता है जिनमें चिल्ड्रन एलिमेंट होते हैं. साथ ही, यह amp-img टैग के साथ काम नहीं करता. इसलिए, यह गड़बड़ी हुई है.

कंटेनर टाइप का अनुमान क्यों लगाया गया? क्योंकि हमने amp-img टैग के लिए ऊंचाई एट्रिब्यूट की वैल्यू नहीं दी है. एचटीएमएल में, किसी पेज पर मौजूद एलिमेंट के लिए चौड़ाई और ऊंचाई हमेशा तय करके, रिफ़्लो को कम किया जा सकता है. एएमपी में, amp-img एलिमेंट के लिए चौड़ाई और ऊंचाई तय करने का सुझाव दिया जाता है. इससे एएमपी को एलिमेंट के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को समझने में मदद मिलती है.

चौड़ाई और ऊंचाई को इस तरह सेट करें:

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

पेज को रीफ़्रेश करें और वैलिडेटर देखें. अब आपको कोई गड़बड़ी नहीं दिखेगी! हालांकि, इमेज पेज पर ठीक से नहीं दिख रही है. अगर हम इमेज को रिस्पॉन्सिव तरीके से स्ट्रेच कर सकें और स्क्रीन के साइज़ के हिसाब से पेज में फ़िट कर सकें, तो यह बहुत अच्छा होगा.

हैरानी की बात है कि चौड़ाई और ऊंचाई तय करने से, एलिमेंट का साइज़ पूरी तरह से तय नहीं होता. एएमपी लेआउट सिस्टम, एलिमेंट के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के हिसाब से, उसे अलग-अलग तरीकों से पोज़िशन और स्केल कर सकता है. लेआउट एट्रिब्यूट, एएमपी को यह बताता है कि आपको एलिमेंट को किस तरह से पोज़िशन और स्केल करना है.

लेआउट एट्रिब्यूट को responsive पर सेट करके, यह काम किया जा सकता है:

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

वाह! हमारी इमेज सही आसपेक्ट रेशियो में है और स्क्रीन की चौड़ाई के हिसाब से अपने-आप अडजस्ट हो जाती है.

हो गया!

अब आपका एएमपी दस्तावेज़ कुछ ऐसा दिखना चाहिए:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

पेज को रीफ़्रेश करें और कंसोल आउटपुट देखें. आपको यह मैसेज दिखेगा:

AMP validation successful.

अक्सर पूछे जाने वाले सवाल

6. कैननिकल यूआरएल, मेटाडेटा, और खोज

एएमपी से जुड़ी नई पहल के तहत, Google पर खोज के नतीजों के इंटरफ़ेस में मान्य एएमपी दस्तावेज़ों को हाइलाइट किया जाता है. ऐसा नए कैरसेल इंटरफ़ेस के तहत किया जाता है. इस इंटरफ़ेस से, वेब पर लेख खोजने वाले लोगों को बेहतर अनुभव मिलता है. इस सुविधा का सबसे ज़्यादा फ़ायदा पाने के लिए, शामिल किए गए पेजों को एएमपी की पुष्टि करने वाले टूल की जांच पास करने के अलावा, कुछ और शर्तें भी पूरी करनी होंगी.

इस चरण में, सभी ज़रूरी शर्तों के बारे में खास जानकारी दी गई है.

कैननिकल पेजों और एएमपी दस्तावेज़ों को लिंक करना

एएमपी का मकसद, वेब को ज़्यादा तेज़ बनाना है. इस प्रोजेक्ट की शुरुआत में, स्टैटिक कॉन्टेंट पर ज़्यादा फ़ोकस किया गया था. हालांकि, amp-bind जैसे कॉम्पोनेंट जोड़ने से, यह कई तरह की साइटों के लिए सही विकल्प बन गया है. जैसे, समाचार पब्लिशर, ई-कॉमर्स, यात्रा से जुड़ी वेबसाइटें, ब्लॉग वगैरह.

हालांकि, यह समझना ज़रूरी है कि वेबसाइट के स्ट्रक्चर में एएमपी को किस तरह से शामिल किया जाना चाहिए. हालांकि, एएमपी का इस्तेमाल पूरी वेबसाइट बनाने के लिए किया जा सकता है, लेकिन कई पब्लिशर इसे पेयर किए गए अप्रोच के साथ इस्तेमाल करना पसंद करते हैं. इसमें एएमपी दस्तावेज़, सामान्य एचटीएमएल लेखों के साथ जनरेट किए जाते हैं. इन लेखों को पब्लिशर अपनी वेबसाइट पर होस्ट करता है.

सामान्य एचटीएमएल पेजों में कैननिकल लिंकिंग, यह तय करने का एक सामान्य तरीका है कि जब कई पेजों में एक जैसा कॉन्टेंट शामिल हो, तो किस पेज को पसंदीदा पेज माना जाना चाहिए. एएमपी दस्तावेज़, किसी वेबसाइट के पारंपरिक लेख वाले पेजों के साथ उपलब्ध कराए जा सकते हैं. इसलिए, हमें पारंपरिक एचटीएमएल पेजों को "कैननिकल" पेज के तौर पर मानना चाहिए.

हमने अपने एएमपी दस्तावेज़ में, कैननिकल पेज पर वापस जाने के लिए <head> में एक लिंक टैग शामिल करके, इस लक्ष्य को हासिल करने के लिए पहला कदम पहले ही उठा लिया है:

<link rel="canonical" href="/article.html">

अगले चरण में, कैननिकल लेख को एएमपी पेज से लिंक करें. इसके लिए, कैननिकल लेख के <head> सेक्शन में <link rel="amphtml"> टैग शामिल किया जाता है.

article.html फ़ाइल के <head> सेक्शन में यह कोड जोड़ें:

<link rel="amphtml" href="/article.amp.html">

इस डायग्राम में, लिंक टैग की दिशाएं दिखाई गई हैं:

इस दोतरफ़ा लिंक को सेट अप करना ज़रूरी है, ताकि Google Search का क्रॉलर, हमारे सामान्य एचटीएमएल कैननिकल दस्तावेज़ और एएमपी दस्तावेज़ के बीच के संबंध को समझ सके. अगर कोई लिंक नहीं दिया गया है, तो क्रॉलर को यह पता नहीं चलेगा कि कौनसे लेख, सामान्य एचटीएमएल दस्तावेज़ों के "एएमपी वर्शन" हैं. इन लिंक को साफ़ तौर पर उपलब्ध कराकर, हम यह पक्का करते हैं कि कोई भी भ्रम न हो!

Schema.org सर्च इंजन का मेटाडेटा

एएमपी दस्तावेज़ों को नए कैरसेल इंटरफ़ेस में दिखाने के लिए, यह भी ज़रूरी है कि वे Schema.org के सर्च इंजन मेटाडेटा स्पेसिफ़िकेशन का पालन करते हों. यह मेटाडेटा, आपके दस्तावेज़ों के <head> टैग में शामिल किया जाता है. इसके लिए, application/ld+json टाइप के स्क्रिप्ट टैग का इस्तेमाल किया जाता है.

अपने एएमपी दस्तावेज़ के <head> सेक्शन के सबसे नीचे, यह कोड जोड़ें:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

ब्राउज़र में पेज को फिर से लोड करें और पक्का करें कि एएमपी की पुष्टि करने से जुड़ी कोई गड़बड़ी न हुई हो.

अब नई ब्राउज़र विंडो में, स्ट्रक्चर्ड डेटा की पुष्टि करने वाला टूल खोलें और "मेरे मार्कअप की जांच करें" पर क्लिक करें. इसके बाद, "कोड स्निपेट" टैब चुनें. अपने AMP पेज से पूरा सोर्स कोड कॉपी करें और उसे पुष्टि करने वाले टूल के टेक्स्ट एडिटर पैनल में चिपकाएं. इसके बाद, "जांच चलाएं" पर क्लिक करें:

आपको पेज पर कुछ ऐसा दिखेगा:

एएमपी की सुविधा वाले खबरों के लेखों के लिए, Google Search के नए कैरसेल में दिखने से जुड़ी मुख्य ज़रूरी शर्तें यहां दी गई हैं:

पक्का करें कि आपका एएमपी दस्तावेज़ मान्य हो.
<link> टैग का इस्तेमाल करके, अपने पारंपरिक एचटीएमएल पेज से एएमपी दस्तावेज़ को रेफ़रंस करें. इसके उलट भी किया जा सकता है.
ऊपर दिए गए Search Engine Metadata टैग को शामिल करें.

पेज डिस्कवरी के बारे में ज़्यादा जानें.

7. बधाई हो!

आपने कोड लैब पूरा कर लिया है. साथ ही, आपने एएमपी दस्तावेज़ों के कई बुनियादी सिद्धांतों के बारे में जान लिया है.

हमें उम्मीद है कि अब आपको यह समझ आ गया होगा कि इन कॉन्सेप्ट और सुविधाओं को एएमपी दस्तावेज़ में कैसे लागू किया जा सकता है. साथ ही, आपको यह भी समझ आ गया होगा कि एएमपी को इस तरह से क्यों डिज़ाइन किया गया है.

यहां कुछ और विषय और लिंक दिए गए हैं. इनसे आपको अपनी स्किल को बेहतर बनाने में मदद मिल सकती है!