how to setup amp on blogspot blogger site

Now in these days blogging competition is grow continuously. All role in blogging is SEO. SEO depends on page speed of our blog. Google introduce AMP for bloggers. are you using blogspot? here is solution how setup amp on blogspot blogger blog.  You have many question about AMP lets read full tutorial i tell how amp works and what is benefits.

exoclick review after earn 1000$

popcash review how i earn 100$ 

What is amp:-

Amp means Accelerated Mobile Pages. It help to make faster mobile pages which help search ranking. Google introduced amp with aimed that publisher optimized their mobile webpage.

see examples of amp in search engine …

setup amp on blogspot blogger setup amp on blogger

 

Benefits of AMP:-

  • Load amp page 80%  faster then non-amp pages. It help improve search ranking.
  • Decrease bounce rate.
  • Best user experience when internet is slow.
  • Best advertising experience.

Why blogger not have amp?

AMP is google project and blogger is google blog service now google not not serve amp for blogger. So can you setup it? Follow these steps..

Setup amp on blogspot blogger how ?

Step 1

Replace <html> code by this

<html amp=’amp’>

Step 2

Set charset and view port meta tags. copy and paste 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 discover able using canonical tag. Check for the canonical link tags. If it is not present, add the canonical link like this <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’/>

Read also 

Step 4

Paste this code just before </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>

Step 5

Now change your img tag in amp tag follow this example:-

<amp-img src=”AmpImage.jpg” alt=”amp-img” height=”500″ width=”500″></amp-img>

final steps:-

How to check amp page validity?

first go to Amp validator  page.

enter your amp url example my blog amp url and click on validate.

if you not have any error it will not show you any errors.but if show errors then make changes.

here is some important links :-

https://www.ampproject.org/

https://googleblog.blogspot.co.uk/2015/10/introducing-accelerated-mobile-pages.html

Final words

amp is important for mobile pages.setup amp on blogspot blogger this is full guide. many people find pros and cons but when i implement on my blog my search engine traffic increase and get good rank in search result. Amp not support ads but it a simple to show ads on amp pages so don’t worry .

8 Comments

  1. Blanoid March 12, 2017
  2. Vikash Kumar March 20, 2017
  3. Razu April 16, 2017
    • pramod yadav April 16, 2017
  4. Kaustubh Patel April 30, 2017
  5. Ravi kumar July 21, 2017
  6. Mayank seth July 29, 2017
  7. Salman khan August 8, 2017

Leave a Reply

Get 50$ promo code of bluehost message me on whatsapp +91-7014489639
+ +
%d bloggers like this: