Accelerated Mobile Pages: Beginners Guide
AMP
-

Everything You Need To Know About Accelerated Mobile Pages

If you read our ‘2017 Digital Marketing Trends You Need to Know’ blog post, you’ll see that we mentioned accelerated mobile pages a lot. And if you’re here, we’re guessing you had no idea what those were. Luckily, we’ve compiled a bite-sized guide explaining what they are, how they can be implemented and the benefits of having them. You’re welcome. 

What Are Accelerated Mobile Pages?

Accelerated Mobile Pages, also known as AMP is a Google-backed project that has the aim of speeding up the delivery of content by using stripped down code known as AMP HTML. To bring it down to basics, AMP is a way to build website pages for static content and it helps pages load a lot faster than regular HTML.

Google rolled it out in October last year. The open-source initiative is a very accessible framework for making your mobile pages load quicker – which is a really beneficial factor in user experience.

You’ve probably already been scanning through accelerated mobile pages before. Facebook started doing its ‘Instant Articles’ wherein the user was able to click through far faster to view the writing than they would do on a mobile browser. An example of a publisher who’s using AMP is the Guardian. If you want to compare a normal article to an AMP version then all you have to do is add /amp to the end of any news story on the Guardian website.

How Can You Implement Accelerated Mobile Pages?

accelerated mobile pages

Source: AMP Project

The first thing you need to know about all this is that you’re going to have to maintain at least two versions of any article page: the original and the AMP version. Since Accelerated Mobile Pages doesn’t permit things like third-party JavaScript and form elements, you need to be aware that some of your traditional features won’t be there.

Fonts – All CSS in AMP must be in-line and be less than 50KB. If you have custom fonts, due to the loading intensity of them, you’ll need a special amp-font extension to better control the loading.

Multimedia – This must be handled differently. For example, your images will need to utilise the custom amp-img element and must include an explicit height and width. If you’re using GIFs, you need to use the amp-anim extended component to do so. Video especially. You’ll need to use a custom tag to embed locally hosted videos via HTML5 named amp-video.

Social Media -If you’re importing YouTube videos though, you can use the amp-YouTube extended component. Slideshows are available through amp-carousel and image light-boxes can be done via amp-image-lightbox. For other social media embeds from Facebook, Pinterest, Instagram and Twitter these can be used with their own extended components which you can find here.

Luckily these aren’t difficult to use but they do require planning in your site design. One thing we’ll tell you is that Google and other tech that supports the AMP project will require modification of the original version of the article page in order to detect the AMP version. What we mean by that is that the original article page is going to need the following tag which is basically a canonical tag for AMP pages:

<link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>

If you want to make your content eligible to appear in the demo of the Google Search news carousel then you need to make sure you’re using Schema correctly. Schema.org meta data is used to specify the type of content on the page. So examples of this are “article”, “review”, “recipe”, “video”, etc.. The AMP Discovery page also mentions this.

The Benefits of Accelerated Mobile Pages

The difference between normal pages and AMP pages doesn’t appear to be immediately clear. Here’s an example:

AMP

The differences between both are subtle, but the speed at which it loads is the most noticeable. AMP pages have had many of the elements that contribute to slow loading times removed so accelerated mobile pages load 85% faster than non AMP pages. Perhaps most noticeable is the compression of the images.

So how can AMP benefit you?

Improved Search Engine Ranking

Although accelerated mobile pages aren’t supposed to be an independent ranking factor, page load speed times and mobile compatibility are. AMP improves both of these so it’s likely your SEO will improve as a result of implementing it. That is, compared to the slower, unresponsive sites.

Increased Visibility for Publishers

If you’re a publisher then AMP is definitely for you. Search results will clearly display AMP symbols and these symbols can see your click through rates improve for these pages since users are going to start looking for the AMP logo and search results will stand out more.

Fast Page Loading for Mobile

We’ve already mentioned this we need to stress the fact. AMP loads seriously fast on mobile. This is important because mobile users are known to abandon a site if it takes longer than 3 seconds to load. So, to avoid losing potential customers you’ll want to get on board with this.

AMP Visitor Analytics

In recent times it has become more important to track visitor behaviour on websites. Publishers are able to choose from two tags that can track user data automatically like new vs. returning visitors, clicks/conversions, visitor counts as well as video and link tracking and more.

Support for Ads

AMP aims to support a range of technologies, formats and ad networks. The goal of it is to deliver ads that keep the content looking good and grab the viewer’s attention whilst the ads remain fast. This will help advertisers improve ROI on ad spend and increase their influence.

Tired of playing catch-up? We’ll deliver the latest trends and resources straight to you. Easy.

You'll find her incanting spirits from the upside down, or chasing her cats around town.