Accelerated Mobile Pages (AMP) – How they can help to improve website ranking?

An accelerated mobile page is the version of a document that is specially tailored for use on a smartphone. Because it should be fully loaded within a few milliseconds when it is called, the code must be reduced to a minimum – the CSS and Javascript of the actual website are not loaded and even the HTML is greatly reduced using special AMP tags.

The alarm bells will now ring for webmasters with design demands – what should a website look like. After entering the relevant search terms, you can see the integration of the Accelerated Mobile Pages in the SERPs and call up some AMP pages that are already live.

Better rankings for mobile sites

The current AMP integration in the SERPs provides for an attention-grabbing and probably just as click-strong carousel box, which will in all probability pick up a lot of organic traffic from the regular organic mobile search results due to its prominent placement. It is currently unclear whether AMP pages will also appear in the regular organic search results and whether the current integration will continue.

AMP for WordPress Development

To make the implementation of Accelerated Mobile Pages a little easier for webmasters, Google recommends the AMP WordPress plug-in from Automatic. It provides a standardized template that automatically makes the technical implementation (Canonical & Co.) correct.

The template can and should be fine-tuned. Ideally, a subfolder called “AMP” is created in the main directory of the active theme first. Store the edited AMP template files here – this way the changes will not be overwritten with the next plugin update.

Order AMP templates

In the WordPress backend under Plugins, AMP can be selected in the sub-item “Editor” – the required template files are displayed here.

Attention: Please do not edit directly here, but put the affected files in a separate folder in the active theme via FTP!

The style file is primarily required for easy editing. Here, as usual, CSS instructions and classes can be added and edited – the display becomes a lot nicer.

Furthermore, the WordPress logo must of course be replaced by your own. For this you can either upload a site icon or edit /single.php and save the link to the desired icon in the $ site_icon_url.

For changes that require some programming expertise – for example the implementation of a custom header, etc. – detailed documentation is provided in the plug-in information on Github.

AMP and Google PageSpeed Insights

A few negative comments about the plugin make it clear: It becomes problematic if you try to check the AMP version of a page for its speed using Google PageSpeed Insights. The PageSpeed Insights algorithm checks the specified page for various best practices in terms of website performance, but the actual loading time and the weight of the page do not play a role in the scoring – the point score may show a rather mediocre result.

But don’t worry: if you check the actual page load time in tools, it looks a lot better thanks to the minimal number of requests and the greatly reduced page weight, and provide you with improved website performance.

Integrate Google Analytics on AMP pages

On the official Google developer pages there are some hints and sample code for implementing Google Analytics on Accelerated Mobile Pages. The standard analytics tracking code is not used here, but its own analytics tags.

An exemplary tracking code:

<AMP-analytics type = “googleanalytics” id = “analytics1”>
  <script type = “application / json”>
  {
   “vars”: {
      “account”: “UA-26110687-2”
   },
   “triggers”: {
       “trackPageview”: {
        “on”: “visible”,
        “request”: “pageview”
       },
       “trackEvent”: {
       “selector”: “# event-test”,
       “on”: “click”,
       “request”: “event”,
       “vars”: {
          “eventCategory”: “ui-components”,
          “eventAction”: “click”
        }
      }
    }
   }
   </script>
</AMP-analytics>

The Universal Analytics ID must be replaced with that of your own account. Google recommends creating a separate property for the AMP project within the Analytics account.

Attention: Comments within the Analytics code invalidate the JSON. So, if you copy the code from the Google documentation, the “Replace with your Property ID” comment must be deleted so that the tracking works – otherwise the error message “Analytics config could not be parsed” appears. Is it in a valid JSON format? In the JS console.

AMP and Ads/Monetization

Ad serving in the AMP project is based on exactly this statement. So, Google offers the possibility of integrating ads in various formats from a wide variety of ad servers – but gives direct guidelines that should be met. It’s no surprise that ads should load as quickly as possible. However, Google also wants ads in AMP to be “beautiful and innovative” and to use the https protocol. The group will certainly specify these guidelines in the near future and expand the advertising options – so it will remain exciting.

There is already an AMP-ad component that is supported by the following ad networks: A9, Adform, AdReactor, AdSense, AdTech, Dot and Media, Doubleclick, Smart AdServer, etc.

Conclusion

AMP is currently of particular interest for editorial-driven sites – the implementation is definitely worthwhile here, precisely because it can be integrated (at least for WordPress-based sites) with relatively little effort and will generate a high level of attention in the mobile SERPs.

It remains to be seen whether Google will provide an adequate solution for ecommerce store or whether AMP will only serve as a “Facebook Instant Articles” competitor in the future and, accordingly, should only be used for news and articles.

Furthermore, Google AMP are enhancing digital marketing strategies, increase rankings and provide better mobile-friendly experience! If you wanted to stay competitive in the mobile market, you should be AMP optimized. If you are looking to convert your website or online store in AMP or in a mobile-friendly experience, explore our website design services!