What Is AMP and How to Implement It

299

April 4, 2024

Slow page speed can result not only in users silently fuming at you, but it can also be a reason for conversion drops. That's why SEO reps and webmasters are so eager about improving this metric.

Wayback in 2015, Google announced the AMP project, which helps increase webpage loading manifold. Initially, SEOs and webmasters were bright-eyed and bushy-tailed about AMP, but nowadays, many are not that passionate about it, and some believe it can even hurt the website. In this blog post, I'll attempt to fathom out these vexing questions, cover the advantages and disadvantages of AMP, and explain how to implement it.

What is AMP?

AMP (Accelerated Mobile Pages) is an open-source project intended to help webpages load faster. This can be achieved by optimizing HTML tags and cutting back on the abundance of extra elements (banners, widgets, background images, etc.). Thus the AMP page contains only the basic information the user needs.

How does AMP work?

AMP sites consist of three key elements:

AMP HTML
AMP JavaScript
AMP Cache

Let's walk through each element separately.

AMP HTML

AMP HTML is an HTML file containing specific restrictions to ensure high page load speed. It removes or modifies particular elements and attributes that usually slow down web pages.

A simple HTML file can look like this: What is AMP and How to Implement it on Your Website

At the same time, AMP HTML documents must:

Start with <!doctype html> so they can send information to the browser about the document type it should expect;
Include a top-level <html ⚡> or <html amp> tag to indicate an AMP HTML page;
Include <head> and <body> tags to define the contents of a document (i.e., headings, images, paragraphs, hyperlinks, tables, etc.);
Include a <link rel="canonical" href="URL"> to detect the regular HTML page version or to link to itself if there's no regular page;
Include a <meta charset="utf-8"> tag to specify character encoding;
Include a <meta name="viewport" content="width=device-width"> tag to instruct the browser on handling the page's dimensions;
Include a <script async src="https://cdn.ampproject.org/v0.js"><script> tag to be able to add extensions to the base library;
Include the AMP boilerplate code (head > style[amp-boilerplate] and noscript > style[amp-boilerplate]) in the head tag.

AMP JavaScript

JavaScript can be tricky — too much JS can result in slow and unresponsive web pages.

However, AMP’s JavaScript library includes frameworks and components that let you create pages quickly without the need to write JS or import third-party libraries, all of which strongly impact the reader’s experience.

AMP Cache

The AMP cache is a proxy-based content delivery network that pre-fetches and pre-renders an AMP version of a page before a user requests it.

It enables your site to load several parts from different servers simultaneously, and users can load your site from the closest server. This means your website will be able to load extremely fast for more people.

The two main AMP cache providers include:

Google AMP Cache
Bing AMP Cache

These two services cache your pages as you use the AMP format. For instance, cache providers can detect your AMP page via the <html ⚡> or <html amp> tag and cache its content.

Alternatively, a publisher can manually add the page to the AMP cache, which only applies to Google's AMP Cache. Other platforms access cached AMP pages via their URLs.

Benefits and drawbacks of AMP pages

Benefits of AMP pages:

The most vivid benefit is fast-loading web pages, for sure. With fast-loading pages, the users can get information on the fly, and that's increases the chances that they will stay on the page longer.
Further reading: ‘How to Speed up Your Website with Netpeak Spider.’
Another benefit stems back to the first one: if the page is rendered fast and the content appears immediately, the user is more likely to stay longer to browse the website.
And it's free since AMP is an open-source platform.

Let's move forward to the drawbacks of this platform. Unfortunately, there a bunch of them, but we'll delve into the most significant ones:

Tracking problems. The effectiveness of AMP pages is hard to track over Analytics – the data is somewhat limited. It's time and effort-consuming to implement all tags and code elements that will help you track metrics.
For AMP content is cached by Google and kept on its own service, it assigns its domain name.
Since most of the extra elements on the AMP pages are cut-down, including ad banners, it may be a hazard to ad income.
Webmasters should keep an eye on the main website, AMP version, and the mobile version. After a while, the process will be getting irksome.
Challenging implementation if you code a website from scratch.
Challenging implementation of the opportunity to add goods to the cart when it comes to Ecommerce websites.

How to set up AMP on your website

You can develop AMP pages by following the HTML markup or by using a CMS. Let's see how exactly you can do it.

Create your HTML AMP page

Let's first take a look at how you can create an AMP page using HTML.

Basic code

Here’s the basic AMP page markup:

<!doctype html>

<head>

<title>Hello, AMPs</title>

href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">

content="width=device-width,minimum-scale=1,initial-scale=1">

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>

</head>

<body>

<h1 id="hello">Hello AMPHTML World!</h1>

</body>

</html>

The body content is pretty straightforward, although there’s additional code in the head.

Adding images

If you want to add images there, replace the regular HTML tag with its AMP equivalent.

In this case, it'll be the <amp-img> tag instead of <img>.

To try it out, paste the following code into the page’s <body>:

<amp-img src="https://source.unsplash.com/random/600x400" width="600"

