Amp Implementation In Umbraco

Written by on

If you are web developer, the chances are you have already had a client or someone in your marketing team mention Google's Accelerated Mobile Pages (AMP). So, what are Google doing here? Basically, making super speedy pages available on mobile by restricting the elements and scripts on a page. Read more <a href="https://www.ampproject.org/"> here </a>

Although initially rolled out for the news carousel at the top of search results on mobile, it seems Google are rolling this out to all mobile search results[1], not impacting on search ranking,yet.

Since we can't use all our go to elements and tricks as web developers for building pages (even a good old img tag!), here is a useful page documenting the tags allowed: <a href="https://ampbyexample.com/"> https://ampbyexample.com/</a> .

So we can just go the design team and tell them "sorry, no javascript and minimal css"? ... don't think this will fly so I had a think about how best to approach this. I will be giving examples in the context of an Umbraco CMS build, this site actually! I decided on making the home and blog pages valid AMP.

I won't go explaining everything there is to know about AMP implementation, there are loads of tutorials out there that explain way better than I can. This is just my experiences in trying to integrate it within an existing site, particularly a .Net sln with Umbraco.

Note: this site is Umbraco 7.5.3 and using the Fanoe starter kit.

Conditional layouts

In my BlogPost.cshtml added a check for the ?amp=1 query string, rendering the AMP layout when it is matched and the master layout otherwise.

In the master layout you need to have a reference link to the AMP page: rel="amphtml" and in the AMP layout you need to have reference to the regular page: rel="canonical".

Beware of Visual Studio trying to help you!

Heads up, Visual Studio in it's attempt to help can cause chaos! You need to include a particular snippet in you AMP layout head tag[2], VS will auto format this code and cause this error:

"The mandatory text (CDATA) inside tag 'head > style[amp-boilerplate]' is missing or incorrect."

If you see this error, make sure you don't have any extra whitespace/ line breaks in this snippet. Save yourself the hour or so this took from me!

Umbraco Data Type Updates

As mentioned before, we cannot have some of our regular HTML tags. For example, an image. As the blog pages need to be suitable for both AMP and non AMP pages we need to make the content managed image render different markup depending on the amp=1 query sting.

I done this by adding a new content editor to grid.editors.config.js

and having new editor render for amp image (I copied the media-wide.cshtml from the template and edited).

Now in Umbraco we have this option to add an AMP image (used for the very image below!):

Beware of the inline style

Umbraco content in a rich text editor will make your AMP page fail validation as it has inline styles... a no no for AMP validation. Similarly any grid editors that put content in a tag with inline styles will need edited.

Validation

There is a handy Chrome extension for validating your AMP code [3], it will show if there is an AMP version of a regular page and give an indication of errors on an AMP page.

I went through a few iterations of thinking I have nailed it as it passed validation then when it was live a while Google Search Console would let me know it wasn't. So the validator will tell you if the mark up is valid but not if it will be accepted as an AMP page. One of the extra hoops to jump through was adding structured data to the page [4], this is the meta data to tell Google what to show in the results carousel.

The moment of truth

So I deployed the code, asked nicely for Google to index my AMP URL (in Google search tools) and a few days later, here it is!

I am totally aware the AMP version of my site looks terrible. So now I have managed to get it discovered by Google, I can work on making it actually usable!

The main point of this for me was knowing the implications of being asked to implement AMP on a client site and going through the pain mentioned above now rather than with a deadline,

If you have any feedback on how I have implemented this, do let me know: <a href="https://twitter.com/crgrieve"> @crgrieve </a>


References:
[1] http://searchengineland.com/amp-live-in-google-259109
[2] https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md
[3]https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc
[4] https://developers.google.com/search/docs/guides/intro-structured-data#structured-data-guidelines