Google AMP and Our Umbraco AMP project

Google AMP and Our Umbraco AMP project

AMP technology introduction

AMP (Accelerated Mobile Pages) is a Google technology which allows mobile devices to load web pages in a blink of an eye. It is intended for the whole English-speaking segment of the Internet. You can easily integrate it into your project, provided that you know some of its peculiarities.

  1. The technology based on a familiar HTML code. Some of the tags are replaced with AMP equivalents and some are restricted.
  2. JS uses the proprietary Google AMP js-library. Its functionality is not very versatile. There are just basic elements (mobile ‘burger’ menu, carousel, advertisements, analytics), so expect no beautifications or extreme functionality.
  3. Cache. Google indexes AMP page and caches it on its servers. When addressed, it gives customer the content from its server, not from your page. That’s all the magic!

It’s pretty logical, as all the effort is devoted to ‘slimming’ the page and making it load at the maximum speed. It’s done to satisfy mobile users, which are growing in numbers from year to year.

In this article, I would like to share my experience of creating AMP pages. What you see here is a fully implemented project. ‘Article list’ and ‘article’ pages were created using AMP technology, so if you read this article from your phone, you see the AMP version of a page.

AMP up and running

First of all, let’s create a new page. It will include a copy of content from the existing page.

Add an AMP attribute to the <html> tag, so it looks like this: <html amp>

Next, let’s turn our attention to the <head> section.
Add a link to the regular version of the page to the <head> section of the page: <link rel="canonical" href="urlDefaultPage"/>.
And vice versa, add a link to the AMP version to the regular page: <link rel="amphtml" href="urlAmpPage"/>

Schema.org

Later you should add a microdata section for search engines.

Micro formatting includes data for search robots to process. This allows to increase relevance for both search engines and users.

First off, microformat or microdata can be found in a snippet (description), which appears next to the site link in search results. A snippet contains a detailed page description, main page sections, a price span of goods, photos, addresses, phone numbers etc.

If you want to know how it’s done, follow this link: https://schema.org/

The result will look like this:

 {
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage": {
 "@type": "WebPage",
 "@id": "https://www.ukad-group.com/blog/gdpr-data-protection-act/"
 },
 "headline": "GDPR or EU Data Protection Act",
 "datePublished": "2017-10-18T15:08:10Z",
 "dateModified": "2017-11-08T16:44:33Z",
 "description": "&lt;p&gt";
The proposed new EU GDPR [General Data Protection Regulation] law extends the scope of the EU data protection regulation to all foreign companies processing data of EU residents. It provides for a harmonization of the data protection regulations throughout the EU, thereby making it easier for non-European companies to comply with these GDPR acts; however, this comes at the cost of a strict data protection compliance regime with severe penalties of up to 4% of worldwide turnover.
          "&lt;/p&gt;",
          "author": {
               "@type": "Organization",
               "name": "Ukad"
          },
          "publisher": {
               "@type": "Organization",
               "name": "Ukad",
          "logo": {
               "@type": "ImageObject",
               "url": "https://www.ukad-group.com/images/logo.png",
               "width": 145,
               "height": 66
          }
     },
     "image": {
          "@type": "ImageObject",
          "url": "",
          "height": 0,
          "width": 0
     }
}
</script>

AMP Styles

Then we are going to write styles for AMP pages. This section always starts with the following line:
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
</style></noscript>
Then we need to place a style tag. Every style of every AMP will be located in the <head> section. Usage of external style tables is restricted.
<style amp-custom>...</style>


Peculiarities of custom AMP styles:

  • Do not use !important;
  • There are no media requests: @media only screen;
  • There are no vendor prefixes except vendor Prefix-transform;
  • Only modifiers like opacity, transform and -vendorPrefix-transform are allowed for animations and effects;
  • Probably the scariest thing is that you are not allowed to break AMP classes and tags (className-amp, i-, amp- );
  • Moreover, styles shouldn’t weigh more than 50 kB.

AMP scripts

At the very end, before the closing tag </head>, we put a script section. It should always start with an АМР script
<script async src="https://cdn.ampproject.org/v0.js"></script>.
Next, we choose components from the ones available and add to our AMP-page. You can find the whole set of available components and examples to them here.
Using custom scripts are not allowed.

AMP content adaptation

When it comes to content, you should pay attention to the following:

  1. Use custom fonts:
    It’s preferable to add custom fonts using the cloud storages. For instance, you could use Google fonts:
    <link href="https://fonts.googleapis.com/css?family=Open Sans:400,700" rel="stylesheet">
    Using CSS rules like @font-face is also allowed, but it can decrease operating speed. This is also true for icon fonts.
  2. Check if there are no inline styles inside the tags. For example, you can’t use <span style="color=#000;"> – use classes instead.
  3. Use AMP-tags and components. You must replace the regular tags with their AMP analogs. For example, change <img> to <amp-img>, <youtube iframe> to <amp-youtube> and so on. Here you can see the full list of such tags.

Finally, you can check the code of your AMP page with a special validator.

No mistakes? Congratulations, you’re ready for the production stage!
After indexation, Google adds an AMP icon next to the page.

Ukad Amp

Final thoughts

AMP pages are ranked higher because they have high loading speed, which is one of the main factors for mobile search output.

The downside of AMP technology is that it can be used only for ‘light’ mobile pages without high functionality or the sections, the content of which needs to be loaded as quickly as possible. I’d say that AMP is most applicable to newsreels, article pages, blogs, live journals, simple information sites, landing pages.

But what about e-commerce? Giants of e-commerce are very concerned about users abandoning their web pages. As the quantity of mobile traffic grows more and more each year, they have found a solution: eBay and AliExpress have already introduced AMP technology and mark a 30-40% drop in the number of users who abandoned their pages halfway through loading.

Andrey Datsenko

Author: Andrii Datsenko

Front-end developer

  • AMP
  • Google AMP
  • AMP for Umbraco
  • Accelerated mobile pages
Back to Articles

Contact Us