views

Accelerated Mobile Pages (AMP): How to Get Started

Grow Your BlogLeave a CommentUpdated

Accelerated Mobile Pages (AMP): How to Get Started

Growing a blog: how to get started?

Besides the usual personal finance posts, I’d also like this website to be about growing a blog, overall optimization and performance improvement, in order to reach a larger audience. That’s why starting from now on, I will be publishing at least once a month a post regarding a specific feature to improve its core functions, whether it be regarding Search Engine Optimization (SEO), speed optimization (hence the AMP topic) or analytics. I’m also doing this to track what has been done on the long-term to improve this website!

I chose to start this series with a first post on Accelerated Mobile Pages (AMP) implementation because I just finished setting it up on this blog. This is a really important yet simple feature to implement, which you can easily configure, and it is designed to improve rankings on search engines but also user experience with almost instant loading time!

So here it is, the first post of a *hopefully long* series, regarding growing your blog!

What is AMP exactly?

AMP was first created as a collaboration between Google and Twitter. It stands for Accelerated Mobile Pages. This is an open source initiative, which is supported by a lot of major technology companies. The main goal of this project is to make web content to load faster for mobile users. In fact, it can theoretically load a page instantly when well configured due to the content being cached on Google servers.

You can visit the official website here.

Accelerated Mobile Pages (AMP)

Usually, most of the elements of a *classic* website are not useful for a mobile version. This is why AMP was designed in the first place.

Nowadays, speed is truly an integral part of web design and studies have even shown that:

“Forty percent of people abandon a website that takes three seconds or more to load.”

This is a gigantic amount of potential loss, so that’s what AMP is all about: speed, page loading time and improving user experience!

It was first launched back in February 2016 (but was only available for selected publishers), but it became widely adopted just recently (September 2016) when Google expanded it to all mobile search results.

The lightning bolt is Google’s way of telling users that a specific search result is configured with AMP. If you haven’t already, on mobile search results you’ll start to notice websites which have configured AMP as they have a lightning bolt icon next to them. This is done to encourage and to explain that choosing this search result over another will be loaded blazing fast.

Accelerated Mobile Pages (AMP)

AMP seems not to be a ranking factor for Google yet, but this might change in the near future with the whole world transitioning to a more mobile-friendly environment. So, while it is not currently an independent ranking factor for SEO, having a mobile friendly page certainly is, as is page load speed, two items which you will quickly benefit from in adopting AMP.

It is very similar to Facebook Instant Articles (FIA). However, Instant Articles are only limited to Facebook’s platform, and more specifically to their mobile app, whereas Accelerated Mobile Pages are platform-agnostic and can be served for any browser, app, or web viewer.

Overall, AMP pages are designed to be lightweight, more content-oriented and are easier to read than traditional pages. As an example, on the right you can see a *normal* mobile view from a post on this blog, whereas on the left that’s the AMP version of the post.

Accelerated Mobile Pages (AMP)

As we’ll see later on this post, implementing AMP can be as easy as enabling a plugin on WordPress or adding additional code to your site.

Benefits of using AMP

As explained, Accelerated Mobile Pages (AMP) are stripped back, minimalist version of pages in order to make them ultra-mobile friendly leading to three main great benefits:

  • Content is hosted on Google AMP Cache, making it appears instantly when users click on your link in the search results.
  • Increased mobile visibility in search results (with the lightning bolt icon).
  • Improved search rankings (this is still a work in progress, but is definitely going to be a ranking factor in the near future).

Accelerated Mobile Pages (AMP)

Limitations

One of the biggest change with AMP is that it doesn’t have a lot of features for a more extended user experience (this is also what makes it so powerful!). When you implement AMP, what you are effectively doing is putting readability and speed as top priorities over anything else – even over shareablility. Everything is simplified to make pages load instantly and AMP restricts what you can do in HTML pages:

  • CSS: mandatory use of a streamlined version.
  • Javascript: not allowed at all, but you can use an off-the-shelf Javascript library provided by AMP.

AMP uses only a limited set of HTML, JavaScript, and CSS. This means that you cannot add certain widgets and features to your mobile AMP website. For example, this limits your ability to add smart optin forms, Facebook plugins, and dynamic scripts.

These limitations are not specifically a problem as the plugin required to implement it take care of everything on the technical-side (adjusting HTML, stripping unused code, etc.).

So, do you need AMP?

If quite a significant part of your traffic comes from mobile or tablet searches, then you will definitely benefit from implementing AMP. Also, If you want to improve, maintain and maximize your SEO strategies then yes you should go for it.

The increase in click-through-rate that your pages will have will boost your ranking considerablyClick To Tweet

AMP pages offer a far better user experience when people are on slow connections, when they’re low on data or if they just enjoy distraction-free pages. Much like when viewing cached pages, load speed is optimized to the point of being flawless.

Additionally, once users adopt using AMP results, the increase in click-through-rate that your pages will have compared to your competitors will boost your ranking considerably.

Finally, given the fact that it’s really easy to implement, there’s no real reason not to adopt it as soon as you can!

Accelerated Mobile Pages (AMP)

How to implement AMP

