Customize

AMP

AMP (formerly Accelerated Mobile Pages) is an open-source framework that allows browsers and apps to load your site’s blog posts quickly on mobile devices. Check out the AMP site for more details on how it works.

For all WordPress.com sites, AMP is enabled by default. The main advantage to AMP is a fast-loading mobile experience. All of your site’s blog posts (front page, archives and pages aren’t currently supported) will have dynamically generated AMP-compatible versions. Your site’s results in Google will also be marked by the AMP badge on mobile-based searches.

amp-serp

Table of Contents


Turn AMP On or Off

For most users, there’s no need to disable AMP; doing so will revert your site to show the theme’s responsive view to Google, and will remove the AMP badge in search results. Regular visits to your site from mobile will still show the regular non-AMP responsive theme; the AMP view is shown only from a mobile visit that originates from the Google search results.

If you’d still prefer to show the non-AMP version of your site to Google (and potential visitors to your site), you can disable it using the AMP controller. Clicking on My Sites, and then choose Settings → Performance.

↑ Table of Contents ↑

Private/Hidden Sites

AMP is only available to public sites that are not blocking crawlers; if the AMP box is not available, please check the Site Privacy setting and set it to Public.

↑ Table of Contents ↑

Customization

You can click on Edit Design from the AMP module in your Settings page to alter the appearance of the AMP version of your posts. Because the AMP spec requires a minimal page design, you’ll see options to change the Header Text Color, Header Background and Link Color, and the background color scheme.

Custom CSS is not applied to the AMP version of posts.

↑ Table of Contents ↑

AMP on the Business and eCommerce Plan

The remainder of this guide applies only to Business and eCommerce plan sites with plugins installed.

The AMP plugin that comes preinstalled with your site makes this process a lot easier by managing the replacement of components of your site with AMP-compatible ones for you.

To use this plugin you’ll need to go to the WP Admin area of your site.

General

In the WP Admin → AMP General tab you will see 3 website modes.

The AMP Plugin Settings (click to enlarge)

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.

In this mode, the URLs for AMP posts normally end in /amp/ whereas for pages they end in ?amp.

To see the settings of the AMP plugin, you’ll need to go to WP Admin.

Please note that reader mode is less likely to interfere with functionality provided by a third party theme or plugin.

Analytics

First you must have Google Analytics set up with your website. Please see how to set up Google Analytics here.

  1. In your Google Analytics account, you would click Admin → Property Settings → and you would look to obtain the Property ID, which would look like UA-XXXXX-Y.
  2. 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 WP Admin → AMP → Analytics. In the type field, enter googleanalytics.

Paste the code into the JSON Configuration field.

4. Click Save.

AMP validated URLs & Error Index

These two pages only appear when AMP is set to Standard or Transitional.

  • The word “error” here can be a bit of a misnomer, because it implies that something needs to be fixed, often this is not the case.
  • The “errors” are the things that were found to be incompatible with AMP and were removed from view from the page (which is what we expect the AMP plugin to do in Standard and Transitional mode). Your theme files are not edited.
  • These things are usually (if not always) excess CSS (CSS over the 50kb limit), and JavaScript.
  • The error index lists all of these items for the whole site.

On the whole you can ignore these unless something looks incorrect, or is not functioning on your page.

Validated URLs are a list of all the pages that have been processed by the AMP plugin and have a valid AMP page.

You can access the list of errors per-page in this section.

Styling Errors

​These can happen when the CSS required for part of your page is eliminated as part of the CSS that went over 50kb.

Styling Errors (click to enlarge)

E.g., incorrect colors.

  • 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:
    1. Look for CSS among the errors that you can remove from the site completely (eg from plugins, or Jetpack modules that could be deactivated).
    2. 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).
    3. 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.
    4. Deactivate AMP on the single page by editing that page and clicking the toggle for “Enable AMP” in the Document Status & visibility settings​.
Functional (JavaScript) Errors
Functional (Javascript) Errors (click to enlarge)

​E.g., Twitter widget not displaying, Facebook widget 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.

Dealing with Errors

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 to its specification from AMP versions of pages. (where /?amp is added 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.

To check acceptability go to WP Admin → AMP → Error Index. Here, you will see the errors and details of what they are.

Click to enlarge

Hover over an error, click Details scroll down to the list of URLs where the error appears and click the view button.

Click to enlarge

This will show you the AMP version page and you can check if you’re happy with how the AMP version looks, you would click “Confirm removal”. This means you’re confirming it’s ok for AMP to remove that script for AMP versions of the site.

If something is wrong, for instance a menu doesn’t function properly, or Facebook and Twitter widgets are not visible – you would click “Keep”. This means the scripts in question are kept in place and will run. This will also mean that the page will not be AMP compatible.

If the removal of most of the scripts is unacceptable – there are three main things you can do:

  1. Switch to AMP-compatible theme/plugins.
  2. Use a child theme and/or custom plugins which prevent the output of invalid markup in favor of adding AMP components.
  3. 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.
  4. 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.

Not quite what you're looking for?

Get Help