Setup Accelerated Mobile Pages(AMP) in blogger

04:21
Hey there!

 If you are a blogger, you would probably want to boost SEO of your blog.
Obviously,you might have tried hell a lot of SEO tricks.
Accelerated-Mobile-Pages


 You might heard about Accelerated Mobile Pages and wondering if there is a way to implement AMP in blogger.

 Well! It is easy to implement AMP in blogger. I will walk you through step by step process to impement AMP in your blogspot.

 Understanding Accelerated Mobile Pages?

 Accelerated Mobile Pages is an Open Source Project by google that provides an awesome way to speed-up your blog loading speed and let your web pages crawl on the internet.

 Accelerated Mobile Pages are typically web pages which can be easily controlled by you.
These is no big difference between AMP pages and Normal pages except few code changes in background which you would probably can't find that difference.

Core Components in AMP pages:

  • AMP HTML 
AMP HTML is a HTML which has some restrictions for speed performance of the webpages.
  • AMP CACHE
AMP CACHE used to chache AMP HTML Pages.
  • AMP JAVASCRIPT
It is a javascript library which is helpfull in rendering AMP HTML Pages.

Steps to implement AMP in Blogger

1.Create AMP HTML

  1. Goto blogger.com and sign-in
  2. Navigate to theme from dashboard and select Edit Template
  3. In the template code search for < html>  tag by pressing cntrl+F
  4. Now add amp='amp' in the html tag. Now it look like <html amp='amp'>

2.Adding Charset and Viewport Meta Tags

Search for the charset and meta tags and add the following.If in case those tags not found then create them.

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

3.Adding Conanical Tags

Copy and paste the following conanical tag and paste right after viewport tag

 < link expr:href=’data:blog.url’ rel=’canonical’ />

4.Setup AMP CDN

Copy and paste the following javascript code right above the < /head> tag

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


5.Changing img tags

Now replace all the < img> tags with < amp-img>also add </ amp-img> end tag


Thats it! you are done setting-up AMP pages in your blogspot

NOTE:
This is only a initial step of creating AMP Pages.There are more configuarations to be done to convert your template into a complete AMP HTML Page.

I will be posting rest of the configuarations gradually.

If you have any doubt, Please reach us through the contact section.We will try to help you out.

If you like the post please consider subscribing

Post a Comment

1 Comments

  1. sivaJune 28, 2020 7:37 pm

    Valuable content. Thanks. Anyone read world best personal finance book visit here https://amazoffersales.blogspot.com/2020/06/rich-dad-poor-dad-no1-international-top.html

    ReplyDelete

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)