क्या आपके Website की Loading Time 4 सेकेंड्स से भी ज्यादा है ? क्या Slow Loading Issue की वजह से आपकी site गूगल पर अच्छे से रैंक नहीं के पा रहा है ? क्या आप अपने Website के Loading Time को घटाना चाहते हैं ? अगर इन सभी प्रश्नों का उत्तर हां है तो आप सही जगह पर हैं । हम आपको बताएंगे कि AMP क्या होता है और इसे आप अपने WordPress/Blogspot वेबसाइट में कैसे Enable कर सकते हैं ।
AMP क्या है ?
AMP का full Form है Accelerated Mobile Pages । यह Google और Twitter के Collaboration के साथ बनाया गया था जिसका काम Websites / Blogs के CSS और HTML को Simplify करना है । जिस वजह से Websites की मोबाइल और लैपटॉप पर Loading Time घट जाती है ।
- इसकी मदद से आप अपने Website को Lightweight और वेबसाइट में बदल सकते हैं । अगर आप Search Console का उपयोग करते हैं तो AMP का एक अलग Column आपको बना हुआ जरूर दिखाई दिया होगा । जिसमें आप अपने AMP से रिलेटेड Issues को फिक्स कर सकते हैं । अब आप समझ गए होंगे कि AMP ना सिर्फ आपके Page Speed को बढ़ाने के लिए है बल्कि SEO के लिए भी यह बहुत जरूरी है ।
आपको अपने वेबसाइट के लिए AMP की जरूरत क्यों है ?
यह प्रश्न लगभग सभी के मन में उठता है कि ” मुझे अपने वेबसाइट के लिए AMP की जरूरत क्यों है ? ” जवाब है :
- यह आपके Website पर आने वाले Organic Search Traffic को डायरेक्ट इफेक्ट करता है और ट्रैफिक Volume को बढ़ाता है ।
- आपके वेबसाइट को Google के AMP Carousels और Search Results में फीचर होने का मौका देता है ।
- आपके वेबसाइट की लोडिंग टाइम को कम करता है और Loading Speed को बढ़ाने का काम करता है । इसके लिए AMP आपके वेबसाइट कर CDN Caching , Debugging , Preloading इत्यादि जैसे जरूरी चीजों को Adjust करता है और आपके Website को LightSpeed देता है ।
- यूजर्स के Mobile Web Browsing के एक्सपीरिएंस को बेहतर बनाता है । जिसकी वजह से आपके वेबसाइट पर ज्यादा से ज्यादा Clicks आते है और साथ ही आपका Business भी Grow करता है ।
WordPress के Site में Accelerated Mobile Pages कैसे Enable करें ?
अगर आपका वेबसाइट WordPress प्लेटफॉर्म पर बना है तो आप मात्र plugin के install करने से , अपने Website पर AMP को Enable कर सकते हैं । इसके लिए :
- सबसे पहले Plugins सेक्शन में जाएं औ सर्च बॉक्स में AMP को ढूंढे ।
- AMP को Install करें और Activate कर लें ।
- इसके बाद अपने वेबसाइट पर जाएं और देखें कि AMP काम कर रहा है या नहीं ।
अपने Website के लिए AMP Enable करने से पहले यह ध्यान रखें कि एक बार AMP Enable हो गया तो आपके Website के कई Plugins अपने आप बंद हो जाएंगे , काम नहीं करेंगे । इसके साथ ही AMP अभी सही से Google Ads भी नहीं Show करता है जिसकी वजह से आपको Online Earning में समस्या आ सकती है । इन सभी बातों को ध्यान में रखकर ही आपको अपने वेबसाइट पर Accelerated Mobile Pages Enable करने के बारे में सोचना चाहिए ।
Blogspot में AMP कैसे Enable करें ?
WordPress की तरह Blogspot में AMP आसानी से Enable नहीं किया जा सकता क्योंकि Blogspot फिलहाल Direct Plugins सपोर्ट नहीं करता है । इसके लिए आपको Coding की जरूरत पड़ती है । अगर आप थोड़ा बहुत Coding भी जानते हैं तो आप आसानी किसी भी plugin ( Blogger Compatible ) को आसानी से अपने वेबसाइट में लगा सकते हैं । खैर , चलिए हम आपको बताते हैं कि आप अपने Blogger के Website में Accelerated Mobile Pages कैसे Enable कर सकते हैं :
- अपने Blogger में Login करें और अपने Blogger के Dashboard पर जाएं ।
- Dashboard में Template पर क्लिक करें । इसके बाद सबसे पहले आप अपने वेबसाइट के Already Installed Template का बैकअप जरूर ले लें ताकि आपका Data Safe रहे ।
- Backup के बाद Edit Template पर क्लिक करें । जैसे ही आप इस पर क्लिक करेंगे , आपको आपके Website का पूरा डाटा HTML Codings में मिल जाएगा । इसके बाद आप <html> को Remove करके उसके जगह पर <html amp=’amp’> को Paste करें ।
इसके बाद आपको अपने Template में Charset और viewport meta tags को Search करना चाहिए क्योंकि AMP को आपके वेबसाइट में Add करने के लिए यह बहुत जरूरी है । Charset और Viewport Meta Tags पहले से ही मौजूद हैं तो
<meta charset=”utf-8″><meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
ऊपर दिए गए Code से उसको मिला कर देखें कि दोनों Perfect Match है कि नहीं । अगर यह पहले से ही मौजूद नहीं है तो आपको <head> tag के तुरंत बाद इसे Copy-Paste करना चाहिए ।
- ऊपर के Step को पूरा करने के बाद आपको अपने HTML में Canonical Tags को जोड़ना चाहिए जिससे कि आपका Blog इंटरनेट पर ढूंढा जा सके और Search Engines को आपके Website को इंडेक्स करने में आसानी रहे । इसके लिए Search Bar की मदद से आप Url को ढूंढे । अगर यह मौजूद नहीं है तो आपको नीचे दिया गया Code Copy Paste कर देना चाहिए । इसमें आप EXAMPLE की जगह अपने URL का नाम डालें ।
<link rel=”canonical” href=”http://example.blogspot.in/article-metadata.html” />
- ऊपर के Step को Complete करने के बाद आपको नीचे दिए गए Code को Viewport tag के बाद Copy-Paste करना है
<link expr:href=’data:blog.url’ rel=’canonical’/>
- इसके उपरांत आपको Accelerated Mobile Pages के लिए CDN को अपने ब्लॉग में Setup करना है जिसके लिए नीचे दिया गया code आपको </head> के तुरंत पहले Paste करना है
<style amp-boilerplate=’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=’amp-boilerplate’>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><script async=’async’ src=’https://cdn.ampproject.org/v0.js’></script>
- सबसे आखिरी Step है अपने ब्लॉग के लिए Accelerated Mobile Pages का Image सेटअप करना । इसके लिए आपको Search Bar की मदद से Img tag को ढूंढ कर Remove करके नीचे दिए हुए Code को उस जगह पर Paste करना है ।
<amp-img src=”AmpImage.jpg” alt=”amp-img” height=”500″ width=”500″></amp-img>
अगर आपने ऊपर दिए गए सारे Steps को सही ढंग से Complete कर चुके हैं तो बधाई हो ! आप के वेबसाइट पर अब Accelerated Mobile Pages enable हो चुकी है । अब अपने वेबसाइट के Lightspeed का मजा लीजिए ।
- अपने वेबसाइट की A M P Validation चेक करने के लिए आप https://validator.ampproject.org/ पर जा सकते हैं । अगर आपके वेबसाइट पर AMP को Setup करने में कोई समस्या है तो यह वेबसाइट उस समस्या के बारे में और उसे कैसे Fix करें बताएगा ।
अगली पोस्ट में हम आपको बताएंगे कि ऐसे कौन कौन से Themes और Plugins हैं जो AMP Supported हैं और इन्हें AMP के लिए Setup करने में बिल्कुल भी मेहनत नहीं लगती । अगर आप जानना चाहते हैं कि से Themes और Plugins कौन कौन से हैं तो अभी Listrovert को Subscribe करें और Notification को Allow करें ताकि जैसे हम आगे पोस्ट करे , आपके Notification Tab और Inbox में पोस्ट सबसे पहले पहुंचे ।
AMP से जुड़ी किसी भी समस्या के समाधान के लिए नीचे Comment करें , हम अवश्य आपकी समस्या को हल करने की कोशिश करेंगे ।
