When searching Google, have you noticed the following?
What is that…or what is AMP?
The above is an example of Google showing you an AMP webpage. AMP (Accelerated Mobile Pages) is a language library for web pages which intend to make the mobile web faster. AMP pages are endorsed, (some say) favoured and used by Google because they load extremely fast.
AMP makes the mobile web faster in 2 ways:
- An AMP web page can only use “AMP HTML” and “AMP JS” (which is really just a modified and smaller subset of standard HTML and JS)
- AMP pages are cached and served by Google directly
Users can only view an AMP page:
- On a mobile device, and
- From a direct link from Google or a platforms like Linkedin which support the AMP redirect
Adoption for the new technology is not widespread. Primarily, this is because AMP (because of its core philosophy) doesn’t bring all of the tools that many dynamic and interactive websites need to build a fully functioning product. Instead, companies that build dynamic sites (eg. an online store) can really only partially implement AMP.
Great examples of a partial implementation are shown by big names like eBay. eBay have built some of their higher ranking product listing pages in AMP. For example, when a user searches Google for ‘Tamiya Toy Models’, they can click on the Google result and view the eBay results for Tamiya Toy Models very quickly. From there, the user can click on a product, which opens the respective page on the standard eBay website.
The downside to this method of course is that the eBay experience is fragmented – going between AMP to standard website is a slightly different design and experience.
How does one, AMP?
- The standard website remains as-is
- A separate AMP version of the site is built which is accessible from a different URI (eg. example.com/amp/page) – generally this version would act as a separate “template” where the same content (from the standard website) is pulled into the body
- Then, to tell Google that there’s an AMP version of the page, you basically just add a meta tag to the relevant pages on the standard website
Pros vs Cons of AMP
- Very fast loading pages
- Generally a good experience for end users, because pages are fast, optimised for mobile screens and content is front and centre due to less functionality in AMP’s HTML/JS
- (Whilst it hasn’t been proven) It’s suggested that Google prioritizes AMP pages in search results as they’re faster for users
- Pages are served from Google – meaning AMP pages will likely have more availability and reduce hosting bandwidth costs
- Up front resources – Developers essentially need to build a separate website for the AMP version – using the AMP language (code generally isn’t reusable across the 2 websites)
- Developers need to maintain 2 different codebases
- The AMP language is limited (for better or worse) – meaning certain functionality on the primary website, isn’t possible in AMP (eg. a shopping cart, enquiry form etc)
- Pages are no longer dynamic because they’re cached and served by Google i.e. if a user is logged in to your website – an AMP version won’t show that they’re logged in
- There may be privacy concerns as Google is serving your content. The URL will be google.com/amp/… – not your own URL. Given the growing number of phishing scams – users are paying more attention to URLs
- The AMP user experience isn’t ‘end-to-end’ – due to the lack of features in AMP – a user will see the first page load fast – however will be bounced back to the main site (which will have a slightly different design) when clicking on many of the links
Who could use AMP?
A news site like BBC, the typical blog or even wiki sites. A user may Google “Facebook News” and find a post from the BBC which will show the AMP version of the website. Clicking on a related post redirects the user to the primary BBC website.
Static Marketing Sites
Example: A local lawn mowing business. The content of the page doesn’t change often. A user may search for “Lawn Mowing Gold Coast” and Google may show the AMP page which simply lists the information about the business and a phone number to get in touch. Great user experience.
Example: Redit. A very light-weight frame with basic content can be shown from search results, allowing users to read the content they searched for.
For those who can experiment
Example: Ebay. Ebay have the resources to rebuild and maintain various parts of their site in AMP. This allows key parts of the site to act as landing pages, be served through very fast and bounce users to their ‘real’ website.
WordPress and AMP
It’s very easy to add AMP to your WordPress site. In fact, it takes less than 5mins.
From your WordPress admin, visit the Add Plugin page and look for the “AMP” plugin by Automattic. Install it and your blog posts (only) will be AMP web pages.
You can visit Appearance > AMP to update the colours and then simply append /amp to the front-end blog post URL to see how it looks.