AMP (Accelerated Mobile Pages) is an open-source framework that creates lightweight and fast-loading webpages for mobile devices.
AMP can be installed on plugin-enabled sites using the AMP plugin. For plugin-enabled WordPress.com sites created before June 13, 2022, the AMP plugin was installed by default.
In this guide
Accelerated Mobile Pages (AMP) enable the creation of websites and ads that load nearly instantly, giving site visitors a smooth, more engaging experience on mobile and desktop. AMP pages are designed to load fast by optimizing code and restricting features, resulting in a better user experience. They’re used for content-heavy sites to efficiently deliver information to mobile users.
The main advantage of AMP is a fast-loading mobile experience. Your site’s blog posts will have dynamically generated AMP-compatible versions. AMP is not applied to the front page, archives, and pages. Your site’s results in Google will also be marked by the AMP badge on mobile-based searches.
When AMP is on, and your visitors use a mobile device to visit your site, they will see a simplified version of your site’s posts. They will have the option to Exit mobile version to see the full version of your site. With AMP on, they will also see the option to Go to mobile version if they’re viewing the full version of your site on their mobile device.
Check out the AMP site for more details on how it works.
After you have installed and activated the AMP Plugin, the plugin will work automatically with default settings.
You can customize the AMP settings manually or use the AMP Settings Configuration Wizard.
- Visit the AMP menu in your WordPress.com dashboard.
- Click Settings.
Learn more about the Settings Screen from the AMP for WordPress development team.
You can customize the Header Text Color, Header background, Link color, and the color scheme used on your AMP pages. Because AMP aims to create a simplified and quickly loading version of your posts, custom CSS is not applied.
- Go to Appearance → AMP → Design
You may see a message that AMP is not available for the page currently being previewed. AMP only applies to blog posts and does not apply to front pages, archives, or pages. Click “Navigate to an AMP compatible page” to preview the design changes you make.
- Choose the colors you want to use for Header Text Color, Header Background & Link Color
- Choose between a light or dark Color Scheme
- Save your changes.
To use the AMP plugin after installing and activating it, click on AMP in your dashboard.
In the AMP Settings, you will see three template modes:
Standard: In this mode, the plugin enables sites to have AMP as the only version of content for both desktop and mobile. The entire site will be served as valid AMP pages (referred to as AMP-first).
In this mode there is no ?amp query added to any URLs.
Transitional: If available in your theme, AMP will rely on a theme’s template and styles when showing both AMP and non-AMP content. This means that your AMP and non-AMP content will have a similar look and feel.
In this mode the ?amp query is added to URLs for AMP content.
In this case AMP, pages will usually only be seen on mobile from certain sources, such as Google searches and Twitter, or by manually adding the ?amp query.
Reader: AMP content will be served in basic templates (with that blue bar at the top) which are separate from the templates in your active theme. Reader mode is less likely to interfere with functionality provided by a third party theme or plugin.
In this mode, the URLs for AMP posts normally end in /amp/ whereas for pages they end in ?amp.
To access AMP Analytics, you must have Google Analytics set up with your website. Please see how to set up Google Analytics here.
- In your Google Analytics account, click Admin → Property Settings and obtain the Property ID, which would look like UA-XXXXX-Y.
- Amend the following script, replacing the UA-XXXXX-Y with your property ID.
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
3. Copy the script and in your site go to AMP → Analytics. In the type field, enter googleanalytics.
Paste the code into the JSON Configuration field.
4. Click Save.
Deactivating AMP means your mobile visitors will not see the AMP version of your site, nor the prompt in the footer to Exit Mobile Version. Instead, your visitors will see your default website on their mobile devices.
To prevent mobile visitors from redirecting to AMP version of your site, while keeping the AMP functionality active:
- Visit AMP → Settings in your WordPress.com dashboard.
- Scroll to the bottom of the page to find the Other panel and expand it.
- Disable the Redirect mobile visitors to AMP toggle button.
- Click Save.
Alternatively, if you do not plan to use the AMP plugin at all you can deactivate the plugin completely.
- Visit Plugins → Installed Plugins in your WordPress.com dashboard.
- Locate AMP in your installed plugins list.
- Click Deactivate.
You may receive communication from Google regarding AMP on your site.
The term “error” can be misleading since it suggests that something is broken and needs to be repaired. In reality, these “errors” refer to elements that AMP found incompatible and removed from the page. This is the expected behavior when using the AMP plugin in Standard and Transitional modes. Your theme files remain unchanged. Typically, these “errors” consist of extra CSS (more than 50kb) or JavaScript. The error index provides a list of all these items for your entire website.
On the whole, you can ignore these unless something looks incorrect, or is not functioning on your page.
These can happen when the CSS required for part of your page is eliminated as part of the CSS that went over 50kb.
Options to fix this:
- Look for CSS among the errors that you can remove from the site altogether (e.g. from plugins, or Jetpack modules that could be deactivated).
- If the page has a lot of inline CSS from the block editor or a page builder, consider having fewer items on this page (break up into child pages, or paginate the page).
- Choose to “keep” the CSS: this will cause every page that the specific CSS is on to not be a valid AMP page, and will display in the non-AMP format.
- Deactivate AMP on the single page by editing that page and clicking the toggle for “Enable AMP” in the Document Status & visibility settings.
E.g., widgets not displaying, Facebook widgets not showing posts, slideshow not sliding, dropdown submenus not working, mobile menu not working.
These types of issues occur because JavaScript that these items rely on to load, or for animations, has been removed.
As the word “error” can be a misnomer, this generally means one or two things:
- Usually, you don’t need to do anything.
- If there is a styling error on your site, or a feature that relies on JavaScript is not working, you might need to fix it.
The AMP plugin removes JavaScript and HTML that does not comply with its specification from AMP versions of pages. (where /?amp is added at the end of a page URL).
It also removes CSS that goes above the 50KB limit (after the plugin tries to minify it).
Removal of JS can still result in an acceptable AMP experience, so long as your theme/plugins can function without that CSS or JavaScript.
It’s up to you to look at the AMP version of your site and see if the removal of that mark-up is acceptable. If the removal of most of the scripts is unacceptable – there are three main things you can do:
- Switch to AMP-compatible theme/plugins.
- Use a child theme and/or custom plugins that prevent the output of invalid markup in favor of adding AMP components.
- Activate Reader mode. As above, AMP pages will not look the same as the rest of your site, but this will be a fully compatible version of your site.
- You can also deactivate AMP on specific pages by clicking the toggle for “Enable AMP” in the Document Status & visibility settings. This will result in a non-compatible AMP version of a page.