Implementing AMP is really quick and can be done in as few as 3 simple steps:

  1. Install and activate the AMP official plugin for WordPress.
  2. Once activated, head over to “Appearance” then “AMP” page to validate how your site looks on mobile devices with AMP.
  3. Basic customization: only a few options are available with this plugin, which are changing the header background & link color, the text color and the overall color scheme.

Don’t forget to click on the save button to store your changes.

Currently AMP only support posts. It is not yet available for pages types, but it will be soon (it’s already planned in the roadmap features).

And that’s it! You do not need to do anything else to implement it, the plugin will take care of everything for you. You do not even need to re-index your page, as Google will be able to identify that an AMP page is available for a specific post and will then link to it when users search for your blog on a mobile device.

Do not worry about having duplicate content, because websites won’t show two versions of the same page in the search results, one mobile and one AMP. Rather, if any of the pages in the search results have an AMP version, Google will show that instead of the mobile or desktop page that would normally appear.

Customizing AMP

The AMP plugin for WordPress comes with very limited customization options. However there’s a very good plugin from Yoast which you can use to add few more customizations. As I already said in my complete guide on how to start a blog, one of the best SEO plugin out there is Yoast SEO, and the AMP plugin is seen as an add-on to the Yoast one, so it can be integrated perfectly with your SEO settings:

  1. Install and activate the Glue for Yoast SEO & AMP plugin for WordPress.
  2. Upon activation, navigate to “SEO” then “AMP” page for the plugin settings.
  3. Advanced customization: on the “Design” tab you get to customize some specific stuff for the AMP post types, whereas on the “Analytics” tab you get to include an AMP-specific analytics tracking code if needed (learn how here).

Regarding what can be customized on the “Design” tab, you can choose more specific colors, more custom design options and you can also upload a default header image which will be used when a post does not have its own featured image as well as a logo.

Verify implementation

After you’re done installing, configuring and customizing AMP, you still won’t be able to see your AMP specific pages anywhere, which is normal because this is up to search engines to load these specific URL.

But you can easily validate your implementation: simply visit any single post on your website and add /amp/ at the end of the URL to verify its implementation (remember it’s only working on posts and not on pages at the moment).

If I take an example, a regular URL for a post on my blog would be like this: https://financeforgeek.com/how-to-start-a-blog-on-bluehost/ while the AMP URL would be this one: https://financeforgeek.com/how-to-start-a-blog-on-bluehost/amp/

Your original post was not replaced, but what happened is that it automatically links to an AMP-ready version of this post. If you view the source code of the original post, you will find this line in the HTML:

<link rel=”amphtml” href=”https://financeforgeek.com/how-to-start-a-blog-on-bluehost/amp/”/>

This line tells search engines and other AMP consuming apps/services where to look for the AMP version of the page.

After a few days (when Google will re-index your pages), you should be able to see your AMP posts in the search results, with the lightning bolt telling users it is now AMP’ed:

Accelerated Mobile Pages (AMP)

After you’re done checking with the implementation, you should be checking if Google sees it the same way that you do. You can easily check this using the Google Search Console.

Log in to your Google Search Console dashboard and then click on Search Appearance » Accelerated Mobile Pages.

Don’t worry if you don’t see your AMP results right away. It may take a while for Google to index your Accelerated Mobile Pages and then show data in Google Search Console. There’s no need to re-index your AMP-specific pages (the URL with /amp/) because Google will recognize this automatically and it will then provides the user with these specific versions instead of the *normal* ones when users are searching from a mobile device.

Accelerated Mobile Pages (AMP)

Next steps

Once everything is installed, customized the way you want and you’ve verified its implementation, you’re basically good to go. Nothing else has to be done on your side as all your new posts will be pumped up with AMP-specific versions as soon as you hit “Publish”.

Just to be sure, if you want to be extra cautious, you can still check from time to time that your AMP pages are still validated and indexed:

  • Use Google Search Console’s AMP Validation to see if there are any errors across your site. Go to google.com/webmasters/tools/home. If you get any errors, you can use the official AMP validation tool to check why.
  • Verify that your new posts get formatted the way you want (simply add /amp/ to the URL to check this).
  • If you want to learn more about AMP and its upcoming new features, go to ampproject.org/docs and ampproject.org/roadmap. There’s also a really nice infographic regarding the first year of AMP and its results.

AMP project also gets new features on a regular basis, but the main reason to implement it in the first place was to keep your mobile pages light so try to stick to this purpose!

AMP is truly powerful and as an upgrade to mobile-friendly pages, it helps you meet Google’s guidelines stating that you should optimize your site for speed. If you want to go all-in regarding mobile and loading time improvement, the next logical step would be to setup Facebook Instant Articles, but implementing AMP is definitely a first good step towards growing your blog!

Let me know if you have any suggestions or ideas regarding my post, and feel free to share and comment below this post!

– Vincent

What about you? Are you planning on implementing AMP or did you already?

bluehost-logoBluehost - Are you convinced that you should create your own blog? This is the hosting company that I use for this blog. It is really cheap and customer service is awesome. If you register with my link, you get a special offer of $3.95/month (instead of $7.99/month). Now is the time to start your blog! Check out my complete guide on how to start a blog on Bluehost.

Enjoyed Reading? Join other people who get fresh content from me.

Leave a reply

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