Earlier this year, Google made a big announcement–they amped up mobile pages.
If you haven’t heard of Google’s new development, referred to as AMP, now is the time to get in the know.
If you’re still not convinced your site needs AMP, don’t take our word for it, take that of The Washington Post.
With AMP, the Washington Post increased returning users from mobile search by a whopping 23%.
The Post also showed an 88% improvement in load time for AMP content versus traditional mobile web.
So what’re you waiting for? It’s time to set up AMP like a champ! Keep reading to find out how.
What Is AMP?
AMP stands for Accelerated Mobile Pages.
This open-source HTML framework allows web pages to load instantaneously.
You heard us right. Even if you have rich content such as video and/or ads, don’t fret, AMP has you covered for these too.
In a nutshell, AMP is a stripped-down version of your webpage and is a way to speed up your website. It will contain all the basics of your content, but shed the extras that slow your site down.
What does this mean? With AMP, visitors can see your content instantly, rather than having to wait. And since that wait time can reach up to a horrifyingly long 20 seconds, you’ll want to jump on the AMP train sooner than later.
3 Different Parts Of AMP: How AMP Works
AMP is comprised of three different parts: AMP HTML, AMP JS, Google AMP Cache.
Before you set up AMP, let’s explore these working parts a little further.
AMP HTML
Let’s start with AMP HTML. Going beyond the basics, AMP HTML is HTML with some restrictions and some extensions.
AMP HTML restrictions make for reliable performance. The extensions allow for a user to build rich content that surpasses basic HTML.
AMP JS
Here we have a library that ensures the fast rendering of AMP HTML pages.
The AMP JS library implements all of AMP’s best performances practices.
But wait, there’s more! AMP JS also manages resource loading and gives you the custom tags of AMP HTML. These all ensure a fast rendering of your page.
Google AMP Cache
Lastly, the Google AMP Cache can be used to serve cached AMP HTML pages.
A proxy-based content delivery network, the Google AMP Cache delivers all valid AMP documents.
Duties of the Google AMP Cache include the following:
Fetching AMP HTML pages, Caching AMP HTML pages, and Improving page performance automatically.
Now that we know what’s what, it’ll be simpler to set up AMP, so let’s get started.
How To Set Up AMP In 6 Painless Steps
1. Install The AMP Plugin
First thing’s first, to set up AMP, you will need to install it.
Before you can use AMP on your WordPress site, you’ll need to find and install the plugin.
You can install the official AMP WordPress plugin from the WordPress plugin store and the project’s Github site.
The quickest way to install the plugin is through WordPress.
If you choose to go this route, simply do a search for amp-wp in the “Add New” section. You will find this on your Plugins WordPress admin panel.
Then, install the AMP plugin on your WordPress just as you would with any other plugin.
If you’re looking for the latest version of the AMP plugin, go through Github and install the plugin manually.
For this, first download the Github package. You can download it by choosing “Upload plugin” while in your “Add New” plugins panel.
Next, find the zip file containing the package. Then, WordPress can take care of the rest.
You can activate the plugin and begin using it once the upload is done.
2. Try It Out
The official AMP plugin comes from Google’s AMP project team. This makes it the most up to date version.
The official plugin creates an /amp/ version of every page and post you have.
To see for yourself, add “/amp/” to the end of the URLs.
Another option to use, especially if you don’t have nice permalinks, is to append “?amp=1”.
Note: you can’t edit these AMP pages.
If you need more than just what the base plugin provides, you’ll need another AMP plugin.
PageFrog is a good example of what you can use.
What’s PageFrog?
PageFrog is a plugin designed to help publishers optimize and manage their content for mobile formats (such as Google AMP).
This plugin works by building on the core AMP plugin, which allows you to edit some of the changes it makes.
Additionally, you can add some style and theme features. It will even let you add other protocols; for example, Facebook’s Instant Articles or Apple News.
Check out the WordPress plugin store to find PageFrog and a few other AMP plugins you can use.
3. Configure Your WordPress Site For AMP
After activation of the plugin, you’re done!
For most installations, you’ll create content as you would normally do. The AMP plugin will take care of the rest.
Be aware that some things won’t work on your AMP pages out of the box, such as your Google Analytics code.
If you need to, you can add Google Analytics to your AMP pages.
You can even have such features on your mobile pages as well. However, you’ll have to manually add them to the plugin’s single.php page template.
4. Add SEO Plugins
AMP pages will not include any of your SEO tools or features. This means you’ll need to add a new SEO plugin for WordPress that is AMP compatible.
Lucky for you, most SEO plugin developers have taken care of this. They have or will have AMP extensions you can you.
Begin by installing them separately. These are a must-have to ensure all your pages work towards improving your site’s SEO.
5. Fix Any Errors
Test your AMP pages for errors and inconsistencies. Then, correct them.
Since AMP is still evolving, it’s safe to say many of the features might still have bugs or kinks to work out.
To fix these, you’ll need to work manually in your template file. Do this before you make your AMP pages public.
In case anything changes, you may need to redo your edits each time you update the plugin.
6. Advertise On Your AMP Pages
AMP HTML cannot be directly embedded since it doesn’t allow JavaScript ads.
However, Google did design AMP to allow some types of advertising in.
The AMP-compatible version of your ad plugins are sure to help with this.
Examples of supported ad providers include:
Have you set up AMP on your own? What did you do differently? Tell us what tips we missed and your AMP advice in the comments!