Google AMP for Blogger Step-by-Step full Guide

google AMP for Blogger Step-by-Step full Guide

Now, chances are you’ll implement (Accelerated Cell Pages) AMP for blogger weblog with an easy change in your HTML template. It’s very straightforward and there’s no want for any skilled. You are able to do it your self.

Find out how to implement Accelerated Mobile Pages for Blogger Weblog

Initially go to the template editor. Theme⇒ Edit HTML after which to observe this step-by-step implementation information. In case you implement AMP for the blog, your weblog will run sooner than ever.

Also read this article:-Ahrefs cookies 2019 || Ahrefs free premium account cookies

Step-1 (Change HTML):

To make your weblog AMP pleasant, discover and exchange <html> code with the next code:

<html amp='amp'>

Step-2 (Change Charset and Viewport):

Examine for the for the charset and viewport meta tags in your weblog template editor. If not current, copy and paste the next code after <head>.

<meta charset="utf-8">

<meta identify="viewport" content material="width=device-width,minimum-scale=1,initial-scale=1">

Step-3 (Canonical hyperlink):

Make your weblog discoverable utilizing canonical tag. Now, Google makes use of AMP model of webpage as a sign for web optimization rating. Examine for the for the canonical hyperlink tags. If not current, add the canonical hyperlink like the next which can merely level to itself.

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

Also red this Article:-Corsair Keyboard

Copy and paste the following code after the viewport tag as updated above in step-2 AMP for the blogger
<
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 pleasant 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}@-moz-keyframes
-amp-start{from{visibility:hidden}to}@-ms-keyframes
-amp-start{from{visibility:hidden}to}@-o-keyframes
-amp-start{from{visibility:hidden}to}@keyframes
-amp-start{from{visibility:hidden}to}</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 next instance:

Also read This Article:-50 do-follow backlink

<amp-img src="AmpImage.jpg" alt="amp-img" top="500" width="500"></amp-img>

Find out how to examine AMP pages validity?

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

MOST READ THIS ARTICLE:-SEO

Append “#development=1” to the URL, for example –
https://example.blogspot.in/p/amp-page.html#development=1.Proper click on and open the Chrome DevTools console and examine 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 modifications to the html supply made on this interactive editor end in interactive revalidation.

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here