What Is AMP Google: You Need It If You Want To Rank High

0
426
Accelerated-Mobile-Pages-AMP-square

What is AMP Google? AMP stands for Accelerated Mobile Pages

why do we need AMP?

What is it for?

Mobile users all over the world often experience frustration with delays in getting an HTML website to load on their mobile devices.

Google announced in October of 2015 that they would be rolling out Accelerated Mobile Pages, AMP, in February of this year.

The project is building a framework for existing HTML sites to create mobile versions of their sites that will load faster and make content more easily accessible for their audience.

Unlike the similar feature offered on Facebook, the initiative rolled out by Google is an open-sourced one that will allow everyone to get in on their project in hopes for maximum participation.

See all the companies that are behind this initiative:

They are also building a feature within the Google Search that prioritizes search results with AMP optimization, thus increasing visibility for websites that invest in updating their site with AMP capability.

The primary intention of introducing AMP is to improve accessibility, reliability and speed of web content without taking away any ad revenue generated, especially for digital media companies, like TechCrunch, BuzzFeed, etc..

Optimizing a website to this degree of mobility has always been possible, but it costs a significant strain on valuable resources because implementing it across an entire site without losing any content is a suicide mission.

Hence, the AMP platform is intended to optimize websites for mobile access while keeping costs down thus making it an attractive option for publishers.

Try reading the AMP version of this blog!

How does it work?

AMP consists of three parts which create a sort of framework for building an optimized mobile page using the content on an existing HTML Site.

Part 1 – AMP HTML:

AMP HTML works very much the same as traditional HTML but adds in several restrictions mainly on JavaScript for optimal performance.

It also includes several options as extensions that have been optimized for mobile access and allow for enrichment of content that would otherwise be outside of the capabilities of traditional HTML so that publishers aren’t losing anything from their presentation when they optimize their site for a mobile platform.

There is an online library that is offered to quickly render AMP HTML called AMP JS.

Another thing that one might notice when building the AMP Site from basic HTML is that some of the tags that would be attached as HTML tags have been replaced with AMP-specific tags.

These tags make for optimum performance of the customized AMP HTML components.

Part 2 – AMP JS Library:

The AMP JS library consists of all of the different HTML codes that have been customized for AMP and provides a JavaScript framework as a resource for managing mobile sites and asynchronous loading to make for a fast-rendering site.

Part 3 – Google AMP Cache:

Google AMP Cache will automatically take your website, cache and optimize it, using an optional Content Delivery Network that is proxy-based.

The way that it works is that it loads everything from one HTTP 2.0 source to maximize efficiency.

It also offers a validation system to ensure that everything on a page is within the specifications to run AMP HTML thus ensuring that the page will always work.

Google also offers a version that will log any error codes during the validation process and automatically notify the user of ways to further enhance performance.

How to Go About AMPlifying an Existing Site

Technique 1 – Keep Two Versions:

There are many things to consider when converting an existing site into an AMP version or creating a separate AMP site.

One thing that is important to mention here is that third-party JavaScript is not allowed on an AMP.

It is suggested that users looking to convert or create an AMP site create and keep two different versions of each thing that is posted to their site, one that is standard HTML and optimized for a personal computer and one that maintains the requirements for AMP.

Technique 2 – No Third-Party JavaScript

There are certain limitations within creating an AMP site that should be considered along the way throughout this process.

Aside from the third party JavaScript, AMP also does not allow the use of third-party form elements such as the ability for users to leave comments directly on the page and other forms of that nature that one might be used to having on the their regular site.

Though some work-arounds and hacks to this impediment have been established, this is also a good reason to keep two versions of everything so that these features can still be maintained on the primary website, but will not take away from the efficiency of the AMP.

Technique 3 – Media Specifications

Another thing to consider is the use of multimedia and how to specifically adapt these elements to fit within the AMP specifications.

The AMP-ing element must be applied to all images and media and has specific limitations as to the dimensions of images to make sure that they are able to be optimally viewed and loaded on a mobile device.

The biggest challenge is that many existing website’s images are probably not in accordance with these specifications and as such, adaptation may need to be made that are specific to every image currently hosted on a site.

Videos being hosted on AMP sites will also need to follow very specific guidelines and must also use a custom AMP tag when embedded.

There are separate extension components for YouTube videos that must be implemented here as well.

It is important to note that each piece of media will need to be individually adapted to meet AMP requirements.

Technique 4 – Modify Existing Templates

Many users will also need to adapt their site’s existing templates to accommodate AMP specifications on templates in order to properly size and format the page for mobile platforms.

There are specific extensions that will need to be added for custom fonts and as well as other features that might add sluggishness when loading the page.

Any style elements will still use common CSS properties but will contain specific AMP extensions.

Technique 5 – Articles

Pre-existing articles on a page will need to be individually modified in order for Google to be able to recognize the AMP version.

For each article that is desired to be detected as an AMP version of the article, there will need to be an AMP tag added to it.

Some AMP platforms will require further metadata elements to be added that indicate the type of content being displayed such as “article” or “video,” in order for these platforms to be able to host the site.

Technique 6 – Revenue and Ads

Many publishers voiced their primary concern with the implementation of AMP being that they would lose revenue from their site due to the fact that optimizing their site has often meant in the past that they minimize the amount of ads that are used to monetize their sites in an exchange for a faster load and swifter navigation.

However, AMP is actually being seen as a possible solution to this problem as one of the primary goals of Google’s introduction of the AMP platform is to help publishers in further monetizing their sites.

They have introduced ways to implement the monetization strategy of using ads while keeping in mind the users experience as the primary concern throughout development.

As such, they have introduced extensions and adaptations for the implementation of ads that will help to maintain the AMP platform in a way that accommodates ads but in ways that optimize site speed and performance from within the mobile platform.

Technique 7 – Analytics

HTML sites have used analytics for years to monitor the success and effectiveness of their sites.

This being such a valuable tool to drive business and increase traffic, the AMP platform has also incorporated built-in systems for monitoring analytics of each site as well. In order to ensure that these tools do not negatively impact the performance of the site by slowing it down, they have introduced two pathways for performance measurement.

Technique 8 – Page Tracking

The AMP-Pixel element is a simple tool that counts the number of views on your site. It can also be used to track certain pairs of views as well.

Technique 9 – Event Tracking

This AMP Analytics Extended Component allows users to track the number of interactions that viewers have within the content on a page.

Technique 10 – Social Interactions

This element allows a site to track the number of times that a person interacts through social media with their website or interacts through their website with social media.

Conclusion

Accelerated mobile pages, or AMP, is a platform that is being rolled out to enhance the performance and features of HTML sites for mobile devices.

It was designed with the user in mind for ease of loading and navigation while optimizing content and accessibility.

It was also designed with the publisher in mind to offer a platform that helps to monetize websites in a way that does not impact the quality and speed of the primary content.

While it will certainly take some time to adapt legacy sites, there are great results to be had in performance and profitability by moving to a world of mobility.