AMP for Blogger in 2024: You may implement AMP (Accelerated Mobile Pages) to your blogger blog (BlogSpot) with simple change in HTML Template of your blogger theme. It’s very easy and there is no need for any expert. You can do it yourself.
Professional Suggestion: I strongly recommend you to build a WordPress Website for your online business or services. Thereafter, you may install FREE AMP plugins.
Did you know? More than 49% of live visitors expect a web page to load within 2 seconds. Core Web Vitals (CWV) focuses on three aspects of the user experience:
- Loading measured by Largest Contentful Paint (LCP),
- Interactivity measured by First Input Delay (FID), and
- Visual stability measured by Cumulative Layout Shift (CLS).
Note that Interaction to Next Paint (INP) will replace First Input Delay (FID) as a Core Web Vitals metric starting in March 2024.
AMP (Accelerated Mobile Pages) is web pages that are compelling, smooth, and load near instantaneously to ensure your website is fast, user-first, and makes money online.
All website owners wants more and more organic traffics and mostly users search their queries using their smartphones. Thus, your blog must be mobile friendly.
Accordingly, you should use responsive blogger theme. Good news is that now blogger default themes are responsive. But, Google prefers AMP version of sites rather themes designed for mobile visitors.
So, you need to convert your mobile blogger theme i.e. HTML to AMP. In other words, your blogger page URL ending with https://SuperWebTricks.blogspot.com/?m=1 should load in AMP version.
How to implement AMP for Blogger Blog
AMP Validator: Before going to change your blogger HTML code to implement AMP for your blog, just check whether your blog has already supports AMP.
If AMP validation status is true then your blog is already support AMP version. However, if the validation status is false then follow this tutorial guide and convert your blogger theme into AMP.
If you are using default theme of blogger (Contempo Light, Soho, Emporio and Notable etc.), you may see the following errors messages:
- The mandatory attribute ‘⚡’ is missing in tag ‘html’.
- The mandatory attribute ‘amp-custom’ is missing in 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 tag ‘footer’.
- The attribute ‘name’ may not appear in 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 ‘amphtml engine script’ is missing or incorrect.
Minimum Required 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.superwebtricks.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, Showeblogin Readers.</body>
</html>That means, your blogger blog theme must include the above required HTML code for publishing valid AMP blogger pages, posts, widgets and comments.
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):
The mandatory attribute ‘⚡’ is missing in tag ‘html’. This error can be resolved by simply adding the 'amp' tag attribute to the tag. To make your blog AMP friendly, find and replace <html> code with the following code:
<html amp='amp'>The above code will change your both mobile as well as desktop blogger theme to AMP based theme. However, if you does not want to convert your desktop theme to AMP then use this code just before/above <head> tag.
<b:attr cond='data:blog.isMobileRequest == "true"' name='amp' value='amp'/>The above code only change your mobile (m=1) theme to AMP HTML as I have added the condition for mobile only theme.
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 which will simply point to itself. 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'/>Note that if you are using default blogger theme then there is no need to add the above canonical rel tag.
Step-4 (Change HEAD):
Thereafter, find and replace </head> code with the following code and make your blog mobile friendly by AMP:
<styleamp-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 normalboth;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><styleamp-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></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.