The ever-increasing amount of web traffic from mobile devices means that optimising your mobile site needs to be part of your 2019 marketing strategy. While desktop web browsing still has its place, better mobile browsing is only going to become more important. Today, Google Accelerated Mobile Pages (AMP) look like the future of mobile browsing.
A faster mobile web
Google AMP is an open source initiative that aims to push higher performance in the mobile web. In other words, faster browsing.
AMP pages show up in Google’s mobile search results, accompanied by a small lightning bolt. It sends out a pretty unambiguous message: ’check out these pages, they’re the fastest’.
But more importantly, the only pages that feature in their ‘Top Stories’ carousel, at the top of their mobile search results, are AMP pages. That’s a very compelling reason to adopt – or, more to the point, not get left out.
But what are the advantages of AMP for individual users? Pages optimised for AMP load far quicker, in a smarter, mobile-centric way, prioritising content ‘above the fold’ (the upper part of a web page that’s visible without scrolling) to appear as quickly as possible, rather than forcing the user to wait for the entire page to load.
You don’t have to be a UX expert to realise that shorter loading times create a better user experience – which means greater engagement and higher visitor retention rates. These are all better for your business.
A study in 2019 by Stone Temple Consulting found publisher sites who optimised their pages by AMP standards achieved a click-through rate that was 23.1% higher click-through rate on Google Search Engine Results Pages (SERP). Meanwhile, e-commerce sites benefited from a 32.1% increase in organic traffic.
Impressive results, we think you’ll agree. And when Google throws its mighty weight behind something, it’s a pretty safe bet that it’s going to be big (with the exception of Google+, perhaps).
If you want to make the most of it and not get left behind, here are some tips for implementing Google AMP:
Getting set up with AMP
If your site uses WordPress, it’s relatively straightforward to begin using AMP. Installing the WordPress AMP plugin gives you access to all the essential functionality.
Now, whenever you make a new post on your site, an AMP-optimised version of the page will be created along with the original. You can see it by adding /amp/ to the end of the original post’s URL.
You may have to make some tweaks to bring the look and feel of the AMP-version more in line with your original site, however. This all depends on how your site was coded.
It’s also a good idea to use plugins like Glue for Yoast SEO & AMP to help make optimise your page for search engine optimisation (SEO).
Not using WordPress? Then you may require a little more work from your developer. Now, you’ll need to ensure two versions of each page are created: the original, and the AMP version. For AMP to work, this new AMP-optimised version can’t contain certain HTML tags. That includes some forms of Javascript, as well as frame functions.
But this isn’t a drawback – it’s just part of what AMP does. It simplifies the page by using a streamlined version of Cascading Style Sheets (CSS) – leaner, faster-loading and better suited to provide a better mobile experience.
Learn the right (and wrong tags)
Although it doesn’t allow certain HTML tags, Google AMP has a selection of its own to replace them, which have become known as AMP HTML. These tags have been specifically created to enhance mobile browsing. So, if you’ll be writing AMP optimised web pages, you’ll need to get to grips with AMP HTML.
But it’s not like learning an entirely new language. Just some new terms. For a seasoned web developer, picking up AMP is a breeze. You can find the basics in this AMP HTML specification guide, which includes a list of prohibited tags, their replacements, and a sample page that’s been formatted correctly.
And if you want to get more advanced, the AMP component catalogue contains a full list of all AMP-specific HTML elements. It even includes experimental functions that are still in beta phase, and it’s updated every time there are new developments.
Check that your code is compliant
There are several good tools you can use to ensure the pages you create are AMP optimised. The best of these come straight from the source: Google.
A good start is to test your web pages during development using Google’s AMP validator. It checks the HTML and tells you where and how to fix it, if it isn’t AMP-optimised.
You can also search for validation errors directly in Chrome. Just open the page in the browser, add “#development1” to the end of the URL, open the Chrome DevTools console and check. And the AMP report on the Google Search Console will show you which AMP pages Google can find and crawl. It will also tell you which ones contain errors to be corrected.
The latest functionality for 2019
As of this year, there’s been a range of new features introduced to make AMP-optimised pages look and work even better. You should definitely consider using these if you want your site to shine as brightly as possible.
One of them is improved video. Users can now watch a video and scroll though the accompanying content at the same time. The video can be minimised and docked in a corner of the screen, where it’ll keep on playing while they continue reading the rest of the page.
It’s now also easier to monetise videos. The <amp-ima-video> component allows you to do this with video adverts from networks supporting the Interactive Media Ads software development kit (SDK). AMP also natively supports a number of video players that can monetise ads, including Brightcove and Dailymotion.
Another update is input masking in forms. This makes it much easier for your users to fill in details like credit card information or their date of birth, because developers can add things like spaces or interstitial characters. When a customer is entering long numbers and other such data on a small screen, on the go, they need all the help they can get.
AMP now supports infinite scroll. When a user gets to the end of a list (e.g. search results or product cards) you can automatically repopulate the list with further items. This is particularly valuable for e-commerce or publishing sites.
Since new data protection regulations became enforceable, we’re all used to seeing the ubiquitous consent prompt on almost every page we visit. Although AMP has long featured the <amp-consent> tag to simplify users’ consent to data collection, the latest improvements also support 3rd party consent management platforms (CMP). A lot of businesses use these, making it a useful feature.
Dynamic email content
A departure from other web-based incarnations of AMP, this 2019 innovation lands in your email inbox instead.
AMP for Email allows you to create highly interactive email content that means you can do things you’d usually have to click away to a web page to do – like buy a product or browse the catalogue. Fewer clicks, better UX and a quicker path to purchase.
That’s only one implementation. The ability to provide this kind of interactivity within an email, in a format tailored for mobile devices, has far-reaching possibilities for your business. Many companies like Booking.com and Pinterest have already adopted it for their consumer-facing emails. It’s worth considering joining them.
A new way to tell stories
One of the most common complaints levelled at AMP by past critics was that it led to repetitive and flat pages, because it omits many elements such as Javascript, which allow developers to create more interaction, movement, texture and a richer experience.
That’s one of the reasons why AMP Stories may be the most significant introduction to AMP this year. It’s essentially Google’s take on the ‘story’ functionality that’s already swept across all the social media heavy hitters like Instagram, Facebook and Snapchat.
Like the rest, it allows you to post a brief video, photo or other visually rich clip. So maybe this is Google jumping on the ‘stories’ bandwagon – but it’s also a new way to present a more vibrant, engaging experience within the constraints of AMP – and it does so in a format that mobile users already know and love.
And, as usual with AMP pages, AMP Stories get priority placement on Google searches. Right up near the top of search results, which is some of the most prime internet real estate. That’s yet another good reason why AMP should be on your radar.
Want to really make the most of AMP?
If you like the sound of all this but don’t know where to start, get in touch with Fifty Five and Five. Our team of web development, design and SEO professionals can help you ensure that your web presence keeps up with the latest innovations and user demands in a rapidly changing, increasingly mobile world.