How to integrate AMP into your existing site structure

Google is always striving to find new ways to improve user experience. From changing their algorithms to updating their best practices; Google is constantly aiming for the perfect experience.

Bearing that in mind, it is little wonder that they came up with the concept of AMP (accelerate mobile pages); as by taking HTML pages and putting them on a “diet”- namely removing tags – this has rapidly increased website loading times.

And this is fantastic news for users, Google and businesses alike as not only has this ensured that Google is equipped to handle the rising number of internet searches performed each year, but by simplifying HTML this means businesses can easily meet the 3-second loading expectations of users. Perfect!

How does AMP work?

AMP essentially works by forcing you to use a streamlined version of CSS (which doesn’t allow for any JavaScript elements or forms); whereby you are left with just a fragmentation of HTML to work with.

Now before you panic, this is not as bad as it sounds. For starters, much of the HTML coding is the same thing as HTML5, meaning you’ll still be able to stylise your website using CSS3.

The only real big difference you’ll need to contend with is the removal of certain HTML tags and some added restrictions, including the appearance of fewer ads, and images only loading once users have scrolled towards them.

What does this mean for you?

You might think the loss of HTML and JavaScript would somehow hinder user experience by affecting your sites visual appearance, but AMP has got this covered.

You see, whereas normally when a webpage is selected on a mobile device it is downloaded from your server, with AMP it is no longer the case. Instead, visitors will be presented with a cached version of your webpage that has been supplied by Google.

How it works: Every time a site is searched for, the page will be re-requested from the server and its cached version updated. This means, no matter what updates you perform, viewers will always be presented with the most recent version of your website. Brilliant!

How will it look on your mobile device?

The biggest perk to AMP has to be its instant loading times. Yet this is not all that it has got to offer…

You see, unlike a lot of mobile websites which are difficult to view as they don’t fit into the frame of your device (causing you to stretch or swipe to find what you need); AMP eliminates this problem and instead ensures that your website remains as attractive as you need it to be.

No distorted text. No pixelated images. But an instant, clear upload that is structured exactly the way you designed it. Perfect!

Why should you use AMP?

Every day more and more consumers are turning to their mobile devices to fulfill their internet needs. Whether they are checking the weather; searching for the latest clothing trends or want to plan their next trip away; consumers are increasingly performing these searches whilst on the go and are foregoing waiting until they get home to go online.

This means as a business you need to make your website as mobile friendly as possible.

Luckily for you, AMP has got this covered in spades.

Alongside helping you to improve site accessibility – by delivering instant download rates – AMP also allows you to maintain visual quality so you don’t have to sacrifice on its presentation. Instead, you can achieve consistency across your non-AMP and AMP pages and present your website EXACTLY how you want it.

On top of this, AMP is also highly adaptable and can be used to develop sites across a variety of different industry niches. Blogs, news outlets, e-commerce websites… many have already taken advantage of the arrival of AMP to instantly upload their products, services and content rich pages.

And this is set to grow, given the rumors that AMP pages may soon affect page rankings. The fact that they can now be found in organic searches, means in the future they could play a key role in how you develop your marketing strategies.

NOTE:

Now it is important to point out here that whilst AMP enables you to make speed and readability a top priority; you WON’T be able to use interactive elements such as JavaScript on your AMP pages.

As a result, you may wish to refrain from making AMP versions of all your web pages, and only focus on the important ones.

Take for example landing pages. Whilst increasing download speed is invaluable, when it comes to landing pages, converting your readership is more important. So before you readily create AMP for all your pages, it might be worth leaving your landing pages as non-AMP – especially if the page uses JavaScript – to ensure your conversion rates remain consistent.

Instead, why not try building AMP pages for areas richer in content such as your news section or your blog posts? It is areas such as these where speedy downloads are most appreciated.

How can I get my web pages AMP compliant?

If this type of web design appeals, then your first step to getting AMP compliant is to design your web pages to an open source specification. This will ensure that your pages become cached in Google’s AMP cache and are able to be served faster.

Now the good news is, Google’s existing guidelines for creating Google friendly websites can also be applied to AMP.

However, if you’re unfamiliar with these guidelines or simply don’t know where to start, then the following pointers can help:

Create each of your web pages in accordance to the AMP specification (for more information on which HTML tags can be used or are prohibited contact our team at 01 Agency today)

When hosting your AMP website, you should do so at a URL that not only makes sense to the user but is related to your main website.

Make your website ‘discoverable’. Google can only index AMP pages if other pages link to them or reference them. This means, if you have got both AMP and non-AMP versions of your webpages you will need to reference the AMP version of your page on your non-AMP pages (and vice versa), so Google and other platforms are aware of them.

Make sure to test your page to make sure it is written in valid AMP HTML.

Mark up your content using structured data. This will ensure that your content is more prominently presented in search results. NOTE: whist testing your structured data it is important to make sure that you have followed Google’s structured data policies.

Using Search Console, monitor your AMP report for any errors. Alongside enabling you to identify mistakes in the HTML of your AMP pages, this report will also show you which of your AMP pages have successfully indexed and which have not.

AMP Facts

Things to note about AMP before you apply it to your web pages:

One: Whilst AMP works on most devices, including your desktop (as long as you use responsive web design); AMP specific features on Google are currently only available on mobiles. This means AMP on your desktop won’t get search-specific features in Google search results. NOTE: sadly, no plans have been revealed to expand these features onto non-mobile platforms in the future.

Two: It is possible to convert websites – regardless of whether you have used CMS, code or other factors – into AMP compliant web pages using the Ezoic AMP Converter App. Free to use on the Ezoic platform, this app is the only app that enables you to maintain a fully functioning, beautiful mobile website whilst embracing AMP.

More importantly, it makes it possible for you to maintain competition. You see, whereas AMP HTML only allows a simple tag – forcing you to choose between first look providers, header bidders etc. – this app allows all of these partners through to AMP.

Three: Even with a poor internet connection, AMP web pages will still load instantly.

Four: AMP pages are not directly served when consumers visit your website. Instead, it will only be served by AMP consumers, such as Google Search and Twitter.

For instance, if you were to do a search and see a lightning signal, this would indicate that the web page is an AMP version of the original page. Should you then click on this version you’ll be immediately taken through to a cleaner, faster, more streamlined version of the web page, which will load instantly no matter your internet speed.

Five: AMP versions can be created for all types of sites including WordPress.

Six: AMP can now be used on landing pages and for placing ads (although fewer ads will appear on the site). Similarly, AMP pages can now be found in organic searches and not just in Google’s top stories AMP carousel.

Seven: AMP doesn’t support all ad formats and technologies available on standard web pages. NOTE: whilst some are still in development, there is a growing library of AMP-enabled rich formats which will support premium rates whilst also respecting your need for better user experiences.

There is no denying that AMP has got a lot to offer businesses and that as it develops all its current glitches will soon disappear. So if you are interested in improving the speed and accessibility of your mobile website, why not consider adding AMP versions of your web pages today?

At 01 Agency we can help you to transition to AMP, and ensure your website remains attractive, engaging and profitable.