Add Accelerated Mobile Pages (AMP) For A Better User Experience

Google has launched an open-source (i.e. community driven) project called Accelerated Mobiles Pages – or AMP. You really need to understand this and set it up for your WordPress site to maximize your users’ mobile experiences.

What is Accelerated Mobile Pages (AMP)?

Per the AMP Project website:

“The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms”

Sounds like fancy marketing lingo, right?

What it means is having another version of your webpage that is optimized for mobile devices. The AMP page is stripped-down by removing code that wouldn’t look great on mobile anyway. Removing unnecessary code allows the page to load faster and look better for mobile users.

Because the user experience is better, Google often gives priority to these pages in search results when the searcher is using a mobile device.

What does an AMP page look like?

As an example let’s check out the site for Maximize Your Money’s “What is financial coaching?” page.

That website runs the Avada theme, which is beautiful and responsive. “Responsive” meaning it automatically adjusts to various screen sizes – including mobile screens.

Here is what the page looks like on my iPhone 7 Plus:

What is financial coaching - not AMP

Not too bad, right? It’s basically a scaled down version of the page that shows on full-sized computers. It’s great that the Avada theme handles this for users automatically. But… it could be better.

Some of that formatting is unnecessary when viewing mobile and it slows down the page. It also makes for a less-than-ideal user experience.

Now let’s look at the AMP version of that same page:

What is financial coaching - AMP version

No, it isn’t as fancy, but it is more useful. (BTW you can make it fancy but this page hasn’t been formatted beyond the basic AMP conversion.)

Notice that the content starts much lower on the page. Without the social sharing, logo, menu and other “extra” things at the top of the page, it can better show the useful information that the visitor is looking for.

The page loads a LOT faster too. This AMP page scores about 30% higher on Page Speed tests.

In fact:

“The median page-load time of a Google AMP page is 1.4 seconds, compared to 5.3 seconds for standard mobile web pages”

That’s a HUGE different for the average website!

Why use Accelerated Mobile Pages?

Because it’s better for your mobile users! Also, Google prefers it. And as we all know, Google rules the web. 🙂

So in response to why you should use Accelerated Mobile Pages (AMP):

  • Faster page loads on mobile
  • Optimized page views for better user experience
  • Preference in Google search results for mobile users
  • It’s super-easy to set up!

AMP and non-AMP work together

The option isn’t AMP versus non-AMP pages. In fact, the intent of the AMP project is to have AMP versions of all pages. So you’ll have a regular page but also an AMP version.

This doesn’t create a duplicate content issue because Google knows these are both the same page just with different formatting.

When AMP is enabled the version is automatically available just by adding ?amp to the end of the URL. Yeah, that’s really all it is.

So for the example above it would be …

What is Financial Coaching?

… and the AMP page at …

https://maximizeyourmoney.com/what-is-financial-coaching/?amp

… or …

https://maximizeyourmoney.com/what-is-financial-coaching/amp/

… if you have pretty permalinks enabled.

How to enable AMP pages on WordPress

Setting up your WordPress website to support AMP pages is thankfully very easy!

There is a plugin by Automattic – just called “AMP” – that will create an AMP version of every post and page on your site. You can find it easily in the plugins section of your site or here: WordPress AMP.

After installing the AMP plugin there isn’t much else to do. In fact, you can do nothing and AMP pages will start working.

There is some minor additional configuration available if you want to make some tweaks to the formatting of your default AMP pages. From within the WordPress admin pages just go to Appearance -> AMP and see the few options listed there.

Do AMP pages need to be submitted to Google’s index?

Once you have AMP enabled, how does Google know about the AMP version of the pages? Do you need to now submit all those pages into the Google search index?

Thankfully NO.

The AMP plugin – per AMP specifications – adds some hidden code to each of your page pointing to the AMP version. So when Google looks are your regular pages for indexing it will find that tag and also index the AMP version. Then when someone is searching, depending on whether they are searching from mobile or a desktop, Google will automatically present the version of the page that is most appropriate for the user.

Similarly the AMP page also has code that links back to the non-AMP version.

Now, if someone lands on a non-AMP page from mobile, they will NOT get automatically redirected to the AMP page. This isn’t forcing your users in any one direction. They would need to land on the page specifically – usually through Google’s search results.

Further customization of AMP pages

Now, if you want to take some extra steps to customize your AMP pages, there is another plugin called AMP for WP. You can find it in your Add Plugins for your site or here: AMP for WP. Note that this plugin is in addition to the one from Automattic, not a replacement. So you would want both plugins installed for the advanced features.

Once the AMP for WP plugin is installed you’ll have a new WordPress admin menu section named AMP. Additionally your posts and pages will have a new section at the bottom of the edit pages that allows you to create a totally custom AMP version if desired.

