AMP for Blogger Step-by-Step Implementation Guide

Find a step-by-step guide on how to implement AMP on Blogger to create mobile-friendly SEO content. Accelerated Mobile Pages makes blog faster than ever. AMP for Blogger

Now, you may implement AMP (Accelerated Mobile Pages) to your blogger blog with simple change in your HTML template. It’s very easy and there is no need for any expert. You can do it yourself.

How to implement AMP for Blogger Blog

First of all go to the template editor. Theme Edit HTML and then follow these step-by-step implementation guide. If you implement AMP for your blog, your blog will run faster than ever.

Step-1 (Change HTML):

 

To make your blog AMP friendly, find and replace <html> code with the following code:

<html amp='amp'>

Step-2 (Change Charset and Viewport):

Check for the for the charset and viewport meta tags in your blog template editor. 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 (Canonical link):

Make your blog discoverable using canonical tag. Now, Google uses AMP version of webpage as a signal for SEO ranking. Check for the for the canonical link tags. If not present, add the canonical link like the following which will simply point to itself.

<link rel="canonical" href="https://www.aubsp.com/article-metadata.html" />

Copy and paste the following code after the viewport tag as updated above in step-2 for blogger amp.
<link expr:href='data:blog.url' rel='canonical'/>

Step-4 (Change HEAD):

Thereafter, find and replace </head> code with the following code and make your blog mobile friendly by AMP:

<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-anim
ation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
</head>

Step-5 (Change Image Tag):

Normally, we use <img> tag for image but in AMP you have to use amp-img instead of only img. Therefore, 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>

How to check AMP pages validity?

Method-1:
Open your AMP page in Chrome browser, for example –
https://example.blogspot.in/p/amp-page.html

Append “#development=1” to the URL, for example –
https://example.blogspot.in/p/amp-page.html#development=1.

Right click and open the Chrome DevTools console and check for validation errors.

Method-2:
Open the web interface at validator.ampproject.org.

Enter the url value to the URL field, for example –
https://example.blogspot.in/p/amp-page.html

Any changes to the html source made in this interactive editor result in interactive revalidation.

Shortlink: https://www.superwebtricks.com/?p=1207 Free Technical Help
If you don't want to miss our daily tutorials then you may Subscribe to Showeblogin via Email | Facebook | Twitter | and Google Plus

Leave a Reply

Be the First to Comment!

Notify of
200
Home»Blogging»Blogger Blog»Blogger Templates»AMP for Blogger Step-by-Step Implementation Guide
Top