An Actionable Guide to Setting Up AMP

To speed up the content upload time, Google introduced Accelerated Mobile Pages (AMP). The technology may look like a Google’s attempt to compete with Facebook Instant Articles and fast downloaded content options developed by other companies. It provides obvious benefits for some platforms, while it is not that helpful in some cases. The post below describes the technology itself and the setting up process. The AMP integration is not so difficult, although it has some specific features to remember.

The Short History of AMP

The rapid and inclusive penetration of mobile technologies in the daily lives of ordinary people could not remain outside the focus of the largest search engine – Google. So, in October 2015, they published the post about the new technology that became available for mobile web developers.

In fact, this technology became a finishing touch of a “mobile-friendly” policy that Google has been supporting in recent years. Firstly, they introduced the algorithm that ranked the sites optimized for mobile devices higher. Later, they developed and introduced a completely new free tool for mobile content optimization of landing pages – AMP. To find out the difference between AMP and mobile-friendly pages, check out this article and the interview with Duane Forrester.

The Basic Components of the AMP Technology

Before talking about the AMP integration on the site, you need to find out and understand what this technology is all about. If considered from a developer’s point of view, it consists of these three components:

• AMP HTML is the same well-known HTML5, but with modifications (some standard tags are replaced with specially designed ones for AMP);

• AMP JS is a new library, which provides an access to the new tags, and allows optimizing the resource download speed by directly controlling it.

• Google AMP Cache is a CDN proxy server-based network caching AMP page. Due to the aforementioned, there is an increase in the amount of content, scripts, and images on the client’s side download speed, as they are “drawn” directly from the nearest source via HTTP 2.0.

Check out the example below:

AMP 1

 

AMP 2

 

This technology has completely changed the way users interact with the publisher’s website, because

Users do not visit the website – they see the article content directly in Google, where it is uploaded from cache;

Navigation through the articles looks like a slider carousel, which means that you can scroll AMP pages left and right, going from one news to another.

The card of the article occupies a significant percentage of space on the search engine results page and is supplied with a special icon that informs the user that this is an AMP page.

Who Should Try AMP

You should understand that AMP is not a must-have for a number of categories of sites. For example, in case of traditional E-commerce projects, the directory layout by using AMP will not work.

If a particular E-commerce project has a content part (for example, a blog) with an audience of readers and frequently-updated articles, the AMP implementation is quite helpful. The marked pages can get into the Google news block and become an additional point of interaction with the brand.

Content providers, who monetize their resources by placing ad units, should implement AMP to get a tape in the news, so they may collect the additional traffic in a new, free way.

Implementing AMP

From the moment you make a decision to implement AMP on your website, it is necessary to adhere to a simple algorithm that allows you to perform all the steps with ease. But before we move on to it, note the following few specific AMP features that determine, in fact, the very way of integration and choice of tools to solve this problem:

Speed up the content download in the reading pane by several times using AMP asynchronous scripts.

Submit styles in a separate tag «style amp-custom»; remember that their size is limited by 50Kb.

Set the height and width of the graphic elements (pictures and animations) within the HTML document.

Replace non-supported custom js-scripts using the AMP JS library.

Use the link or the CSS @font-face to download fonts.

All these features (even if they do not convey anything to your mind) directly affect the speed and the ease of the technology implementation.

How to Set Up AMP Automatically

Well, the actual implementation algorithm is the following:

1. Check, whether or not there is a ready solution for AMP.

Yes – use it and control the validity of the output. Examples of the ready-made solutions for the most popular blogging CMSs are the following:

WordPress – https://wordpress.org/plugins/amp/

Drupal – https://www.drupal.org/project/amp

Joomla – https://weeblr.com/joomla-accelerated-mobile-pages/wbamp

No – do the integration manually as explained in the next section of this article. There, we will talk about the limitations that should be taken into account.

2. Check, whether or not you need a functional form for the collection of leads.

Yes – use the “crutch” to insert the desired custom js-code through the “amp-iframe”. For more information, click here.

No – skip this step.

3. Check, what method of page tracking meets your needs.

• AMP pixel allows monitoring the statistics of page views according to GET-request. It perfectly suits for uploading data to a third-party or custom statistics services.

• AMP Analytics allows organizing data transfer to Google Analytics and tracking user activity directly on the page.

Both methods with code samples are described here.

4. Check the validity of the pages’ code using the ”AMP Test” tool in your Google Search Console.

How to Set Up AMP Manually

The majority of trustworthy, highly popular online media do not use boxed CMS solutions. Usually, they are built on custom engines, and therefore, an AMP technology integration falls on the shoulders of the developers. However, this is not a difficult task for a competent expert. The basic algorithm includes the following steps:

1. Create page templates in AMP format: rewrite your main template by using special amp-tags, disable dynamic elements, set fonts and specify image styles according to the requirements mentioned above.

2. Fit templates by using the automatic algorithm or manually (typically a ‘no-no’ option for larger sites, but a good solution for smaller ones).

3. Set up analytics by integrating a tracking pixel or Google Analytics code.

4. Test the validity by using the “AMP Test” in Google Search Console, in particular, the moment of pointing the special tag from the main page of the site to the amp-page, while rel = “canonical” is pointing in the opposite direction.

Conclusion

AMP is especially useful for the sites of publishers and content distributors. Although integration may look complex, AMP has a simple algorithm and can be automated on both sites that use popular CMS engines and custom platforms. By following a simple algorithm described above, you can build up this process without too much effort and risk.

Leave a Reply

avatar
  Subscribe  
Notify of

Recent posts

How to enter a new market using PPC advertising | Case Study

December 1, 2020

How to enter a new market? This is the question lots of retailers who successfully promoted their products within certain regions frequently ask. Marketers tend to believe that display advertising is the easiest way to market a product when entering a new market. In this article, we share the case of an international player and Continue reading >

How to find expired domains: best places to buy expired domains with traffic

November 27, 2020

Imagine a perfect SEO world with traffic coming non-stop to a newly created eCommerce website or a related blog, with the backlinks placed right where you need them, relevant keywords carefully selected for your business and even with its name and the domain name known among the target audience. Making this real is possible with Continue reading >

How to promote new categories of a brand & increase traffic with SEO | Case Study

November 11, 2020

Becoming top-of-mind in a certain niche or industry often makes a brand feel like a hostage of their own name. This means when the brand decides to change or expand the range of products they offer online, customers will need time to start associating the brand with the new product categories. Here SEO comes handy. Continue reading >

Outreach as a service: strategy and the benefits for eCommerce

November 5, 2020

Ahrefs reports 43.7% of the most top-ranking pages have some reciprocal links. The figures speak for the trust Google sees in the backlinks and the use of outreach marketing as a service. In this article we explain what is outreach marketing, figure out what are the benefits of outreach as a service and give the Continue reading >

Let's get the ball rolling

Please fill in this short form and we will be in touch with you soon

For any questions [email protected]

UK | USA | EST

+44 (0) 20 313 766 81
+44 7852 537715

Lincoln
The Terrace AT5,
Grantham Street,
LN2 1BD

+1 347 809 34 86

Las Vegas
6920 S. CIMARRON RD.,
Suite 100,
NV 89113

Tallinn
Roosikrantsi 2-K230,
Kesklinna linnaosa,
Harju maakond,
Tallinn 10119

CEE Ecommerce Report 2019

Based on the analytics data of 292 websites

enter correct name, please
enter correct e-mail, please

An Actionable Guide to Setting Up AMP

0
start now

Start now