What Is AMP and How to Implement It

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.

• 1. What Is AMP?
• 2. Benefits and Drawbacks of AMP Pages
• 3. How to Implement AMP on Website
• 4. How to Check AMP Pages
• Recap

1. 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.

2. Benefits and Drawbacks of AMP Pages

Benefits of AMP pages:

1. 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.’
2. 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.
3. 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:

1. 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.
2. For AMP content is cached by Google and kept on its own service, it assigns its domain name.
3. Since most of the extra elements on the AMP pages are cut-down, including ad banners, it may be a hazard to ad income.
4. Webmasters should keep an eye on the main website, AMP version, and the mobile version. After a while, the process will be getting irksome.
5. Challenging implementation if you code a website from scratch.
6. Challenging implementation of the opportunity to add goods to the cart when it comes to Ecommerce websites.

3. How to Implement AMP on Website

To implement AMP on websites built on CMS, use special plugins:

1. AMP for WordPress websites.
2. For Joomla – wbAMD plugin.
3. AMP for Drupal can be installed with the help of AML module, AMP theme, and HMTL-library of AMP.
4. For Bitrix – Google AMP.
5. For websites on Opencart – Opencart AMP.

But what if you code a website from scratch, a DIY website? As I already said, the implementation of AMP pages on such websites may be a challenging task. So we drew up technical specifications with the most critical requirements:

1. AMP pages must meet HTML layout requirements.
2. Implementing styles and responsive design, it’s important to check with the official instructions.
3. AMP URLs should be user-friendly. For example, for the URL of the canonical page example.com/news/odessa, the address of the AMP page should look like this: amp.example.com/news/odessa Or like this: example.com/amp/news/odessa.
4. Canonical pages must be mentioned in the header tag of AMP pages. Example:

   <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">

5. AMP page content must match content on the canonical pages.
6. All main pages must have a link to the AMP page:

   <rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

7. The footer should contain a link to the full version of the website, which is necessary for a user to follow the main website easily.
8. In the robots.txt file, you need to ban indexing of AMP pages by Bing robots:
   User-agent: Bing ...

   Disallow: */amp/

9. To add analytics counter codes to the AMP page templates, follow these Google guidelines.
10. The site logo on AMP pages must also meet certain requirements. More on this here.
11. When implementing JavaScript on pages, only the AMP JS library should be used, no random codes.
12. Use special AMP extensions to embed videos.
13. Follow this guide to add ads.
14. To add structured data to your AMP page, see Google's reference material for structured data types and how they should be implemented.
15. After the implementation of the template HTML codes, you need to check it in the special validator. This is important as the pages must work properly and appear in the SERP.

4. How to Check AMP Pages

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

1. Enter the URL and click on the ‘Test URL’ button.
2. If you entered a canonical URL, the tool would show you a link to the AMP version. Click on the 'AMP Test Results'.

   

3. 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.

To check:

1. In a sidebar, tick the 'AMP' parameter in the 'Head Tags' group.

   

2. Enter the initial URL and hit the 'Start' button.
3. 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.

   

4. In the sidebar of the issue report, check out for the error 'Bad AMP HTML format' and a warning 'Compliant AMP Pages'.

   

5. 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.

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.