What is an AMP Page?

AMP is a way of building fast websites.

It is like HTML but has its own set of rules that you need to follow.

If you follow these rules then Google will cache your page on their server.

This makes the site super fast for Google Search users.

But before you rush off and create your first AMP page there is a lot to consider.

Let's take a look.

What is AMP?

Google cares about Page Speed.

This is because users love fast websites. Google wants you to make fast pages so that Google users get a great experience.

Yet, sites are getting slower, not faster, with the average webpage coming in at 2mb.

Many sites are being built in Javascript, which can be slower to load if not optimized.

Images are getting bigger too and these take longer to download slowing down the page.

Google wants to reverse this trend and they have some incentives.

One being page speed as a Google Search ranking factor.

To help web owners with their page speed Google launched AMP, a set of standards to help build fast websites.

AMP stood for Accelerated Mobile Page. Yet, this is no longer the case.

AMP works on mobile, desktop and tablet.

There are even special AMP email templates.

To see AMP in action do a search on mobile and find a link with a lightning bolt.

Here I have searched for “chocolate cake”:

When you tap on this result it will open the web page like normal.

Yet, do you notice that little bar at the top:

This bar shows that the page is an AMP page and you are not actually on the BBC Food website. If you look at the URL you will see it is:

https://www.google.com/amp/s/www.bbcgoodfood.com/recipes/easy-chocolate-cake%3famp

If you click on any link you will then visit the original URL at bbcgoodfood.com.

This is an important point about AMP pages. Any link from Google will show a google amp URL not your website URL.

This is one of the biggest criticisms of AMP.

Does Google Own AMP?

Well yes and no. The project is open source and there are a few companies committed to the project:

• Microsoft
• Twitter
• Pinterest
• LinkedIn
• WordPress

Here is what Google have to say about the project:

The companies involved in the project want to make the mobile web work better for all – not just for one platform, one set of technologies, or one set of publishers, or one set of advertisers. Making the project open source enables people to share and contribute their ideas and code for making the mobile web fast. We are just at the beginning of that journey and we look forward to other publishers, advertisers and technology companies joining along the way.

Notice how Apple and Facebook are not on this list. Have you guessed why? It's because they have their own version:

• Apple has Apple News
• Facebook has Facebook Instant Articles

Both of these formats are not compatible with AMP and it's very unlikely they will ever join the group.

Yet, even though Apple does not contribute to AMP the format is still supported by the Safari browser. Browser support for AMP is good:

• Chrome
• Firefox
• Edge
• Safari
• Opera

On the official amp.dev website they make this statement on browser support:

In general we support the latest two versions of major browsers like Chrome, Firefox, Edge, Safari, Opera and UC Browser. We support desktop, phone, tablet and the web view version of these respective browsers.

Google has added the AMP project to the OpenJS Foundation. This means that the project is now governed by a community and no longer a single company. This is an important step in making AMP an open standard for the web.

Google still has dedicated staff contributing to the AMP project code.

So AMP will be interesting to watch in 2020.

Why should I use AMP?

AMP will speed up your site. After all, it's built for speed.

Google is on a mission to create instant pages offering a great user experience.

So how much faster is AMP vs HTML?

This side by side video shows the Washington Post site on mobile and compares the HTML site vs the AMP site:

As you can see in the video above the AMP page completes in half the time.

• AMP takes 6.3 seconds to complete
• HTML takes 11.6 seconds to complete

This test was running on a nexus 5 with a 4g connection. So AMP will speed up your site.

News sites were one of the first to adopt AMP because Google gave these sites a boost in SEO. By adding them to the “Top Stories” section of Google Search results right at the top of the search results.

Let's look at this next.

Does AMP Improve Search Rank?

Google has said that AMP is not a Google Search Ranking Factor. Yet, it is undeniable that AMP pages do very well in search.

After all, AMP does improve page speed and page speed is a search ranking factor.

There have been reports that AMP has actually reduced the ranking of a site and AMP was later removed:

• 59% drop in search rankings due to AMP
• 70% drop in search rankings due to AMP

AMP should not give you these results so it is difficult to pinpoint the exact issue the sites had above.

If you have an existing site with good traffic you should test the change to AMP with a few pages first.

When configured correctly, AMP will give you a slight SEO boost. This is due to the improvement in your website performance. But, page speed is not the only advantage.

