What is AMP

Accelerated Mobile Pages (AMP): let publishers create web pages that load instantly on mobile devices, as if they were a part of the app. AMPs are hosted by Google servers and are shared on Google Search, Google News, and other Google properties.

When you click an AMP link from a mobile phone or desktop Search result, your browser loads the AMP page instantly. If you’re using an Android device, all you have to do is tap the “AMP” button on your browser to go directly to the AMP page.

Google’s aim is to create a standard for a faster web, and it isn’t the only one. In November, Facebook announced its own solution for creating fast mobile pages: Instant Articles. AMPs are also supported by Twitter, Pinterest, WordPress and Yandex, as well as several ad networks and publishers

Importance for SEO

Accelerated Mobile Pages used to benefit from an eye-catching display in Google's mobile search results. Articles were displayed on mobile devices in a carousel above other search results. This is supposed to change with Google's page experience update, launching in June 2021.

AMP also reduce bounce rates, because, with AMP technology, content is loaded in fractions of a second, significantly reducing users’ frustration due to waiting times and thereby keeping visitors on your site. This increases the time spent on your site, which correlates directly with a higher ranking in Google's search results.

 

Who are AMPs suitable for?

In the test phase, news publishers such as Washington Post and other magazines with text-based content, in particular, were able to benefit from the prominent display on Google. Since AMP is an open source project, however, new features are constantly being added, so that large online shops are now testing AMPs and the benefits are gradually becoming interesting for all types of web content.

Disadvantages and criticism

A possible disadvantage is the comparatively difficult implementation of AMP. While Google offers solid resources and tutorials, that doesn't mean they're easy to implement. AMP also has limited support for Google Analytics. While basic metrics such as visitors and engagement can be captured, there are few ways to optimize user experience.

Another drawback is that there are limitations to designing your website in terms of functionality. For example, AMP pages can’t display email pop-ups and opt-in forms, sidebar widgets, strategically placed social share buttons, and much more. This could result in losing email subscribers and leads.

Last but not least, using a Content Delivery Network creates a certain dependency because AMP pages are usually loaded via Google's cache server. Since nobody but Google itself can control these servers, this leads to a dependency that can be detrimental in the long run.

In addition, Google's solution can also cause data protection problems, as the search engine provider gets access to users' connection data.

Another concern is that false reports could benefit from AMP. AMP-compliant websites have Google in the URL which makes them look credible, regardless of the actual content.

Source: https://www.seobility.net/en/wiki/AMP_(Accelerated_Mobile_Pages)


Guide to Add / Setup Google AMP in Blogger Site

1.   Login to your Blogger Blog.

2.   Navigate to Design and Click on Edit Template.

3.   Modify the existing tags to sync with AMP formatted tags. 

4.   Replace the Existing code with modified code.

5.   Save the template.

6.   Your AMP is configured in Blogger now. You can validate your website.

Modified Code to Add / Setup AMP in Blogger/Blogspot.

Replace the below codes sample and you will be ready with AMP in Blogger. This is free. Note to backup your blog before you proceed.

Step 1. Create AMP HTML

Backup your Blogger Template to be safe in case of problems. Now Go to your Blogger Dashboard -> Template -> Edit Template.

Replace <html> code with the following code:

<html amp=’amp’> 


Step 2:Add Charset and Viewport Meta Tags:

Search and Check for the charset and viewport meta tags. If it is not present, copy and paste the following code after <head> tag:

Charset tag:

<meta charset=”utf-8″>

Viewport Meta tag:

<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

Step 3: Add Canonical Tags:

Make your blog discoverable using canonical tag. Check for the canonical link tags. If it is not present, add the canonical link like this <link rel=”canonical” href=”http://example.blogspot.in/article-metadata.html” /> which will simply point to itself.

Copy and paste the following code after the viewport tag:

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


Step 4:Setup AMP CDN:

Paste this code just above the </head> tag:

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


Step 5: Setup AMP Image:

Change the image tags <img> into amp-image tags like the following example code:

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

Validating Google AMP in Blogger

To Validate your Google AMP Pages in Blogger, you can visit the official website of Google AMP. IF there is any error, the validator will throw the error.

Click Here to validate Blogger / Google Blogspot AMP pages

Conclusion: Hope you liked this guide on How to Add / Setup Google AMP in Blogger site and learn how to create lightning fast pages with AMP. In case if you want any help, feel free to contact me any time!