Setting up AMP

Google Accelerated Mobile Pages logo

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.

1.

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

2.
TGMPA notice to install AMP plugin

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.

Other plugins that provide AMP support, such as AMP for WP, WP AMP, Better AMP, etc should be disabled as they will cause conflicts with the official AMP plugin.
3.

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

Ensure Website is checked under Experiences.
Ensure Website Mode is set to Reader.
Select post types that should be available as AMP – Chap theme supports Posts, Pages, Media and Products. Enabling additional post types will fall back to using the default template and should still be able to display your post title and content as AMP.
Chap theme AMP plugin settings
4.

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

5.
Metabox for toggling AMP support

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.

6.
Chap theme's AMP preview admin bar button

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.

Disabled AMP preview admin bar button

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

7.

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.

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.

Shortcode
<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">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.

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.

View this post as AMP

Leave a comment

Your email address will not be published. Required fields are marked *