Setting up AMP

Google’s Accelerated Mobile Pages project allows mobile users to access content almost instantly. Instead of displaying your real website Google links to the AMP version of your website. An AMP version is a very lightweight and mobile-oriented version of your site’s content. A lot of the resources, such as scripts, used on AMP websites can be used across many different sites, so it is very possible the scripts are already cached by the user, making the website load a whole lot faster. AMP pages can also be cached by Google, so when your site is displayed in Google Search results, and the user is likely to click on it, Google can begin to preload the content from Google’s own cache and if the user finally clicks on the link, the page can be displayed instantly.

How to set up AMP with Chap theme

Automattic, the company behind WordPress, has taken initiative and created an “official” plugin for converting existing WordPress sites to AMP.
Chap theme utilizes this plugin to provide the underlying AMP support, while providing templates, shortcodes and blocks with AMP support, as well as theme options to customize the AMP templates and behavior.

To activate AMP from the WordPress administration dashboard go to Chap Theme -> AMP, check the “Enable Accelerated Mobile Pages” box and hit “Save Changes”.

You will be prompted to install and activate the official AMP plugin using TGMPA plugin activation.

If you do not get the notice then check Chap Theme -> About -> Tools to see if TGMPA notices are enabled, enable them if needed. You can also install the plugin manually from the WordPress plugin repository or by using WP-CLI with wp plugin install amp --activate command.

Once installed, you can configure AMP from WordPress admin dashboard -> AMP -> Settings:

Ensure Template Mode is set to Transitional (or Standard if you want your whole website to be AMP-only). Reader mode only supports singular pages.

Select content types that should be available as AMP. If you have any issues with a specific template you can uncheck Serve all templates as AMP, but otherwise it should be enabled.

Now that the AMP plugin is activated there are also additional AMP-related options available under Chap Theme -> AMP.

AMP can be toggled for individual posts and pages using the metabox provided by the AMP plugin.

Posts are usually enabled by default, while pages created before enabling AMP should be enabled manually. Newly created pages have AMP enabled by default as long as the post type support is enabled from AMP settings.

When visiting an AMP-enabled page as an administrator the WordPress admin toolbar contains an icon that can display the AMP version of the page.

Left clicking this button will open the AMP page as a small modal simulating a phone. Middle mouse clicking the button can open the AMP page in a new tab.

When the button is disabled it means either the current page does not support AMP at all (such as WooCommerce Cart or Checkout pages), the post type or template is not enabled to have AMP support in the AMP -> General settings or the specific page is disabled from the Enable AMP metabox.

Pages tend to get AMP support disabled when changing it’s template, so if the Enable AMP metabox shows “Enabled” but the admin bar AMP button is disabled try disabling AMP, saving the page and then enabling it again to fix it.

You can validate your AMP page using The AMP Validator (URL with ?amp=1 at the end should be entered), or simply by visiting your AMP page in development mode (https://example.com/page?amp=1#development=1) and looking in the JavaScript console (F12 -> Console on Google Chrome). In the console it should either say AMP validation successful. or list the issues that the page contains.

If you use Google Search Console then it also provides info about your AMP pages status and sends you notice e-mails when something becomes invalid.

AMP plugin is located here: AMP plugin
Source code can be found on GitHub: AMP on GitHub

Now that I have AMP, what should I do?

Short answer – nothing. Search engines will detect that your site has an AMP version available and will act accordingly. They will serve the AMP page from search results when applicable (e.g. on a mobile device). The user will benefit from getting to your content quickly and if they wish to browse around they can take the additional seconds to load the main site to get the full experience.

There are theme options available to tailor whether main menu items should keep the user on the AMP pages or perhaps redirect all mobile users to AMP pages at all times, how ever these really aren’t necessary since the goal of getting the user from a search result to your content quickly has been fulfilled.

AMP developer tools

AMP developer tools can be enabled from WordPress admin dashboard -> Users -> Profile if you are an administrator.

The tools provide info about validation errors, CSS usage and allow for paired browsing.

Usually when there is an error the AMP plugin will remove invalid markup and the page will still be valid. In order to no longer see the warning about it you can mark the issue as Reviewed on the AMP -> AMP Validated URLs page. If the issue keeps popping up on every page you may also be able to resolve it by suppressing the plugin that is causing it from AMP -> Settings -> Advanced Settings -> Plugin Suppression.

Alternative content on AMP pages

While you want to keep the content on AMP pages same as the main page, not everything with WordPress can function on AMP. For example forms behave quite differently and are therefore not supported easily.

Chap shortcodes can use special class names, amp-invisible and amp-only, to create fallback content for AMP pages that can direct the user to the main website or provide alternative content.

<span amp-invisible>
  <contact-form-7 id="123" title="Contact form 1">
</span>
<button primary amp-only right labeled icon icon="mail forward" url="/contact" rel="noamphtml">Go to contact form</button>

In the above example, a Contact Form 7 form is only displayed on the main website, while on the AMP version a button is displayed that directs the user to the contact form. The link element should have rel="noamphtml" attribute specified to prevent the AMP plugin from adding the ?amp attribute to the end of the URL. If you’re using the block editor and are unable to add a rel attribute you can also add ?noamp=available to the end of the URL to prevent it from linking to the AMP page.

So when using features from third party plugins that may not work well on AMP or even invalidate the page, you can omit them from the AMP page by wrapping them in a shortcode that uses the amp-invisible class. Adding that class to a normal HTML element will hide the content on AMP page but will not guarantee that it gets removed from the DOM (in which case it can still invalidate the page).

Chap theme AMP support

In summary, Chap WordPress theme comes with AMP templates built-in. The templates will draw from the existing theme options to create the color scheme that has been chosen for the main site, making them look and feel similar. The templates also provide a sidebar menu, with the website’s brand, title and tagline, the primary navigation and a search box. The templates have been tested to not produce invalid AMP HTML and are therefore accepted by Google.