How To Use AMP Blogger Blogspot Step-by-Step Installation Guide

AMP for Blogger Step-by-Step Implementation:

Use Amp on blogger



For Blogger in 2022, you can add AMP to your blog by changing the HTML Template of your blogger theme. This will make your blog faster for people who use their phones. Isn't it easy? There's no need for an expert to help. You can do it on your own.

Is that true? More than 49% of live visitors expect a web page to load in less than 2 seconds. Core Web Vitals (CWV) focuses on three things that make users happy:

  • Loading is measured by the Largest Paintable Area (LCP),
  • Measured by First Input Delay (FID) and Second Input Delay (SID).
  • Cumulative Layout Shifts are a way to measure how stable a picture looks (CLS).

AMP (Accelerated Mobile Pages) is a type of web page that looks good, loads quickly, and makes money online. It makes sure your website is fast, user-friendly, and profitable.

All website owners want more and more organic traffic, and most people search for things on their phones when they do it. That's why your blog must work well on phones.

Accordingly, you should use a responsive theme for your blog. Now, the default themes on Blogger are responsive. This is good news! But, Google prefers the AMP version of a site rather than a theme for mobile users.

So, you need to change your mobile blogger theme, which is HTML, to AMP, which is better for people who use phones. In other words, the URL for your blogger page is

https://www.Linkstricks.com/?m=1. It should work in the AMP version, as well.


How to use AMP for the Blogger Blog:

AMP Validator: First, check to make sure that your blog is already set up for AMP.

This means your blog already has an AMP version. However, if the validation status is not true, then follow this tutorial guide to make your blogger theme AMP.


Error messages may show up on your blog if you are using one of the default themes for blogger (like Contempo Light, Soho, Emporio, and Notable).

  • The mandatory attribute "⚡" is missing in the tag "HTML".
  • The mandatory attribute "amp-custom" is missing in the tag "style amp-custom".
  • Custom JavaScript is not allowed.
  • The tag "form" requires including the "amp-form" extension JavaScript.
  • The attribute "onclick" may not appear in tag "a".
  • The attribute "name" may not appear in the tag "footer".
  • The attribute "name" may not appear in the tag "div".
  • Custom JavaScript is not allowed.
  • The mandatory tag "meta charset=utf-8" is missing or incorrect.
  • The mandatory tag "noscript enclosure for boilerplate" is missing or incorrect.
  • The mandatory tag "head > style[amp-boilerplate]" is missing or incorrect.
  • The mandatory tag "noscript > style[amp-boilerplate]" is missing or incorrect.
  • The mandatory tag "amp HTML engine script" is missing or incorrect.

The minimum AMP HTML codes:

This is the minimum valid HTML codes for AMP web pages:

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="www.yourwebsite.com/self.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello, Linkstricks Readers.</body>
</html>

The HTML code above must be in your blogger blog theme in order for your pages, posts, widgets and comments to be valid AMP blogger pages. 

Before you do anything else, you should start by going to the template editor. If you want to change the HTML in your theme, click "Theme ⇒ Edit HTML" and then follow these steps. The blog will run faster than ever if you use AMP.

Step-1 (Change HTML):

The tag "HTML" does not have the required attribute "⚡" This can be fixed by adding the "amp" tag attribute to the tag. Use this code instead of HTML to make your blog AMP-friendly: 

<html amp='amp'>

There is a piece of code above that will change both your mobile and desktop blogger theme to an AMP-based theme. You can also use this code if you don't want to change your desktop theme to AMP. It goes right before or above the <head> tag. 

<b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/>

The above code only changes your mobile (m=1) theme to AMP HTML because I added the condition for a mobile-only theme to the code.

Step-2 (Change Charset and Viewport):

In your blog template editor, look for the charset and viewport meta tags. In this case its not present, copy and paste the 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 easier to find by adding a canonical tag. Now, Google looks at the AMP version of a website to see how well it ranks for SEO. Check to see if the canonical link tags have been added to the links.

The canonical link should be added if there is not already one. If there is not one, it will point back to itself. It was changed in step-2 for blogger amp. Copy and paste this code after the viewport tag, which was changed above in step 2. 

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

Note that if you are using the default blogger theme then there is no need to add the above canonical rel-tag.

Step-4 (Change HEAD):

After that, look for and replace the </head> code with the following code. This will make your blog more 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):

Most of the time, we use the <img> tag to show an image on the web page. In AMP, you have to use amp-img instead of just img. So, change the img tags into amp-img tags like this: 

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

How to check AMP pages validity?

Method 1: 
In Chrome, open your AMP page, for example, https://example.blogspot.in/p/amp-page.html, and then click on the link.

When you go to the URL, add "#development=1," like this: 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: 
Go to validator.ampproject.org and click on the web interface.

Enter the URL in the URL field, for example, https://example.blogspot.in/p/amp-page.html, or click the button to the right. 

Visit More!

Keep Visiting SameReview for Latest Review News Tech Updates, Must Like, Share Comment on our FB page, Share your views in comments below.
Tags

You may like these posts

Show more