How to Create AMP Pages for WordPress Site?
How Does it Work?
It is important to understand how AMP works before you try to implement. Basically, you need to create layout for your mobile site that is different than the desktop site. This will help you to serve the mobile pages faster on smartphones.
- Each page on your site will have two URLs – one for desktop and one for AMP. The AMP URLs generally includes /amp/ at the end.
- The canonical meta tag on the page should inform search engines that the desktop and mobile pages are same though the URL is different. You can either choose the desktop URL or AMP URL as your canonical URL depending upon the implementation.
- It is up to Google and other search engines to pickup desktop or AMP pages in the search results. You have no control on this.
Remember, though AMP is there for a while, it is still a experimental feature. Therefore, you will have plenty of problems including traffic and revenue loss when switching to AMP. Learn more on AMP issues in our earlier article.
Creating AMP Pages for WordPress Site
WordPress always has multiple options for doing single task and AMP is not an exception to that. You can create AMP pages with the following three options:
- Using official AMP plugin
- Using other AMP for WP plugin
- Find a AMP supported mobile theme
- Manually implement AMP
Let us explain creating AMP pages using the official AMP plugin in this article.
Creating AMP Pages with Official AMP Plugin
Login to your WordPress admin panel and go to “Plugins > Add New” section. Search for “AMP” in the search box to filter the relevant results. You will find there are two popular AMP plugins available for WordPress in the free repository – AMP by official WordPress team and AMP for WP by another developer.
AMP is the official AMP plugin for WordPress contributed by Google, Automattic and other developers. Let us explain creating AMP pages with this official plugin.
- After locating the plugin, install and activate on your WordPress site. This will create “AMP” menu in the side with “General” and “Analytics” options.
- Go to “AMP > General” and customize the following settings to create AMP pages.
Learn WordPress: Check out 300+ free WordPress tutorials.
The option is to enable AMP for your website. Simply select the “Website” check box against the “Experiences” section.
The “Stories” option will be disabled by default as you need Gutenberg plugin to create stories using AMP.
Choose Website Mode
This is an important setting in enabling AMP for your WordPress site. The plugin offers three options and you can choose depending upon your need.
- Reader mode – this will use AMP theme and create paired AMP pages on your site. Though this is an easy way to enable AMP, it will create different and simple layout for your AMP site. This mode only supports posts/pages and does not support mobile redirection. This essentially means your AMP pages will be served only if there is a request for /amp/ URL from Google or other consumption platform.
- Transitional mode – this mode is similar to the reader mode expect that it uses your current theme’s templates to create AMP pages.
- Standard mode – enabling this mode will turn your site into a complete AMP site with all canonical URLs pointing to /amp/ URLs. IT also uses your theme’s layout to create AMP mobile pages.
Most likely you can only use the reader mode on your theme, especially when you are using jQuery based WordPress theme for your site. Ensure to test all script functions like menu items on your site works with AMP, regardless of the mode you choose.
Choosing Post Type and Templates
Depending upon your mode selection, you can choose the post type support for AMP.
- Reader mode allows you to choose posts, pages and media. We recommend you to select posts if you want to use reader mode.
- Standard and transitional modes allow you to choose post types as well as templates on your site. You can choose to include or exclude particular templates from AMP page creation.
Again, the error validation option depends on your mode selection.
- Reader mode does not need any error validation as it uses custom AMP layout.
- For standard mode, all AMP errors are automatically parsed and accepted as your site uses AMP canonical URLs.
- When you use transitional mode, you can either automatically access the AMP errors or manually check and accept. We recommend you to choose the checkbox for “Automatically access sanitization for any newly encountered AMP validation errors”.
When you enable standard or transitional mode, the plugin will create two more sub-menu items under “AMP” menu. You can go to “AMP > Validated URLs” section to view the AMP validated URLs on your site. If you have chosen to automatically validate URLs for transitional mode or selected standard mode then this section is for reference purpose to view the validated URLs. If you have disabled auto validation for transitional mode then you should check the “Validated URLs” section and manually validate to remove the errors. Otherwise, it will impact the page layouts and most probably break your site display.
All you can see in the above screenshot, all errors in validation are automatically accepted based on the settings for transitional mode.
You can go to “AMP > Error Index” section and view the details of each validation error. Under the “Type” column, you can see the component that cause the error like JS or CSS. You click on the dropdown and view the complete URL of the component to take corrective action.
Go to “AMP > General” and enable the last option for caching. This will help you to cache the AMP pages and serve faster on mobile devices from the cached content.
The plugin allows you to add Google Analytics tracking code as AMP pages need separate tracking due to change in URL. Go to “AMP > Analytics” section and add your Analytics code as mentioned in the example code.