Published on April 19th, 2016 | by Guest

Things You Need to Know About AMP (Accelerated Mobile Pages)

Mobile browsing is the new reality. Thus, the search engines (primarily Google) are looking for ways to enhance the mobile user experience (UX). Here comes the AMP (Accelerated Mobile Pages) Project – a mobile content distribution initiative that aims to make the mobile web a better place for the users.

Here are some things that you ought to know about the AMP Project.

1) AMP has three components

In rendering static contents faster, there is a need to dig deeper into how the web page is actually created. AMP includes AMP HTML, AMP JS, and Google AMP Cache.

AMP HTML includes custom tags and properties as well as several restrictions. AMP HTML varies from the regular HTML, which means if you want Google to display your pages on mobile searches, you should use the former.

AMP JS is the JavaScript framework while the AMP Cache is the optional CDN (content delivery network). Both can make the AMP-enabled web page to load faster on mobile devices.

2) Web pages must have separate AMP versions

For the web page to appear in the carousel-like results, there should be a separate AMP version for such. The original page must include the specified tag which is – <link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>. This serves as the AMP page’s canonical tag.

Even if you use the tag, however, the two versions are completely different. For instance, specific JavaScript elements (i.e. forms and on-page comments) in the original page won’t appear on the AMP page. The AMP page is actually a confined version of the original page.

3) AMP has very distinct attributes

Since the goal is fast loading mobile pages, the Project also includes AMP-specific elements. Custom fonts, for example, take time to load. A special amp-font extension must be used to streamline the loading process.

The same goes with other elements including the multi-media integrated within the pages. For images, there’s the custom amp-img element. If your page uses animated GIFs that you want to make available on the AMP version, you must use amp-anim extended.

Furthermore, there are specific elements for videos. In embedding locally hosted videos, you should use the amp-video component. Nonetheless, if you are going to use YouTube videos, you should include the separate extended component called amp-youtube.

4) AMP can lead to better discoverability

Notably, it is completely okay to have an AMP version only. But, if you want to help Google find both the AMP and non-AMP versions of the page if you have both, schema.org meta data can help you with this.

While this might depend on the platform, it is advisable to put the right meta data on the platform that you want your pages to be displayed. Schema.org, most specifically, may help in specifying the content type of the page if it’s an article, recipe, review, etc.

Above are some good starting point to acquaint yourself with AMP. The mobile web is ever-innovating, and the AMP Project is one innovation that can benefit the users if done right. While the main goal is speeding up loading times, consequently the project highlights the necessity of prioritizing the mobile UX, which should be the core of the mobile experience in the first place.

About the Author:

Jeric is a Filipino blogger and a digital marketing enthusiast. He is currently working at Optimind Technology Solutions, a digital marketing agency in the Philippines that provide different kinds of services such as SEO, SEM, web design, mobile app development, and much more!

Tags: about, accelerated, amp, know, mobile, need, pages, things, webpages