In this article, I’m going to walk you through implementing Google AMP or Accelerated Mobile Pages on your WordPress website.
Google’s Mobile-First Indexing means that your site needs to do more than just Look great on mobile, it needs to Perform great.
The best way to ensure that your website is performing at lightning fast speeds is with AMP or Accelerated Mobile Pages.
I’m going to walk you step-by-step through the entire process of implementing the AMP For WP Plugin on your WordPress Website.
Below is the homepage for the AMP For WP Plugin.
What Is Google AMP (Accelerated Mobile Pages)?
Google AMP or Accelerated Mobile Pages are essentially just stripped-down copies of your website’s pages that load much faster than your regular website.
They are cached pages that basically don’t have any CSS or custom styling they’re very stripped down and they load really quickly on mobile which provides a better user experience.
AMP also reduces the number of CSS requests and eliminates certain On-Page elements, like really large images, CTAs, and more.
Google ‘Pre-Loads’ AMP pages in a single iFrame in the background of the Search Engine Results Pages (SERPs), which makes them appear to load instantly when a user taps on a search result.
Better user experience goes a long way towards improving your site’s search engine optimization or SEO.
Therefore, it’s a good idea to implement Google AMP on your website to provide a better experience for visitors, and to appease Google.
Having AMP on your website will help ensure that you have an SEO Friendly Website.
Why Should I Implement Google AMP On My WordPress Website?
- Webpage speed is a ranking factor of Google’s mobile and desktop indexes
- A 1-second delay in web page speed can decrease conversions by as much as 7 percent (Kissmetrics)
- Google created AMP and it’s likely that having AMP on your website can help improve your rankings
To show you the difference between AMP and Non-AMP, I have Google AMP enabled on my website.
In the image below you can see a side-by-side comparison of the same blog post, the only difference being that one page is the AMP version and the other is just my themes responsive design.
I used a Free Tool at https://www.responsinator.com to show you the difference.
Alternatively, I could have accomplished similar results by simply resizing my browser window to as thin as possible.
That will usually give you a pretty good idea of what your website will look like on a mobile device.
As you can see in the example on the left but on the right, it doesn’t look that different.
You can see on the Non-AMP version of my site, the individual blog posts have a little styling to them that’s part of my website’s theme.
There’s a slight hover effect with a box shadow that changes slightly when I hover over each post.
Whereas the AMP version, other than when I hover over a link there’s no custom styling or any effect.
As you can see the header is pretty much the same on AMP as it is on the desktop version of my website.
I actually like the header more because it has a click to call button.
I could add that to my header, but it’s not something people typically use when visiting a website on a desktop computer.
The AMP menu is a slide-out menu, meaning when you tap on the ‘Hamburger Icon’ the navigation menu pops out from the side of the screen.
You can choose which side you want it to come out from and you can set the background color.
Additionally, you’re able to choose to have or to disable the search function and you can add links to your social media profiles as well which is pretty cool.
Those are the differences visually between AMP and Non-AMP.
Now I will show you how to install AMP For WP on WordPress.
To learn more about the plugin or Google AMP, in general, you can visit their website, where there’s a good amount of tutorials and how-to guides that will walk you through setting up different aspects of AMP on your website.
You can also reach out to them directly with questions, I’m not sure how responsive they are, but it’s a pretty well-developed plugin, so I assume they’re pretty good at getting back to people.
How to Install AMP For WP Plugin on WordPress
Once logged into WordPress, from within your WordPress dashboard, hover over plugins.
I’m sure if you’re adding AMP you already know how to install a plug-in on WordPress.
But, if you don’t, this is how you install a WordPress Plugin.
Click on “Add New” and then type “AMP For WP” in the search box.
I’ve already searched for AMP but you just type it in and it’s the result with a Red Logo.
There is another AMP plugin that actually has more installations but doesn’t really give any customization options.
Also, if you’re using Yoast SEO on your WordPress website, which most people are you also have to use ‘Glue for Yoast SEO & Amp’ in conjunction with it.
That’s not the case with AMP For WP, which has better ratings and way more reviews and it has a ton of options for customizing your website.
It’s even compatible with page builders like Divi or Elementor.
It does not, I repeat, it does not work with thrive themes.
I know this because I was using ‘Rise’ from Thrive Themes and Thrive Architect on my website, which is a great theme.
But, when I went to add AMP for WP, I went through the whole process of installing it and setting it up. I then went to look at my website and it completely fell to shit.
For some reason, it turned every bulleted list on my blog into a disaster.
Each Bullet was blown up to a MASSIVE size somehow becoming a full-screen image.
It was weird and I got frustrated and just got rid of Thrive Themes and Thrive Architect and switched over to Studiopress and the Genesis Framework.
On top of the Genesis Framework, I’m using the Business Pro Theme, which I really like.
It keeps everything consistent across my whole site and it’s just a very clean professional design.
Studiopress has more options depending on what you need your website for.
They have blogging themes, more corporate style themes, lawyers themes, news and e-commerce themes, as well as many others.
Overall, I believe they have around 60 themes to choose from. All of which are premium themes so you do have to pay for them.
In order to use one of their themes, you’ll first need to purchase the Genesis Framework and then whichever theme you want on top of that.
Combined, it’s like 120 bucks depending on the theme.
Installing AMP For WP
To install this plugin all you have to do is I just click ‘Install’ and then ‘Activate.’
Alright, so AMP is installed on your WordPress Website.
Now it’s time to set it up so that it functions properly.
There is an option to go through an installation wizard. I don’t think it’s necessary, but you can use it if you want.
I’m going to walk you through all of the settings that are covered in the installation wizard, so we’re not going to use it.
Just by going through this post, or watching the accompanying video, you’ll have AMP properly implemented on your website.
The setup wizard only covers a few settings, such as; add your logo, your Google Analytics tracking code, choose which pages on your website you want to be AMP pages and that’s pretty much it.
I’ll take you through all the settings right now.
If you need help or are looking for a step-by-step written guide there are links to different guides on the ‘Welcome’ page of the plugin.
That’s enough introduction, let’s get started setting up AMP on your WordPress Website.
On the left-hand side of your WordPress Dashboard, hover over “AMP” and then click on “Settings.”
If you did the installation wizard, this is where it will bring you after completing that.
Scrolling down the settings page you’ll see a number of different add-ons that you can purchase to enhance AMP on your website.
These add-ons include email opt-in forms, if you have an e-commerce store you can purchase a WooCommerce add-on for AMP, or a Star Rating addon, which I believe is basically like schema markup or structured data.
You should have schema markup on your website already, and I believe this addon for AMP enables you to basically display your aggregate star rating in the search results and it may also allow you to display it on the AMP version of your website.
I’m using just the free version of AMP for WP and it’s a fantastic plugin.
It covers everything I need, but if you want more features there are options for it.
We’ll just go down this list I’ll try and go quickly.
There are some things I’m going to skip over or ignore because I don’t think they’re relevant or they’re not that important.
AMP General Settings
Before we get started, I just wanted to point out that each time you change any of your AMP settings, make sure that you remember to click “Save Changes” at the bottom of the screen.
To start off go to “General” and this is pulling the logo in from my website. You can resize the logo if you click on ‘Custom Logo Size’ which will allow you to display your logo at a certain percentage of its original size.
The recommended size for AMP is 190 by 36 but depending on what kind of logo you have you’ll have to adjust it accordingly.
Your logo may be wider, or more of a square, and you can basically set it to display at different sizes by clicking on “Resize Logo.”
It will resize automatically, just make sure if you are using a PNG file for your logo so it scales without becoming distorted like a JPEG picture would.
These are the settings for enabling or disabling AMP on certain pages of your website.
On my website I have it enabled for posts and pages because I have a static homepage.
If you do not have a static homepage and your homepage is basically the archive page for your blog then you can choose Homepage support.
This basically turns your homepage into your blog page so it’ll just have a list of all of your blog posts.
You can choose to have a custom homepage and then basically just select the homepage from the dropdown listing all of your pages.
I don’t have that enabled on my website so I don’t know what this strips away from your homepage design.
I know my homepage is responsive so I’m not including my homepage.
I only use AMP on my posts and pages.
You can choose to have the page title be displayed on your homepage as well.
Another option is turning AMP on for your archives and category pages, as well as for custom post types, which is essentially portfolio items.
The “Convert AMP to WP” basically it takes your AMP pages and Non-AMP pages and makes a uniform design from the two of them and then only serves one page to visitors.
You’ll basically only have an AMP version of your website but I believe it resembles your original theme.
Alternatively, there is “AMP Takeover” which basically will only serve AMP pages.
As the name implies, AMP takes over your website.
I have these two settings “Off” because I want the desktop version of my website to look like the desktop version of my website.
AMP With Page Builders Settings
Moving on is “Page Builders” and as you can see they support several page builders.
I’m not using page builder right now but there is documentation on how to implement AMP in conjunction with your page builder.
AMP ADs Settings
AMP for WP will also allow you to display ads.
I’m not using ads or displaying ads on my site so I have not done this but again there is documentation on implementing the advertisements.
AMP SEO Settings
SEO – Meta Description is I believe this basically just pulls the Meta Description from each page.
The way AMP works is if I’m on my phone and I google “SEO Services Phoenix” the search results will display a little lightning bolt to indicate that the page is AMP.
I believe the Meta Description setting tells AMP to pull the meta description for each page or post from Yoast.
AMP For WP integrates with several different SEO plugins.
I’m using Yoast, but I could also use Genesis.
With Yoast SEO selected from the dropdown, I have all three options enabled.
These are “Meta Description,” “ld+ json,” and then “Canonical URL from Yoast.”
This is a good point to explain Canonical URLs. A canonical URL basically helps you prevent duplicate content on your website which with AMP could be an issue.
Because of the way that AMP works with your website, it basically makes a copy of every page.
For Example, a blog post’s URL would normally be https://cre8tivedigitalmedia.com/benefits-of-local-seo/
But, with AMP creates an additional URL https://cre8tivedigitalmedia.com/benefits-of-local-seo/amp/.
Both pages contain identical content, which Google doesn’t like.
A canonical URL identifies the original version of each page so that Google knows this is the page that you should index as the original version of the content.
Yoast automatically adds a canonical URL to each page and when you enable “Canonical URL from Yoast” it basically identifies the desktop version as the original version of that piece of content so that you’re aren’t facing any duplicate content issues.
URL Inspection Compatibility Tool
Basically allows you to noindex certain pages on your site. Basically this tells Google to index or noindex all these different pages so if you have this set to on it will automatically tell Google to index those pages. I just leave that on.
Performance Enhancement Minify
I recommend enabling this. It will speed your site up a little bit so just leave that or set that to on.
You can set up Google Analytics you just need your tracking code or you can use if you’re using Google Tag Manager you can set up a container in Google Tag Manager.
Structure Data or Schema Markup
Enable this. You’re able to set different types of schema for your posts and pages. You can set it for your posts and pages.
Posts or a blog post should be set to blog posting or if it’s a news article of some sort then you can set it to a news article.
If you have a food blog you can set it to a “Recipe” and this just basically enables the search engines to display certain information in these search results.
If your blog is a recipe blog you can set your posts to have recipe schema and that enables Yahoo, Bing, Google, Duck-Duck-Go and other search engines to display that recipe as a featured snippet in the search results.
Featured Snippets appear above everything else in the search results and are a great way to increase click-throughs to your website.
It’s prime real estate on the search engines results page.
For the pages on my site, I have this set to Webpages, and for posts, I have it set to “Blog Posting.” If you have an e-commerce website you can set it to a product.
You can set a default structured data logo, or use the same logo that you use for the schema or structured data that you have on the desktop version of your website.
Just like in the header you can customize the size of your logo.
Default Post Image is when there is not a featured image set for a post it will default to using whatever image you set here.
GDPR & Cookie Consent
If you’re in Europe you can turn on a cookie consent bar so this is like when you go to a website and you see a bar pop up at the bottom or sometimes at the top it says basically “Do you permit us to track your usage of our website?” and the GDPR compliance is the one that’s for like Europe.
These are when someone arrives on your site, they will receive a notification prompting them to ‘Allow’ or ‘Block’ you from sending them notifications.
I think you’ll have to be using One Signal to Implement Push Notifications.
AMP for WP supports Contact Form 7, Gravity Forms, and Ninja Forms.
It does not support Happy Forms.
That said, I’m using happy forms and I was about to switch when I remembered one great setting that this plugin has.
The only pages on my site that I’m not using AMP is my homepage and my Contact Us page.
AMP is disabled in the settings on my contact us page.
On every page, you have these options in the settings on the right-hand side of the WordPress editor and that shows up in your posts and pages.
You can toggle AMP on or off for individual pages, which I had to do on my Contact Us page because the contact form doesn’t display on AMP.
You just choose to hide it and disable the mobile redirection to contact us and it just displays the regular version of my web page as opposed to the AMP version of my web page.
There is no AMP version of my contact page.
But if you’re using one of the previously mentioned contact form plugins, then it does support it so it will display it.
Comments on Posts or Pages
I don’t need people commenting on my pages but blog posts sure I would love comments.
In fact, go to my blog and comment right now!
You can change your comments to use Facebook comments or if you’re using “Discus” as well as several other options.
Hiding the Bulk Tools
With this feature, you’re able to turn AMP off for entire categories on your site.
The Hide AMP Bulk Tools enables to you can hide the AMP options that I showed you in the individual page earlier.
Instead of turning AMP off on a page-by-page basis, you can ‘Hide’ AMP for entire categories.
To select a category, you have to enter a category, so if I wanted to exclude all my posts about SEO I can exclude all of the SEO posts.
I’m not going to do that but that’s how you would do it and you can turn that feature off meaning that if I don’t want this to show up in my editor in the backend I can turn it off right here and just say “Hide By Default.”
AMP Advanced Settings
Some of the advanced settings in AMP are pretty cool.
I have that off for both mobile and tablets. I originally had it On, but after thinking about it I chose to turn it off.
If it’s ‘ON’ users can’t see the Non-AMP version of your website because it will just keep redirecting them back to the AMP version.
Change Internal Links to AMP
This will automatically convert all Internal Links to “AMP” links, ON AMP Pages.
It will NOT do it on the desktop version of your website.
On the Non-AMP version of my website, an internal link to my About Us page looks like this: creativedigitalmedia.com/about-us/.
Another example is this link to a blog post: creativedigitalmedia.com/benefits-of-local-seo/. Internal links throughout my content on the Non-AMP version of my website, are to Non-AMP pages or posts.
Alternatively, on the AMP version of each page, each link is automatically changed to an AMP version of that page.
Sticking with the two examples above, the About Us page link would become cre8tivedigitalmedia.com/about-us/amp/ and the link to the blog post would be cre8tivedigitalmedia.com/benefits-of-local-seo/amp/.
I don’t have e-commerce but it does support WooCommerce and if you’re going to be giving away ebooks or anything like that or even if you’re selling products that are downloadable this is where you would enable that.
this is basically like the breadcrumbs homepage title it’s a like changing this would change what your home page is called on your breadcrumbs.
These are the breadcrumbs so this is ‘homepage’ and you can change that to whatever you want.
I think homepage makes sense because it is the homepage.
You can choose from a few different themes with AMP. I’m using the “Swift Theme” but there are other options available.
One thing I do want to point out is in header you can add an alternate header or alternative menu.
This right here is the alternative menu that that is referring to so you can click the hamburger icon and have the slide-in menu and you can have your pages listed right here and this does swipe horizontally so you are able to scroll over and see basically whatever pages you want to have on here.
I have that turned off but if you have an e-commerce store and want to set up basically different categories then you could set it right here or different products.
I don’t see the point of having the alternative menu, it just means that somebody does not have to click the hamburger to navigate to a different page.
You can change the color of the links on your site.
The links within your content and this is the link color when you hover over a link just doesn’t make sense to me because on mobile you can’t hover over something because there isn’t a mouse pointer but I digress.
You can choose whether or not you want to have sidebar I have this turned off.
this is basically like instead of having like pagination on your blog posts like if you go into your blog archive and say you have 200 blog posts.
Instead of only ten posts displaying on a page however many, you have displayed on your archive page the infinite scroll basically sets it so that it will display three pages worth of posts all on one page.
It won’t display 200 of them but it will display 30 of them if you have it set to ten by default.
That you’re using or that will be used on your site. I use font awesome on my website, so I chose to use them on AMP as well.
If you know how to do CSS you can make customizations to the look and feel of your AMP pages.
Google Font API
If you want to be able to change the font on your AMP pages you need to get a Google font API key.
I didn’t do this the font that they provide is or that just is used by default it is fine.
I think it’s set by Genesis anyways or it just uses whatever Genesis is using.
AMP Header Customizations
You can choose from three different headers. You only get one option as far as the menu and for the header, it’s up to you.
I do like the middle one with the call-to-action button on the right, but on my site, I use the header with the hamburger on the right.
Most people are right-handed and hold their phones in their right hand.
Therefore, in order to navigate the site with one hand, it’s easier if the hamburger menu icon is on the right-hand side.
Search In Menu
I chose to have a ‘Search Bar’ in my menu, and a ‘Search Icon’ on my header.
It makes it easy for visitors to quickly search my website for a specific service, or piece of content.
Copyright In Menu
Turning this ‘On’ will display “All Right Reserved” below the social Icons in your menu.
This is basically a bar that sits under your AMP Header with navigational items listed horizontally.
You could use this for a number of things, like Blog Categories, Product Categories, Services Pages, Etc.
Call Now Button
Enter your phone number and then it will automatically call you when somebody clicks on the Phone Icon in your AMP Header.
Non-AMP Link In Header
Provides link in your header that’s an option in case somebody wants to see the page in a Non-AMP version.
I have the “Sticky Header” enabled on my website.
Some of my blog posts are very, very long, and having the sticky header makes it easy for people to navigate my website without having to scroll all the way to the top of the page just to see the menu.
Advanced Header Design
This is optional and allows you to adjust your AMP Header’s Width & Height, Margin & Padding, Background Color (white by default).
Make sure that when you’re changing the color of anything within the AMP settings, after choosing a color or pasting the #HEX code, you click “Choose” on the bottom right of the color palette popup.
Otherwise, it will just go back to whatever color you were trying to change in the first place.
By default, the menu is a semi-transparent black which you can change to whatever color you want, just as with the header.
I just have a solid color but you can set it to whatever you want. My AMP Menu is set to the same color as my header.
These are the different elements that are displayed on your header, depending on which options you’ve enabled.
On my website, the Hamburger Menu Icon, and Search Icon, and Click-To-Call Button are all enabled and set to White, because I have a dark colored header.
I believe this is the text in your menu. Again, I set this to white.
You can choose which side of the screen you want your menu to pop up from and how much of the screen you want it to take up when it pops out.
By default, this is set to 90%, but you can set it to whatever you like most. I recommend testing different options on your cell phone to see how interacting with it feels, then adjust accordingly.
Assigning A Menu To Your AMP Header
This is a VERY important note about your AMP Header and AMP Menu.
Your AMP header does NOT have a menu assigned to it.
You’ll have to assign one, otherwise, when a user taps the hamburger menu icon in your header, an empty menu will slide out.
Don’t forget to do this, and then check to ensure it’s displaying on the front end of your AMP Header & Menu.
It’s as simple as going to Appearance > Menus and then below the menu, a new box will have appeared which you’ll need to click to assign the menu to your AMP Header.
If you skip this step you’ll have nothing showing up in your menu and it’ll be really frustrating because it was for me! I didn’t figure it out at first and no tutorials tell you to do this.
Back over to the AMP settings you can choose how you want individual posts to be displayed.
I have the sidebar turned off but I use the right option because if you use this option it makes the featured image like massive and I just didn’t think it looked too great.
These play an important role in Search Engine Optimization (SEO), and you should be using them on the desktop version of your website, as well as the AMP pages and posts.
Breadcrumbs make your website more user-friendly, which Google rewards.
I have my breadcrumbs set to category, but you can use ‘Tags.’ I recommend having it pull the breadcrumbs from Yoast SEO.
Meta Data To Display On Posts
There are plenty of options to choose from that will enable or disable certain metadata from displaying on your individual blog posts. I don’t mind the categories but I wouldn’t want tags.
You can then choose whether the individual categories and/or tags should be ‘Links.’
This essentially means that each category or tag will be a link to that particular category or tags archive page.
Sticky Social Icons
I chose to enable these on my website. I think they look good sitting at the bottom of the screen, and they make it very easy for anyone reading a blog post to quickly share it on social media.
This is essentially asking if you want to show “Next/Previous” at the bottom of your blog posts.
Post pagination will make it easier for visitors to quickly navigate to the next post in your archive.
You’re able to display “Related Posts” on your blog posts after a certain number of paragraphs, or ½ way down the post and you’re able to control what different information you want to be displayed in the related posts section.
I.e. Excerpt from your content, a link to the Non-AMP version, if you want you can randomly sort related posts and choose how many related posts you want to be displayed.
I have the “Related Posts” off because if somebody’s reading one of my blog posts I don’t want them leaving to go to a different blog post, even though they would still be on my website.
Choose how you’d like image galleries to be displayed on AMP Pages. If you don’t use Galleries, then just leave this alone.
If you do use galleries, you can display them as a carousel which will just make an arrow appear on the sides of each image to scroll left or right or paginate.
The second option is a carousel with image thumbnails at the bottom, which will have small thumbnail images of each picture in that gallery so they can jump from the first picture to the fifth picture instead of having to keep hitting the button to go next.
Lastly, you can display your images as a grid and have the images pop up in a lightbox. An image Lightbox is basically when you press the picture it pops up in a larger size hovering over the content.
Just like the Header, you can customize your AMP Footer as well, you can also assign a Footer Menu to it.
You’ll need to follow the same steps as for the AMP Header Menu.
If you don’t want your entire navigation menu displaying in your AMP Footer, you can create another menu with whatever you want, like services, or popular posts, etc.
I didn’t add an AMP Footer Menu on my site because I have a sticky header, and I don’t see a reason to have a menu in the footer if the header will be there when they scroll down to the footer anyway. It’s up to you what you do though.
You can add widgets to your AMP Footer to further customize it. To do that in the “Appearance” > “Widgets” and then just drag the widgets into the AMP Footer and customizing accordingly.
Another option is to include a link to Non-AMP pages in your Footer.
Back To Top Link
I have this enabled on my website because some of my blog posts are very long, and scrolling all the way up a page is a pain in the ass.
To make it easier, the “Back to top” link will automatically bring users to the top of the page when clicked.
You can further customize your footer basically change the colors the same way you did the header and individual pages depending on what kind of theme you’re using.
Social Sharing Buttons
You can play with these settings the social media so social sharing buttons those are the buttons that I showed you that are sticky at the bottom of the post.
If someone is reading one of my posts and wants to share it on Facebook, these buttons make it very easy to do with a few taps of their thumb.
Social Media Link in Menu
These appear below the navigation menu, and above the copyright notice in your slide out menu.
There’s plenty of options for social media sites and you just add the URL to your profile on each social media platform to have it show up in the menu.
Wrapping Up Google Amp Setup on WordPress
That’s it for How to Install and implement Google AMP (Accelerated Mobile Pages) on your WordPress Website.
I’m sorry if this went a little longer and I had anticipated, but it’s just so fascinating I couldn’t help it!
I wanted to make a video that covered everything so if you’re trying to properly set up AMP on your website and are getting frustrated or lost and confused and annoyed; now you have a step-by-step guide for setting up accelerated mobile pages on your website.
Accelerated Mobile Pages will deliver better user experience, and significantly improve the page loading time on mobile, both of which will improve your website’s overall SEO.
If you have any questions, please let me know in the Comments below or if you’d like, you can Contact Us.