Aaj main aap ko AMP install karne ka aasan tarika batane ja raha hu. BlogSpot par AMP (accelerated mobile pages) install karne me only 5 minutes lagte hai. Agar WordPress ki baat ki jaye to us me AMP plugin install karke AMP pages create kar sakte hai. Lekin BlogSpot me already install kiye gaye template codes ko replace karke, Google AMP create kiya jata hai. Non AMP template codes ko <head> section se lekar </body> section tak replace kar ke AMP template me upgrade kar sakte hai. Yeh sabse surakshit aur aasan tarika hai.
Dosto, Google AMP (accelerated mobile pages) install karne ke liye maine is post me kuch steps mention kiye hai. Steps follow karne ke baad, aap ka Blogger template AMP me convert ho jaye ga. To aaie non AMP template ko AMP theme me upgrade karna sikhe.
Blogger Par Google AMP Install Kaise Kare
- Sabse pehle apne blogger account me login karke “Edit theme” par click kare
- Theme editor open hone ke baad, neeche diya gaya code search karke remove kare
- Ab next step me <head> tag ke upar diye gaye codes search kare
- Is code ko delete karke निम्नलिखित codes add kare
- Is ke baad <head> tag ke neeche निम्नलिखित codes paste kare
- Dosto, code add karne ke baad </head> tag search kare. Aur ise निम्नलिखित codes se replace kare
- Ab apne template me ampproject.org elements install karne ke liye </head><!–<head> ke upar निम्लिखित codes paste kare
- Ab agle step par </body> tag ko </body>–></body> se replace kare
- Finally, template ke End par </html> ko capitalized </HTML> se replace karke “Save” par click kare
<b:include data='blog' name='all-head-content'/>
Yeh code blogger template me Google jQuery link automatically add kar deta hai. Is ke alawa, is code se rel=”canonical” link bhi automatically add ho jata hai. Yaad rahe ki ye code remove karne ke baad apne blogger template me meta description, meta charset, aur meta viewport manually add kare. Code remove hone se settings me add kiya gaya meta description template (view source code) me dikhai nahi de ga. Is liye meta charset, aur meta viewport ke alawa, meta description theme me manually add kare.
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
<HTML amp='amp' lang='en'>
<meta charset='utf-8'/> <meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/> <link expr:href='data:blog.url' rel='canonical'/>
</head><!–<head> </head>
<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> <script async='async' custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'></script> <script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'></script> <script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'></script> <script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script> <script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'></script> <script async='async' custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'></script> <script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'></script> <script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Congratulations, aapka non AMP template AMP me upgrade ho gaya. Agar aap AMP validator se apne blog ka test karenge to waha “Not AMP Supported” show hoga. Pata hai kyon? Kyon ki template ka har ek element AMP me upgrade karna padta hai. Ab upgrade karne ko kya reh gaya hai? Hmm! Sahi guess kiya. Agar aapne already posts likhe hai to aise posts me non AMP images ko AMP ready banaye. Images ko AMP ready banane ke liye post editor me HTML mode select kare. Is ke baad, img attribute ko amp-img se replace kare.
Example of Non AMP and AMP Ready Image
Non AMP Image:
<img alt='alt-text-goes-here' height='320' src='image-url-here' width='630'></img>
AMP Ready Image:
<amp-img alt='alt-text-goes-here' height='320' layout='responsive' src='image-url-here' width='630'></amp-img>
Apne template editor me ja kar sidebar images, logo, Advertisement images, aur अन्य images ka attribute amp-img se replace kare. Is ke baad template CSS me img search karke amp-img se replace kare. Aisa karne se AMP images me non AMP images ki tarah sahi layout add ho jayega.
Yadi aap ne theme me custom jQuery, CSS ya JavaScript already add kiya hai to use template layout ke according customize kare. Taki template layout disturb na ho. Yeh sab steps follow karne ke baad, AMP validator par jaker AMP test kare.
Blog posts reindex hone ke baad, aap ka blog traffic badh jayega. Aur “Google search results” me post URL ke aage AMP icon show hoga. AMP pages bahut tezi se mobile aur slow internet connect par load hote hai. Kyon ki in me woh codes nahi hote hai jo pages ko slow kar dete hai.
AMP Friendly Posts Create Kaise Kare
AMP friendly post create karne ke liye post editor me ja kar HTML mode select kare. HTML mode me neeche diye gaye format ke according post create kare.
<p data-amp-style="text-align: left;"> Post body goes here
<h2>Heading 2</h2>
<p>Type your Heading 2 Text here.</p><h3>Heading 3</h3>
<p>Type your Heading 3 Text here.</p><h4>Heading 4</h4>
<p>Type your Heading 4 Text here</p></p>
<noscript><img alt='image alt text here' src='#IMAGE_URL_HERE'/></noscript>
AMP Adsense Link Ad Format
Non AMP theme ko AMP theme me convert karne ke baad aap ka blog AdSense vigyapan dikhana band kar dega. Is ke liye AdSense codes ko neeche diye gaye format ke according customize kare. Customize karne ke baad, AdSense Ads aap ke blog par show karenge.
<amp-ad
data-ad-client='ca-pub-xxxxxxxxxxxxxxxx'
data-ad-slot='xxxxxxxxxx'
height='90'
type='adsense' width='200'>
</amp-ad>
To Friends, dekha ki non AMP theme ko AMP theme me upgrade karna kitna aasan hai? धीरे-धीरे aap ke blog par mobile organic traffic increase hota jayega. Non AMP pages ke tulana me, AMP pages ki ranking Google par achi hoti hai.
