Felipe Bazon

Mobile SEO: Implementing AMP for Success

Implementing AMP on your website can be as simples as installing a plugin on WordPress but in order to harness all the benefits, you need a bit more than that.

In order for any web page to reach as many people as possible, it has to have a high chance of being seen. One of the main reasons a web user might turn away from a website is because it is failing to load in good time, or is being unresponsive.

Commonly, this can happen on mobile, and yet mobile web surfing is increasing year upon year. Clearly, businesses need to step up to the mark and work on improving their mobile functionality.

This is exactly what implementing Accelerated Mobile Pages does, and it is therefore highly important to make sure that you are doing it right. How can you ensure you are implementing AMP for greater SEO success?

Understanding AMP

To make anything work in your favour, you first need to have a solid understanding of how it works. Essentially, AMP is a standard for web publishers which you want to try and adhere to as much as possible. If you get your AMP right, it means that your website will load quickly and effectively on mobile devices, as well as standard desktops.

Once you start to look into it, it soon becomes blisteringly obvious that many of the design elements which serve to make a website pretty or functional on a desktop are not necessary for mobile, and in fact can have the opposite effect. This leads to clunky, unresponsive sites – and that is bad news for the SEO.

How AMP Works

To put it simply, AMP relies on three essential parts. Firstly, you have the AMP HTML. This is a language, made as a subset of the larger HTML language, which can be used to more quickly and easily ensure that your web pages are responding well on mobile.

For those with a prior understanding of HTML, it is unlikely that this will cause too many problems, as it is essentially just a few more custom tags and properties. Regardless, it is an important part of the trio.

There is also the Javascript framework, which is useful in managing resource handling so that the website is less likely to crash upon loading. The third part is optional but worth looking at if you are interested in making AMP work as well for you as possible. It is a Content Delivery Network, which works by taking your AMP-enabled pages and automatically making a number of changes to improve performance.

As you can see, there are many layers to the AMP process and done right it can make a difference to how well your website loads and runs on mobile. But how do you actually go about making it happen, and implement it on your own website?

Starting the AMP Implementation Process

The first thing to remember is that AMP requires that you keep two versions of every page. You will need one, essentially, for desktop, and one for mobile. AMP is made in such a way that many of the desktop gimmicks will not be permitted, so that means no forms and no third-party Javascript. If you have ever wondered why mobile sites can lack certain elements, this is often the reason.

These restrictions might require you to rewrite your site template. Depending on what is going on in your website, this could mean a couple of simple tweaks, or you might need to make a larger, far-reaching change. It all depends on the situation.

For WordPress sites, the process is alarmingly simple. The first thing you need to do is install the official WordPress AMP app, easily obtained through the GitHub page. This plugin installs like any other, and then you just need to change ‘/amp/’ to an article page on your choosing.

Once that is done, you will need to focus on validating the AMP version of your site. Google will pick up on the changes before long, but it might sometimes take a little longer if you continue to make more and more change to the page, so bear that in mind.

To validate in Chrome, go to one of your AMP pages and append ‘#development=1’ to the end of the URL. Open up the console, and you will either be faced with a list of issues, or it will say that the AMP validation has been successful. Usually, you will need to validate each page manually, so be prepared to spend some time doing just that at first.

Aligning With Google Analytics

In SEO terms, paying attention to Google Analytics is always going to be a major concern. It tells you plenty of what you need to know in order to ensure that your website is operating in the best possible way for SEO, so you need to keep an eye on it. It is also important to ensure that you are aligning your Google Analytics with the AMP pages, in order to improve the way that AMP is helping your SEO progress.

All you need to do here is edit the ‘amp-post-template-actions.php’ file. You can do this in WordPress itself, via the dashboard, and it is often the easiest way to do so. Alternatively, you might decide to go to the PHP and do it from there. However you do it, you need to make sure that you are able to track your AMP pages with Google Analytics so that you can gather as much data as possible and so ensure that you are doing the right thing.

