Understanding and Implementing Google Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages (AMP) is out and has been speculated to have two benefits for SEO. One is it will have a “Fast” label designation on search engine results pages, and the other is that it will be a ranking factor. As to how much of a factor, that is yet to be seen. I’ll take you through what AMP is and how you can use it to benefit your site’s mobile visitors.

What is AMP?

Accelerated Mobile Pages is an open-source coding standard for publishers. The aim for AMP is for publishers to be able to load their sites quickly on mobile since mobile responsive could be clunky and slow because desktop resources are heavy and plenty. If we’re going to be honest with ourselves, most of the elements of a desktop website is unnecessary for a mobile site.

Until recently, AMP was just for User Experience. Now, Google has backed it up – and is encouraging websites to follow suit. Much like how they heralded Schema.org and laid-low Dublin Core for Metadata.

Why is AMP Important?

Ever tried to load your site on mobile? Are you happy with the load speed? I know I’m not. Heck loading my site in desktop is taking long and I have a respectable amount of speed for my internet connection – but mobile? All I have is usually a clunky data plan with the mobile providers here in the Philippines.

Simply put, browsing on mobile while you’re on-the-go will mean that your internet speed is not always fast. So it’s best to optimize the experience of mobile browsing for all users (at least that’s what Google wants to happen) by standardizing a mobile version of your site with AMP. I’ll show you how to do it below.

Who will Benefit the Most from AMP?

I don’t believe that you’ll want to make your services or product landing pages into AMP. It would be stripped down of its first-impressions. That would defeat the purpose of your original design. So I don’t believe that everyone will be adopting AMP.

Thinking about our SEO Services site and how it would look like with AMP is just unimaginable. I think I’ll leave it as it is, thank you.

The sites that will benefit the most from AMP are publishing sites. Sites that produce content. So how you’ll apply this to your client is not by making their entire site into AMP. That might affect conversions negatively. Rather, you can transition your client’s blog section or news and updates section into AMP.

Actual Sites that Prefer Loading AMP

Try opening an article from Twitter from the native mobile app. you’ll notice that Twitter has its own browser now – and it’s not really loading sites fast enough. But if a site is using AMP then it loads fast even with Twitter’s native browser.

What’s the Difference Between AMP and Non-AMP Mobile Browsing?

One of the starkest differences is that AMP pages does not have a lot of stuff for a more complex user experience. Everything is stripped-down.

1. AMP forces you to use a streamlined version of CSS.
2. Javascript is not allowed at all – in fact, I’m still trying to figure out how to make share buttons appear on my AMP pages.
3. You are forced to use an off-the-shelf Javascript library that AMP provides you with – which forces your images to lazy load.

That’s it. Basically when you integrate AMP to standardize your mobile responsive pages, you are putting speed and readability as top priority over anything else – even over shareablility.

How can I Make AMP Work for my WordPress Site?

Here’s where things get interesting because you can actually integrate AMP in about 5 minutes for your WordPress site. Simply follow these steps:

1) Install the AMP WordPress plugin by Automattic

2) Activate the plugin – what it will do is append /amp on all your pages but what it won’t do is redirect mobile visitors to your /amp pages

3) So the next step is to edit your .htaccess file – you could use an FTP program to do this. I personally use Filezilla.

4) (Optional) Just in case you want to check if your AMP pages are working across the board: In your .htaccess file, paste this code:

RewriteEngine On
RewriteCond %{REQUEST_URI} !/amp$ [NC]
RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\-mobile|iemobile|iphone|ipod|\#opera\ mobile|palmos|webos) [NC]
RewriteRule ^([a-zA-Z0-9-]+)([\/]*)$ https://example.com/$1/amp [L,R=302]

Note that you have to change example.com to your site’s domain name. I explicitly made the redirect into a 302 because we don’t want all the to link equity to be passed on to your /amp pages since it’s merely an accelerated mobile page version.

5) Lastly, you will want to edit the CSS to make your Accelerated Mobile Pages look and feel more like your site. You can edit the CSS using FTP by going to your wp-content -> plugins -> amp -> template.php

You could see that SEO Hacker’s Accelerated Mobile Pages still look and feel like our desktop page design – without all the fluff.

That’s it! You should be rocking AMP in no time.

Oh and before anything else, make sure you’re using rel=”canonical” tags to your original pages. Just to be sure to keep anything Panda related off your back.

How can I Make AMP Work for my Site if it’s not WordPress?

It’s not as easy as installing a plugin but it’s definitely more rewarding. You will have to go to the AMP Project’s site and learn how to integrate it via hard-code, hands-on.

FAQs

Why aren’t my AMP-specific features appearing on tablet or desktop?

AMP-specific features on Google, such as the Top Stories carousel, are currently available only on mobile. Although AMP itself works on all device types, including desktop, there are currently no plans to expand AMP-specific features to non-mobile platforms.

Are AMP pages mobile-only?

No. Since AMP pages can be viewed on all device types,  build your AMP pages with responsive design.

How does AMP look on desktop?

AMP pages display equally well on both mobile and desktop screens. If AMP supports all the functionality that you need, you might consider creating your pages as standalone AMP pages to support both desktop and mobile visitors for the same page. However, AMP on desktop doesn't get search-specific features in Google Search results.