Making these additional changes and configurations is definitely a more advanced function. If you don’t have AMP running at all right now, don’t sweat the advanced settings. Just enable AMP across your WordPress site so Google will start indexing the pages for search results.

As always, the sooner you get into the Google index, the better.

Go AMP-up your pages

So now go AMP-up your pages. There is really no reason at all not to. And if you aren’t running AMP, you’re missing out… as-are your mobile site visitors!

Installation Walkthroughs…

How to install the AMP WordPress plugin by Automattic

TRANSCRIPT

in this short video we’re going to install the amp plugin for WordPress on this website I already wrote in this blog post the benefits of using amp which stands for accelerated mobile pages so let’s just go ahead and go through the wall three really quickly this plug-in that we’re going to install in this video is one that’s provided by automatic which is just very well known obviously for their integration with WordPress it has quite a few installs it’s very trusted and simple lightweight easy to use so we’re going to install that one first it’s just very basic it’s gonna get you up and running with some accelerated mobile pages and let you start enjoying the benefits of that so we’ll go to our plugins section add a new plug-in and if we just type in amp we’re gonna get a number of different plug-in results there the one we’re installing today is the one here by automatic has over 200,000 active installs I run it on some other websites it works perfectly fine so let’s go ahead and install it and now activate it so what we have now is underneath of appearance in the menu there is an amp section so this is going to show what an amp version of a web page is going to look like it strips out a lot of the unnecessary information just gives you the basics and it’s more of a useful user-friendly interface for mobile specifically it’s also going to load a lot faster again just kind of read the Balch list and you’ll figure out how that goes you can change some of the design stuff you can change the color see let’s let’s go ahead and pick a purple there just for the heck of it save and publish close out of there so this should immediately start to do that so we’ve got a page right here it’s actually the blog post that I’m going to link this video to and I’m going to add amp to the end of the URL here and boom it automatically created that amp version accelerated mobile pages version of this webpage so if somebody loads us up on their mobile device you’re gonna see the experience that we saw just a moment ago it’s gonna be very user friendly and it’s very easy to install so there you go go ahead and stall that you’ll very quickly and easily in just about a minute have accelerated mobile pages running for your website

How to install the advanced AMP for WP plugin (more features!)

TRANSCRIPT

in this short video we’re going to install amp for WP WordPress obviously this is a plug-in that’s gonna enable accelerated mobile pages for your website it’s quite a bit more advanced than the one that automatic produces see my other video for a quick walkthrough of the installation on that plug-in this one is still really easy to install there are a lot more configuration options though so if you want more control over how your accelerated mobile pages pages are going to look then this is probably the plug-in for you so let’s go ahead and get started we’re going to go to plugins and then add new you just type in amp amt you’re going to get a couple of different results that show up one that I mentioned in different videos this one here by automatic right now we’re going to install this one with 60,000 active installs installs quick and easy as most plugins are will go ahead and activate it it does require the accelerated mobile pages plug-in by automatic because it builds features on top of that since that was already installed on this website and again just referred the other video to quickly see that all we have to do is activate it right now okay I don’t want to subscribe okay so it is activated so we come over to a page this is an existing page we add amp to the end of the URL and we can see that there’s an amp page dynamically created for that so over here just some interesting things now instead of appearance amp which is what was added by the plugin from automatic there’s an entire menu for HAMP now feel free to go through here and play around with some of these settings you really don’t have to set any of them you already have the accelerated mobile pages running just by installing this but it is nice to have the ability to do some of these things so you can set some customizations for the home page there’s a page builder some different design stuff social sharing icons search engine optimization etc something else that’s interesting is we will go to a post let’s go to this post that we’re actually going to link to right here and what you’ll notice down at the bottom of your posts now with this second plug-in installed there’s going to be a special area for amp there’s a custom amp editor so we don’t want the default amp which you can see a sample of right here we can actually say use custom amp and then we can create an entire page we can paste some content in there we can make some changes we can make it very basic we could make it very complex we can make it a little bit more visually appealing if we want to this gives a lot of control over how our accelerated mobile pages look you can make these changes individually for any post or page on your WordPress website it’s nice to have this feature even if you don’t use it very often you can use it for a couple of individual pages and leave the rest of them default or however you want to handle it again it’s just nice to have that feature so I like having this plug-in installed on my websites just in case something formatting wise doesn’t look great because of a different plug-in that there’s a conflict or whatever I just like to have that control to be able to make those changes and I think you will also so there you go quick and easy to install and it’s a great benefit something you definitely want to have set up your website

 

Brad Kingsley

Leave a Reply

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