Today we are talking about Accelerated Mobile Pages, or AMP for short.
We would all love to have websites that loaded instantly. But making it happen is a tremendous technical challenge. It relies on servers working in tandem, elements popping up at the right time, and resizing images while retaining visual fidelity.
Ideally, though, you want your pages to load fast. There are massive SEO implications. And, frankly, today’s users expect nothing less. If your site feels sluggish, they’ll click back to search results, Google will punish you, and you’ll miss out on a potential conversion opportunity.
So what does Google AMP have to do with all of this?
Google knows that businesses can find it challenging to rig their sites to load faster – especially on mobile. The search giant – like regular companies – wants all pages it forwards its users to to load instantly. (If they don’t, then it hurts Google as a search platform).
Therefore, you can think of AMP as Google’s tool for making the website experience snappy. Pages that use it are around three times as fast as their non-AMP counterparts and get about twice the conversion rate. That’s a massive improvement for something that is, fundamentally, quite simple to do.
Some of those who use Google AMP swear by it. The results are spectacular. So why aren’t you using it yet?
What Is Google AMP?
Defining Google AMP is a little tricky because the technology does so much. Put simply: it’s a platform the California search giant built to allow webmasters to generate better pages, emails, stories and ads.
If you’re in marketing and thinking that this sounds like a “customer-first”, then you’re right. The whole purpose of the utility is to find ways to delight users (as Google puts it).
AMP is the go-to choice for companies that want to improve their core metrics and boost their performance relative to their rivals. The technology helps pages load nearly instantaneously across a variety of platforms and allows firms to archive their entire websites if they use content management platforms.
AMP makes merging your outreach platforms so much easier. Let’s say that you want to embed a Tweet you made in a blog on your site. With AMP, it’s a piece of cake. You can do it all natively, which means that users don’t have to go offsite when consuming your content. It means fewer lost sales to people getting side-tracked on social media and a better conversion funnel.
How Google AMP Improves The User Experience
So let’s get down to the nitty-gritty. What’s happening on a technical level that makes Google AMP superior to run of the mill HTML?
AMP Loads Page Features Simultaneously
It’s annoying clicking a page and then waiting for ages while elements adjust themselves into the proper sequence. You start exploring one part of the page, only for it to flick out of view as your browser loads new elements below.
Google AMP puts a stop to these annoying digital artefacts. Instead of allowing bits and pieces, like text and images, to load separately, it insists that browsers serve them up altogether. The result on the user end is nothing and then everything. Once the page loads, that’s it: no random adjustments to the layout that disrupt the user experience.
AMP uses a technology called iFrames to pull this off. Custom JavaScript elements which could affect simultaneity are now allowed under the scheme.
Browsers Understand Page Layout Before Elements Load
Google AMP does another smart thing (which should have been thought about a long time ago). It creates a kind of wireframe of not-yet-loaded pages so that browsers (like Chrome and Firefox) know where stuff is going to go before it loads. Thus, the moment the user clicks on a page link and begins the download process, everything is set out as it should be.
AMP insists that all external site frames must state their size in the HTML. Static “layouting” – as it is called – puts a stop to asynchronous page loading artefacts that users hate. Again, the business case for this feature is clear.
AMP Prioritises What Loads First
Some web pages are enormous and contain hundreds of images. Users, however, can’t see all of them at once, so it doesn’t make much sense to load them simultaneously. It would be much more sensible to use available resources to load the parts of the page that are visible in the browser window and then progressively load page elements users will most likely need next.
Google AMP uses this approach. It prioritises on-screen elements first and then only dedicates resources to ad content if it is visible below the fold. In other words, users get to see critical page content first while AMP finishes uploading the rest in the background while they peruse the page. It feels like the entire page appeared immediately, even though vast tracts outside of the browser window remain empty.
Remember, this is only possible because of layouting technology. The browser knows the frame of the pages – it just needs to populate the relevant elements. And it does so by tracking the user’s position and then inserting downloaded content into the appropriate fields as required.
AMP Reduces Layout Recalculations
Most web pages are complicated by multiple sheets and scripts. Even when a traditional page fully downloads, the browser will sometimes rejig them because it doesn’t know the order in which everything should appear ahead of time.
Again, AMP’s simultaneity advantage deals with this. Having all of the script elements and dynamic functions operate at once means that browsers don’t have to perform re-layouts. AMP reads, comprehends and implements changes seamlessly in the background before finally displaying the page.
AMP Makes Downloading Fonts Faster
Non-AMP pages require HTTP requests to begin downloading fonts. The browser has to download relevant scripts and stylesheets first.
But with AMP, that’s not the case. Fonts arrive with everything else because there is no HTTP communication blocking. Again, this reduces the complexity of the process, enhancing the page-loading experience.
CSS Is Greatly Simplified
On non-AMP pages, browsers need to make multiple HTTP requests to facilitate the rendering path, but AMP simplifies the process significantly. There is only one in-line stylesheet streamlining the communications required to load the page fully.
In addition, AMP limits the size of the CSS file to 50 kilobytes. This restriction makes it large enough to allow for detailed content layout but also prevents unnecessary bloat can sometimes afflict website backend.
AMP Shifts Image Loading Tasks To The GPU
Image loading can take its toll on a computer’s processor. CPU architecture makes this component innately superior for sequential tasks. Visual content, however, is more amenable to parallel processing – the realm of GPUs.
AMP, therefore, splits page workload between these two computer components. The CPU gets on with what it does best – making pages run faster. And the GPU does tasks which suit it the most – things like cropping, shrinking or rotating images. The two components then talk to each other when they need additional resources, or there is a more efficient way of performing a task.
How To Use Google AMP Pages On Your Site
Okay, so now we’ve discussed what Google AMP is doing, we need to know how to implement it.
But how?
Given the above slightly technical discussion, you’ve probably come away with the assumption that implementing Google AMP will be a demanding process.
The good news, though, is that it doesn’t have to be. Even people who don’t have a tremendous amount of coding experience can dabble in it and make a good job of it. Google has been as helpful as it can with the user interface without meaningfully sacrificing on functionality. AMP integrates with a wide variety of CMS platforms, meaning that most companies will be able to slot it into their existing WordPress (or another platform) setup.
The basic process goes something like this: you start by building a page called “Hello World” by Google. You then link your pages to your site, learn more about the basics of AMP, set up analytics and tracking, and create a site around your needs and goals.
You can also try your skills in AMP environments, like amp.dev. Here you can mess about with your existing pages or create new ones in a sandbox environment. The tool lets you visualise the alterations you make so that you can decide whether you like them. Sometimes it is good to see the direct impact of your tinkering on the user experience in real-time.
So, how do you make a Google AMP page? Check out this simple process you can follow.
Create An AMP HTML Page
The first step is to dive into the code and make your AMP page happen. As with most web pages, you’ll need to define your head, meta, script and title.
Fortunately, Google provides you with a boilerplate you can use, so you don’t have to enter all your code from scratch. You just cut and paste bits and pieces of content from your pages that will appear in the final code.
The critical element is thewhich identifies that the content is AMP. The is also important because it loads the AMP JS library.
Follow The Google AMP Guidelines
Google is a company that loves rules – and it sticks to its forté when it comes to how you’re allowed to use AMP. Here are some of the guidelines you must follow:
- If you’re adding structured data to your pages, you must follow Google’s structured data policy
- The AMP URL should still make sense to the reader
- Users should be able to do the exact same things on AMP pages as they can your canonical pages
- AMP pages much follow HTML specifications – something that is relatively easy once you understand the AMP HTML specification
Make Your Content Discoverable
The next step is to make AMP content discoverable for Google’s crawling and indexing. All AMP pages must link to canonical pages – a specific tag that tells search engines that a particular page is a master, and all others are derivatives.
Having multiple duplicate pages can land you in trouble with search engines and harm your SEO. If Google believes that your pages are duplicates – then it doesn’t know which to index first.
If you don’t have a non-AMP version of the page, then you can set the AMP page itself as the canonical link.
Check That Users Get The Same Experience Across AMP And Non-AMP Pages
Ideally, there shouldn’t be a material difference between AMP and non-AMP pages other than the loading speed we discussed earlier. Sometimes, though, annoying differences in the user experience can crop up.
Slight differences between pages are okay, according to Google, but you should aim to allow users to perform the same actions. If visitors can buy products on your canonical pages but can’t on your AMP pages, then that constitutes what Google considers a significant difference in features.
Use The AMP Test Tool
Google provides an AMP test tool that allows you to ensure that your page meets the search giants’ requirements for a valid HTML document. If you’re not using AMP correctly, the tool will spit back an answer telling you as much.
If, however, you do have a valid AMP page, then you can preview search results in a mock mobile SERPs page or view AMP HTML. If you want to ignore all the technicalities, you can simply take the tool’s assertion that you have a “valid AMP page” and run with it.
Harmonise Your Structured Data Markup Across AMP And Canonical Pages
The notion of harmonising your structured data markup might sound horrendously complicated, and it can be.
Google Search requires pointers that allow it to understand the structure of a page. Structured data, therefore, is a standardised format that the search engine uses to classify page content (such as headings, meta descriptions, body text, author and so on).
Before you push ahead with AMP, you should make sure that this structure (found in the HTML code) is consistent across both your AMP and canonical page versions. If they’re the same thing, you can skip this step. If, however, they’re different, you’ll need to check.
Take a look at all the fields (as indicated by <title>, <body> <p>). They should match up identically and be in the same order.
Remember, Google uses structured data for special features and search results enhancements. Recipe pages with structured data, for instance, appear in a helpful call-out box that gives users quick video links, recipe review ratings, and prep time information.
Ensure That Your robot.txt File Isn’t Blocking Your AMP Pages
When setting up robot.txt files for SEO purposes, be careful that they don’t block your AMP pages. You don’t want to prevent web crawlers from scanning and indexing your AMP pages.
Create AMP Pages If You Use A CMS
A lot of enterprises use CMS platforms. It’s just more convenient to divide static from dynamic web pages, especially if you regularly update your site with transient material, like new blogs.
If you’re creating an AMP page using a CMS, you have two options. Either you can use a WordPress, Joomla or Drupal plugin, or you can implement custom functionality yourself to generate AMP content.
You’ll need first to consider how AMP HTML files will fit your existing URL scheme. If you don’t have an SEO-friendly strategy already, you’ll need to implement one of these. Use real words that mean something to users as they browse your site.
Don’t use www.example.com/productID:3838474. Instead choose, www.example.com/cat-food. The first example means nothing to users. The second tells them precisely the product or category they are currently viewing.
Google recommends that you choose the following URL schemes if you are using an AMP page in addition to a canonical non-AMP page.
- www.example.com/cat-food
- www.example.com/cat-food.html
It’s a simple addition, but it helps with SEO purposes.
Next, if you decide to go down the custom route, you’ll also need to create a structured data markup template. The idea here is to provide Google with a template for the type of content that you intend to publish. As we discussed above, this helps Google figure out the nature of your pages.
Monitor Your Pages
Finally, you’ll want to monitor your pages and check their performance periodically. AMP status reports allow you to capture implementation issues that affect multiple pages. You can also use rich result status results to look for problems with your existing structured data and ways to add to it.
Wrapping Up
Google AMP is a somewhat controversial initiative with some commentators believing that it only remains alive because the search giant forces it on webmasters. If you don’t adopt it, you could forgo a significant chunk of traffic.
Google sees any differences between the canonical page and the AMP page as issues so it can be challenging to implement if you don’t have existing expertise. Often, your only option is to seek outside help if you want to achieve full equivalency between the two.