You will soon be able to tell whether or not you need to make any changes, and if you do then it is just a matter of ensuring that you do so with your basic understanding of SEO in line with that. Match up those two essentials, and before long you will have AMP-enabled mobile pages which you can apply SEO to in just the same way as any other page.

Done right, this is a great way to bring in more people to your website and to gradually improve your site’s appearance on the SERP. It is worth looking into, even if only for some of your most important articles, as it will mean you are accessible to many more people – and that is always a good thing on the web, especially for your business’ SEO.

AMP Myths Debunked

Stone Temple recently published findings from 10 case studies where they’ve debunked 4 myths about accelerated mobile pages. I will cover them briefly here, but I strongly advise you read the full article here.

Myth 1: Only news websites benefit from AMP

Initially, AMP was indeed aimed at news websites, meaning that the technology was almost impossible to implement on service and product pages. The initial traffic boost from the AMP Carousel and implementation support from Google itself were big incentives for publishers to adhere to it.

That is no longer the case. AMP can and should be implemented on all types of websites. From blogs to B2B websites.

Myth 2: AMP is not for E-commerce websites

That was certainly the case when AMP was launched publicly in February 2016, but since then things have changed. The introduction of AMP Live List Components and AMP Bid Component enabled more interactiveness and a wide array of dynamic components that made it possible to create category and product pages, as well as, E-commerce home pages using the accelerated mobile pages technologies.

Myth 3: Build it and they will come

This tip is for WordPress users. Do not think that by installing a couple of plugins your AMP problems are solved. Most plugins do not offer a good enough level of customisation and do not provide the “session stitching fix” to track AMP data on Google Analytics as previously mentioned in this article.

So if you opt to use an AMP plugin make sure you test every page’s functionality before going live. From menus to calls to action, everything needs to be thoroughly tested.

Myth 4: AMP and Design don’t get along very well

Another problem related to automatic AMP plugins. Plugins create a stripped down version of your pages. while this might work for content pages, it can be a huge problem for product and service pages.

Contrary to what many people think, accelerated mobile pages can and should be customised to a website’s visual identity. Not to mention that, according to Stone Temple findings, hand-coded AMP pages can be 4 times lighter than their plugin siblings.

chart comparing implementing amp hand coded pages against plugin pre made pages

Newly Introduced Features

Flexible scrolls with position observer, responsive sidebars, improved analytics tracking for videos and fluid ads are amongst the new featured introduced recently. I won’t overload you with information, but you can find further information here.

Conclusion

Together with PWA’s, AMP is the technology to go to if you are looking to enhance your website’s overall mobile performance, from loading time to organic rankings. While they still lack optimal user experience features they can be a game changer for your Mobile Marketing Strategies.

Do you have AMP experiences you would like to share with us? Feel free to post them in the comments below.

Need help with your AMP Implementation? Drop us a line and will get in touch.

Tagged: , ,

Comments (7)

  1. Maralyn Shaeffer

    I’m a fan of AMP when browsing on my phone as it is so quick, I just wish more websites used it.

  2. James

    Great write up. I haven’t really looked into this before but this helped me a lot! The detailed breakdown has given me a much better understanding, plus I can now implement AMP on my own site.

  3. Bruno

    i have followed a lot of tutorials of how implementing AMP. And now waiting for sucess results! Thanks!

  4. Rafaela

    This article is exactly what I was looking for. It has tons of valuable information that I will now be able to use to implement AMP on my website.

  5. Anthony

    Implementing AMP o a WordPress, even without a plugin, still very simple to do so, due to the templates available and the coding language. What about if I wanted to implement AMP non-wordpress sites for example?

    Are there any other references you could recommend?

    • Felipe Bazon

      Hi, Anthony thanks for your comment.

      As a matter of fact, there is, recently I’ve come across https://ampstart.com/. It has quite a few templates and components that you can use in just about any site.

  6. Adam

    I’m developing a new website for my company and AMP is a top priority. But I had completed forgotten about the integration with Google Analytics, thanks for the heads up.

Leave a Reply

Your email address will not be published. Required fields are marked *

HEDGEHOG DIGITAL LIMITED

Get in touch...