How To Implement Google AMP On Your Website

Accelerated Mobile Pages is an initiative from Google to improve your user's mobile browser experience. Google wants to make pages easy for developers to implement, enable monetization and embrace the open web. AMP HTML is a lot like your regular HTML, but with a few rules and restrictions to facilitate a good user experience.

How does AMP work?

AMP is a framework for creating mobile web pages, comprising three parts.

1. AMP JS

AMP provides you with an off-the-shelf JavaScript library which employs the best performance practices, like managing resource handling, asynchronous loading and giving custom tags to be used in AMP HTML. These practices ensure your pages render as fast as possible. One advantage this gives you is ensuring every element coming from an external source, works in unison, preventing anything within the page from being blocked from rendering. Pre-calculating the layout of elements on the page, disabling slow CSS selectors, and sandboxing iframes, all play a part in delivering faster speeds.

2. AMP HTML

AMP HTML is standard HTML with a bunch of custom AMP properties. In other words, it’s a “diet” version of HTML with some restrictions allowing reliable performance and a few extensions to help put together rich content. The AMP JS library helps you quickly render AMP HTML pages.

3. AMP Cache

This is an optional proxy-based, content delivery network (CDN) used to distribute valid AMP documents. The CDN takes your AMP HTML pages, caches them, and automatically optimizes your page performance. A validation system comes with the AMP cache system to confirm whether a page will work independently of external resources.

Things to keep in mind:

AMP HTML doesn’t allow form elements and third-party JavaScript. The downside of this is, it won’t be easy to incorporate user comments and other interactive user elements. The focus here is on speed and readability.

You might have to rewrite your site template to make room for restrictions. For instance, custom fonts tend to be load intensive, but all CSS in AMP must be in-line and less than 50KB. This means you’ll have to load them using a particular amp-font extension.

Custom tags are painstaking to implement for multimedia. For example, images need to incorporate the custom elements and be of a specified width and height. Additionally, if you are using GIFs or locally embedded videos, you need to use the appropriate AMP extended component. These tags and extended components aren’t difficult to use, but they need to be considered before planning your site design.

How to implement  AMP?

It’s time to speed up your mobile browser pages.

For starters, it’s advisable to maintain at least two versions of your page. Your original content page will be the mobile browser friendly version users see. You’ll also have the AMP version of this page to speed things up.

For WordPress users, you need to download and install the WordPress plugin at GitHub. Like with any other plugin, you can also install the AMP plugin through your WordPress dashboard. Once you’re done installing and activating the plugin, append “/amp/” to your pages.  Append this “?amp=1” instead, if you don’t have a friendly permalink.

 Don’t forget to tweak the Google search console, to help Google pick up the AMP versions of your article faster.

Moreover, the AMP Discovery page mentions some platforms will require Schema.org metadata to make your content eligible to appear in the demo of the Google Search news carousel. Make sure you get your schema right.

AMP is a relatively easy way to improve the speed of mobile websites for publishers. In the future, Accelerated Mobile Pages is going to influence a lot of social media mobile interactions. While implementing AMP, don’t forget to incorporate other proven mobile marketing strategies. It’ll prove crucial in bringing relevant customers to your site.