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
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
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
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,
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
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
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".
The mandatory tag "meta charset=utf-8" is missing or incorrect.
The mandatory tag "noscript enclosure for boilerplate" is missing or
The mandatory tag "head > style[amp-boilerplate]" is missing or
The mandatory tag "noscript > style[amp-boilerplate]" is missing or
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:
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
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:
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
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.
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