How To Do AMP In Blogspot Blogger | ব্লগস্পটে এএমপি করুন সহজেই ।

How to be AMP to your current blogspot/ blogger blog? Dont worry amraito.com is here to solution for your problem. Few days ago we share AMP in Wordpress & Search Engine Optimization for (2017-18).
In recent past 2016 google announced there new algorithm of search result [serps] quick action. The Accelerated Mobile Page (AMP) is most one of them. This is your key to success and stop bounce rate. Thats help you to find more visitor and google help you to be the number one page.  

https://qph.ec.quoracdn.net/main-qimg-1b9d83932d3ff9cc8511d94c09bac931

কিভাবে আপনার ব্লগার / ব্লগস্পট ব্লগে গুগল এর নতুন সার্চ এলগরিদম প্রোজেক্ট এএমপি চালু করবেন ? আমরাইতো ডট কম থাকতে কোন সমস্যাই নেই । গুগল তাদের নতুন ২০১৭ সালের এসইও টেকনিকে বিশেষ ভাবে উল্লেখ করেছে AMP এর কথা । তাই গুগল সার্চ রেজাল্ট এ টপে থাকতে হলে আপনাকে অবশ্যই AMP চালু করতে হবে বা সাপোর্টেড কোড / টেমপ্লেট / থিম প্রয়োগ করতে হবে ।
বেশ কিছুদিন আগে আমরা ওয়ার্ডপ্রেসে AMP কিভাবে চালু করার প্রসেস দেখিয়ে ছিলাম । 
 যা আপনাকে সাইটের বাউন্স রেট কমাতে সাহায্য করবে এবং ইউজারকে আরও দ্রুত আপনার সাইট বা ব্লগ ব্রাউজ করতে দেবে । এছাড়াও আপনি ফেসবুকের ফ্রি ব্যাসিকস সেবা তে সাইট সাবমিট করতেও এটি ব্যাবহার করতে পারেন । 

গুগলের মতে AMP সাপোর্টেড থিম বা টেমপ্লেট হচ্ছে সেটি যার সাইজ ১০০ কেবির বেশি নয় এবং জাভাস্ক্রিপ্ট থাকা যাবে না । কিন্তু ব্লগস্পট টেমপ্লেট গুলো হয় জাভাস্ক্রিপ্টে ছাড়া চলেইনা । তার উপর ১০০ কিলোবাইটের কম তো খুব কমই হয় । কিন্তু প্রোগ্রামার রা তো আর বসে নেই । তারা অবশ্যই কোনো না কোনো পন্থা বের করবেই । হ্যা ঠিক বের হয়েছেও । ইতিমধ্যেই তারা সমাধান করেছেন সমস্যা টি । কিন্তু গুগল AMP সাপোর্ট করে এমন টেমপ্লেটের দাম অনেক বেশি । কিন্তু আপনি চাইলে কিছু কোড ও সিএসএস যোগ করে সাপোর্ট করিয়ে নিতে পারেন । 

প্রথমেই আপনার বর্তমান টেমপ্লেট টি ব্যাকাপ নিয়ে নিন । যাতে আপনি কোডিং এ ভুল করলেও যেন পরে আবার ইনষ্টল করতে পারেন ।

http://www.bloggerhow.com/wp-content/uploads/blogger-template-backup.png

তারপর নিচের স্টেপ গুলো ফলো করুন । সমস্যা হলে কমেন্ট করুন ।  

Step 1:
Replace <html> code with the following code:

<html amp='amp'>
Step 2:
Check for the for the charset and viewport meta tags. If not present, copy and paste the following code after <head>.
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Step 3: 
Make your blog discoverable using canonical tag. Check for the for the canonical link tags. If not present, add the canonical link like <link rel="canonical" href="http://example.blogspot.in/article-metadata.html" /> which will simply point to itself. Copy and paste the following code after the viewport tag.
<link expr:href='data:blog.url' rel='canonical'/>

Step 4:
Replace </head> code with the following code:
<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>
</head>
Step 5:
Change the img tags into amp-img tags like the following example:
<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>
এই কোড গুলো যোগ করে আপনি আপনার বর্তমান টেমপ্লেট কে কাষ্টম AMP করে নিতে পারেন ।
তাছাড়া আপনারা চাইলে এই টেমপ্লেট টি আমাদের থেকে নিতে পারেন । 
এটি একটি ফুল AMP Blogger Blogspot টেমপ্লেট । যাতে অতিরিক্ত কোন কোড যোগ করার ঝামেলা নেই । এটি সরাসরি পাবলিকলি দেয়া গেলো না কপির ভয়ে অনেকেই এটি নিজের নামে চালিয়ে দেবেন তাই । এটি আমার সংগৃহীত । যার বর্তমান মুল্য ৫ ডলার বা ৪০০ টাকার মত ।  তাই কেউ চাইলে কমেন্ট করুন । ফ্রিতেই পাবেন ।

বিঃদ্রঃ আমাদের নতুন ফেসবুক কমেন্ট চালু হয়েছে ।

Now, I hope it will help you. Accelerated Mobile Pages is a Google-backed project and Blogspot/ Blogger is Google’s blogging platform but still Blogger doesn’t currently support AMP. So we can’t wait for them and we even don’t know when they will start supporting. So use our tricks and tweaks to add AMP support in blogger site. If you are facing any problem then comment below.

Previous Post
Next Post
নামহীন
১১:০০ PM

আমাকে টেমপ্লেট টি দিন প্লিজ ।

Reply
avatar
১১:৫১ PM

আমাদের সেন্ড অপশানে গিয়ে আপনার নাম ও ইমেইল দিয়ে পাঠান ।

Reply
avatar
১:১১ PM

your template is sended.

Reply
avatar