Have you noticed the new lightning bolt icons in the search results of Google lately? Have you been amazed by how quick those pages load compared to traditional mobile sites? In today’s tutorial, you’ll learn how to set up accelerated mobile pages on your WordPress website quickly and hassle-free. We’re just gonna use a free plugin that gets the job done painlessly and I’ll show you how to do it in a step by step fashion so that your mobile site becomes lightning fast in no time!
But before we do, that let me show you the benefits of installing accelerated mobile pages (or amp for short) on your WordPress website or blog! Many big names are using AMP, including Twitter and Reddit, not to mention most news sites and many blogs and websites that rely on content marketing. Is it time for us to jump on the bandwagon as well?
The Importance of Speed
I love it when a website takes ages to load. Don’t you? Of course not! 😛 We all love it when a website loads quickly and flawlessly without bogging our devices down.
And guess what?
Google loves that as well. In fact, they rank websites that load fast better in their search results.
So, with Accelerated Mobile Pages, you make your website quicker, Google loves it because of that and ranks it better as a result. Not to mention the better user experience you provide to your visitors. After all, Google has come to understand that User Experience (UX) is one of the most important factors they should keep in mind when ranking pages, because at the end of the day that’s their job. To provide content that fulfills what their searchers are looking for. It’s almost certain that Google uses UX signals as a ranking factor nowadays.
Which leads me to mobile-friendly websites.
The Importance of Being Mobile Friendly
Did you know that more than 50% of searches today are performed on mobile devices? It’s true and I have actually seen the stats from my niche website which gets 12000 visitors per month at the time I’m writing this. What I mean is that it’s tested.
That essentially means that having a mobile-friendly website is important. But that is done with a mobile responsive WordPress theme, and most of them are mobile responsive these days. Why have AMP as well?
First of all, because the searchers will be able to reach the mobile version of your website that much faster. Secondly, because Google will certainly reward websites that adopt Accelerated Mobile Pages with better rankings. Talk about some benefits!
What is AMP and How Does it Work
AMP is simply Google’s open source project to make the web faster and more accessible to everyone.
Have you ever thought of people with poor internet connections? How difficult is it for them to load your website? Well, with AMP it’s not anymore. At least that is part of the goal. You can read more about the project here.
However, there’s absolutely no need to completely understand how it works in order to use it. No need for geeky coding or stuff you don’t understand.
Just know that Google caches your website on their server (which basically means takes a snapshot of it) and thus serves it much quicker to mobile searchers. With AMP you just provide Google with a super light version of your website without JavaScript, with a streamlined version of CSS, without pop-ups, without sidebars and without all the different baggage that make websites heavy. Also, your images are lazyloading. But before I make your head spin just focus on one thing.
AMP makes your website super fast and light. Simple as pie! For the guys that want to learn more and delve deeper into the inner workings of Accelerated Mobile Pages be sure to check out Moz’s Whiteboard Friday where they explain the geeky stuff in more detail.
Benefits of AMP
By now, it should be obvious that adopting Accelerated Mobile Pages on your website comes with numerous benefits.
Besides helping those poor mobile users load your pages quicker and have a better experience browsing your website, you also make the web more accessible to the masses. At the same time good ol’ Google rewards you with better rankings for being a pioneer and participating in its noble quest to make the internet faster and help serve the searchers better. Win-win anyone? As I don’t like stats and don’t want to bore you here, for the more sceptical ones, Search Engine Journal has created a guide with facts and some stats that support the benefits of AMP I’m listing you can check out here. Just ignore most of their guide on how to install amp because it’s gonna confuse you if you are following my guide here.
So, now that you know you want to get into the Accelerated Mobile Pages trend, let’s get to the step-by-step part of the tutorial.
We’ re gonna install AMP on a WordPress website and do so easily with one of the best plugins out there for the job. Can you guess its name? AMP for WP – Accelerated Mobile Pages :P.
Step by Step Installation and Configuration
The first step is pretty straightforward. Just install the AMP for WordPress plugin. On your WordPress Dashboard be sure to hover over the plugin section and click Add New.
Then search for the amp for WP plugin.
Now be sure to install and activate it.
If everything was done correctly you should see a screen like the following. Be sure to click no thanks on the email subscription (or subscribe if you want it makes no difference) and run the installation wizard, which will make choosing the basic settings of the plugin a breeze.
Just click start on the welcome page of the installation wizard.
Be sure to choose a logo for your website or skip the step if you don’t care about looks that much. In case you are curious this is the actual logo of my anime website.
I recommend using AMP on your posts for the sake of this tutorial for two reasons. First of all, AMP can get dysfunctional on pages and your homepage requiring you to make vital changes to them in order to function properly. Secondly, your posts are the pages most probable to get ranked on search engines that you want to get served to the readers as fast as possible. You could, down the road, use AMP on your whole website but using it on posts, for now, should be more than enough.
Be sure to add your Google Analytics code here in order to continue tracking your visitors. If you’re not familiar with Google Analytics be sure to visit this link.
Now choose a design for the amp version of your website. This is the stripped down version of it. Don’t overthink it. We can make customizations later on. After all, the point of an amp design is simplicity.
We’re good to go. Theoretically, you could do nothing else and probably be fine. However, I want to show you some more advanced settings that proved helpful to me. After installing the AMP for WP plugin you’ll see an AMP menu icon on your WordPress Dashboard. From here you can do many interesting things. You can explore on your own and play with the different settings. I’ll just show you the ones I have found helpful and important above all.
If you click on Settings you’ll get the following options.
On the SEO Tab be sure to turn on the meta description. This will work in conjunction with your SEO plugin of choice and use its meta descriptions for amp. There are also options for the people who use the Yoast SEO plugin. I’m using the All-In-One Seo Plugin on the demo website I am showing you, so I didn’t use those options. Be sure to click save changes at the bottom right before changing tabs on the settings in order for your changes to take effect.
On the Design tab, you can customize many different options. I have personally chosen to have a navigation menu and a search bar on my header and a non-amp link of my homepage on my header and logo since I don’t use amp on the rest of my website. Note that in order to see how your posts look on their amp version be sure to visit the post and type /amp at the end of your URL at your browser. Hit enter and voila you are witnessing first-hand everything your visitors will be experiencing! You can do so for any post or page of any website. Just type the usual URL with /amp appended at the end of it.
I have done the same for my footer and added a back to top link, as well as a credit link.
On the post design tab, you can choose from many interesting options such as social icons to show, next-previous post links, related posts etc. Use your common sense and taste here.
On the comments tab I have chosen to allow WordPress comments and a big number of them. That’s because I value engagement on my websites and I want this to remain the same on the AMP version of them.
In the Advance Settings (don’t know why not Advanced :P) be sure to have mobile redirection disabled. That’s for two reasons. Firstly, I recommend to use amp on your posts only, so this setting is redundant for your other pages. Moreover, I didn’t choose to use it for my mobile users that open my posts either. The reason being that I don’t see any benefit redirecting my direct mobile users to the amp version of the posts. After all, the people that come to the website through search will be on the amp versions by default.
Note that you may choose to enable this if you decide to build amp pages for your whole website. But for the sake of this tutorial and my personal preference at the moment you should keep the option disabled.
Lastly, you can use the plugin manager to choose which of your plugins should stay enabled for the amp version of your website and which shouldn’t. I must say that when I disabled one of the plugins I had a problem with it didn’t seem to work. Be sure to experiment and disable any plugins that may be causing funny things inside the amp version of your posts.
Troubleshooting and Extensions
I want to be sincere here. There are drawbacks to adopting Accelerated Mobile Pages. Anything that was done with JavaScript on your website will not work. You won’t have a sidebar anymore, not even after your posts like it was done with a simple mobile responsive theme. Are there workarounds? All hail extensions.
The AMP developer community has been really busy lately and that has resulted in many helpful extensions that provide different functionalities that you may have lost after becoming AMP-friendly. Most of them are paid ones but not necessarily. Just be sure to search for the functionality you need and if you don’t find something yet just be patient. I’m sure future updates will give you what you need.
Last Step: Google Search Console
I want to recommend one last step here. Be sure to resubmit your sitemap on google search console. That way you will let good old Google know about your AMP pages quicker and see them quicker on the search engine results pages (SERPs). Also, in the days to come Google Search Console will let you know about the status of your AMP pages on the SERPs and advise you on possible errors you should be fixing.
Are Accelerated Mobile Pages Worth it?
In my opinion, yes. I don’t view them as mandatory but they do provide lightning fast speeds for mobile users and improve the user experience. They are an experiment that seems to be here to stay. So, if you are a content marketer I recommend you adopt AMP on your posts asap and fix any problems down the road.
A second reason that I want to emphasize is that Google will certainly reward you as a website owner for adopting their child and they will do so in the search results, both of mobile and desktop alike!
Where can I find more tutorials like this one?
I’m personally trying to share as much as I know here about internet marketing and I plan to keep on doing that down the road. That being said, the place where I stay updated about the ever-changing world of internet marketing and how to make money online is the Wealthy Affiliate platform. Besides the awesome training and support, as well as the perfect website building and keyword research tools provided, Jay hosts super helpful and detailed live classes in the form of webinars (we call them wabinars :P) that offer detailed guides and analyses on the best internet marketing practices to adopt for your website to thrive. If you haven’t, be sure to read our review of Wealthy Affiliate if you haven’t already. It’s free to start and I’m an active member myself there.
I hope you found this tutorial on how to install accelerated mobile pages on WordPress using a plugin helpful. As always, if you have any questions, please leave them in the comment section below.