Design Your Site

AMP

AMP (Accelerated Mobile Pages) is an open source framework that allows browsers and apps to load your site’s content quickly on mobile devices.

AMP is accessible to new plugin-enabled sites via the AMP plugin. For plugin-enabled WordPress.com sites created before June 13th 2022, the AMP plugin was installed by default.

Table of Contents

About AMP

AMP enables the creation of websites and ads that load near instantly, giving site visitors a smooth, more engaging experience on mobile and desktop.

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:

A Google Search result showing the AMP badge

Check out the AMP site for more details on how it works.

↑ Table of Contents ↑

Turn AMP On or Off

If you’d prefer to show the non-AMP version of your site to Google (and potential visitors to your site), you can deactivate the AMP plugin at Plugins → Installed Plugins.

📌

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

↑ Table of Contents ↑

Customization

You can go to Appearance → Customize → AMP → Design 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 ↑

Working with AMP

To use the AMP plugin after installing and activating it, click on AMP in your dashboard.

Settings

In the AMP Settings, you will see three template modes:

Three AMP 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. 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.

Analytics

To access AMP Analytics, 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, click Admin → Property Settings and 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 AMP → Analytics. In the type field, enter googleanalytics.

Paste the code into the JSON Configuration field.

An example of a completed Google Analytics AMP setup.

4. Click Save.

AMP Errors

You may receive communication from Google regarding AMP on your site.

The word “error” 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 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) or 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.

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.

Options to fix this:

  • Look for CSS among the errors that you can remove from the site completely (eg 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​.
Functional (JavaScript) Errors

​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 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:

  1. Switch to AMP-compatible theme/plugins.
  2. Use a child theme and/or custom plugins that 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