height="400"></amp-img>

Adding style

The next step is adding style to your AMP site.

If you want to add any type of styling, you must use CSS properties. However, AMP states you have to include all CSS within a custom tag called the <style amp-custom> and place it in the <head> of a document.

For instance, you can try and add the following style to your page:

h1 {

margin: 1rem;

}

body {

background-color: green;

}

</style>

JavaScript

AMP enables adding custom JavaScript via the <amp-script> component — it lets you write and run your own JS to properly maintain AMP's performance guarantees. Moreover, it lets you quickly develop pages without using JavaScript coding or using external libraries.

Reviews and validation

A valid AMP page sticks to strict guidelines that ensure it’s eligibility for caching and creates a great user experience.

Before you validate an AMP page, make sure to follow these recommendations:

If you optimize for Google, use their own guidelines for AMP pages;
Link AMP pages to their canonicals (i.e., non-AMP version or the AMP page itself);
Use the same structured data markup in the AMP and canonicals;
Validate the structure data works via the Rich Results Test;
Make sure your robots.txt file doesn’t block your AMP page;
Follow international SEO hreflang guidelines.

As soon as you’re ready to review it, use the AMP Test Tool to see if your page meets all the necessary requirements.

Create your AMP page using a CMS

If you use a CMS for content management purposes, you can integrate AMP pages there using Drupal, Joomla, or WordPress. Let’s see what this process looks like for WordPress. What is AMP and How to Implement it on Your Website

After activating the WP plugin, you can start creating your AMP site by adding a new page or post. To do so, click "Start the AMP Page Builder."

You can use pre-built layouts or create your own with drag-and-drop elements. After that, click on the gear icon to edit your page elements and save each module on the way.

Once your page goes live, you can see what its AMP format looks like by adding "amp" to the end of its URL.

How to Check AMP Pages with Netpeak Spider

In addition to the code validator, you can check if your AMP pages meet all standards in Google's AMP Test Tool.

Enter the URL and click on the ‘Test URL’ button.
If you entered a canonical URL, the tool would show you a link to the AMP version. Click on the 'AMP Test Results'.
If the page meets all the criteria, you will see a corresponding alert.

Another way to test AMP pages – in Netpeak Spider. The crawler detects AMP pages that don't comply with AMP Project, marks them as a 'Bad AMP HTML Format' error, and flags out compliant AMP pages.

You can check AMP pages even in the free version of Netpeak Spider crawler that is not limited by the term of use and the number of analyzed URLs. Other basic features are also available in the Freemium version of the program.

To get access to free Netpeak Spider, you just need to sign up, download, and launch the program 😉

P.S. Right after signup, you'll also have the opportunity to try all paid functionality and then compare all our plans and pick the most suitable for you.

To check:

In a sidebar, tick the 'AMP' parameter in the 'Head Tags' group.
Enter the initial URL and hit the 'Start' button.
When the crawling is complete, TRUE in the AMP HTML column of the main table will indicate that the page has an AMP version, FALSE that it doesn’t.
In the sidebar of the issue report, check out for the error 'Bad AMP HTML format' and a warning 'Compliant AMP Pages'.
If your site has AMP pages that don't meet the AMP Project standards, you need to fix them. And for AMP HTML pages with a desktop version, you need to set up a canonical that will point to this version.

Check URLs for SEO parameters with Netpeak Checker

To check how well you've implemented AMP pages on your website, use Netpeak Checker — a powerful, multi-functional analytical tool.

The app offers many features and enables integrations with various SEO-related services. Here's what else you can do with Netpeak Checker:

Integration with 25 other services to analyze 450+ parameters

Netpeak Checker enables integrations with 25+ SEO services: Moz, SimilarWeb, Ahrefs, Serpstat, Google Analytics, and many others.

50+ on-page parameters

Netpeak Checker delivers research results in an interactive dashboard. Here, you can monitor redirects, titles, response time, status codes, mobile-friendliness, etc. All you have to do is choose the required parameters and hit "Start."

Website traffic estimation

Netpeak Checker shows the traffic volumes on a target page, potential link-building donors’ share ratios, as well as traffic by location. Moreover, it shows the types of traffic prevailing on a given page (search, organic, direct, mail, social, etc.).

Batch Core Web Vitals checkup

You can retrieve data from Google PageSpeed Insights to analyze your website's loading speed, responsiveness, and visual stability.

Integration with Google Drive & Sheets

Connect your Google Drive account to Netpeak Checker so you can quickly export any report to Google Sheets and easily share them at any time.

Recap

The pages loading up fast is a must-have for those who want their website to be rendered by search engines and positively perceived by users. One of the widespread ways to speed up pages is to implement the AMP framework. To implement AMP pages for websites built on CMS, use special plugins that I listed in this post. Implementing the framework on the websites coded from scratch is more complicated, as it requires programming skills or a developer's involvement.

But before implementing AMP pages, I recommend you to make a balanced decision and make it clear for yourself what benefits and drawback this technology may entail afterward.