You will also get enriched search results, let's look at these next.

AMP and Google Search Results

There are a few sections of the Google Search results that are AMP only.

For example, the News Top Stories Section which looks like this:

There is also the listing carousel that hotels can use:

It's not only hotels that can use these carousels:

Any list you have on a page can use this carousel.

There is also a new section called AMP stories.

These are cards that appear near the top of search.

When you tap it you get a slideshow-like story, a bit like Instagram stories. Here is an example from the Washington post:

Have you also noticed the lightning bolts in search?

What does the lightning bolt on Google searches mean?

These little lightning bolts mean that the site is using AMP.

They look like this if you are not sure what I am talking about:

The little symbol is the AMP logo, telling you that the page will be fast to load.

How to create an AMP page

If you are looking to convert an existing website from HTML to AMP there are many things to consider.

Here are some rules you will need to take into consideration:

• AMP pages can't include external stylesheets
• AMP pages must include only 50kb of custom CSS loading in a style tag
• AMP pages need to use amp-img tags not img tags
• AMP pages can only load 150kb of external javascript
• AMP pages need to use custom form tags amp-form

There are a lot of technical hurdles to get past before you have an AMP page.

Does AMP support Javascript?

It was very difficult to run your custom Javascript on AMP pages. Yet, as of August 2019 there is a new element called the amp-script tag.

This allows you to add any custom javascript to the page. There are some restrictions though:

• The script must be under 150kB
• It can't change the page content on page load
• Not all the javascript functions are available

It is a great step forward but if you have a heavy javascript app this is going to be too restrictive.

Does AMP support analytics and Tag Management?

One of the casualties of AMP pages is the third party javascript that is on many sites.

We are talking about analytics, tracking and testing scripts that get added to a page.

Anything added by a Tag Manager.

AMP has an element called amp-analytics that will allow you to add Google Analytics etc.

Yet, this is not a direct replacement. You will need each of your third party scripts to be compatible with amp-analytics. For example, Tealium has an AMP implementation.

If you have a third-party script that is not AMP-compatible then you will not be able to use it on your site.

This restriction puts many people off AMP. Yet, these third party scripts slow down your site so you should consider removing them if you can.

AMP and Personalization

Personalization in AMP is difficult as the page is cached by Google. This means that everyone sees the same page.

If your site shows different content to every user it can be difficult to do this with AMP.

There have been a few changes recently making it easier to do. There are now a few elements that can be used to personalize the content:

• amp-bind - used to add custom client-side data like storing recent search term
• amp-bind-macro - used to create reusable functions and functionality
• amp-list- used to fetch data and create a list from the results
• amp-mustache - used to reuse a template (often combined with amp-list)

These elements all allow for some personalization of AMP pages. For example, you could use the amp-list element to show a list of hotels personalized to the user.

Yet, these elements are still restrictive and can be difficult to set up.

You will need a developer to help install these elements.

Once you have the page set up you will need to test it to make sure it works.

Testing your AMP Page

Once you have created your AMP page you need to make sure it is valid.

If your site is not valid then Google will not cache it on their CDN.

To check you can use the Google AMP test tool

Once the page is valid you will see this on the results page:

You can also see any errors for AMP pages in Google Search Console:

AMP for Wordpress

Wordpress is a contributor to the AMP project. They have an official AMP WordPress plugin you can use to enable AMP on your blog.

If you are going to use this plugin then I would recommend that you use one of the official themes. Twenty Twenty is the most recent official theme so start with this. This is because these themes will come under the CSS restrictions.

If you are starting a new site then you can run the plugin using Standard mode.

This will mean that you do not have to maintain two sites an AMP and non-AMP site.

Wrapping Up, What is an AMP Page?

You now have an excellent understanding of what an AMP page is.

It is a special web page that is built for speed and is an initiative pushed by Google.

Although you do not get a direct rankings SEO boost from using it you can appear in special AMP sections of search. These include:

• Top Stories
• Carousels
• AMP Stories

You may get an SEO boost due to page speed and web performance improvements.

It can be difficult to put in place AMP and there are many restrictions including:

• You can only use 50kb of CSS
• You can only use 150kb of JS
• You have to use special element such as amp-img instead of img
• For personalization, you are restricted to a few elements such as amp-list

If you are starting a new WordPress site then use the official AMP WordPress plugin.