Google AMP setup for Drupal 8 and 9

Google AMP setup for Drupal 8 and 9

To speed up mobile pages, Google suggests using their AMP technology. It allows lightweight pages to be generated and they load faster than regular pages because of a special caching system. The Google search engine is more willing to promote such pages in search results (Yandex is not yet friendly with this technology).

In this article, we'll go through a step-by-step process to set up AMP page output on Drupal.

Installing module Let's start by installing the AMP module. We recommend using composer. For Drupal 8 and 9 (up to 9.1+)

composer require 'drupal/amp’

At the time of writing, the current version of module AMP 3.5 didn't support Drupal 9.1+. For this reason, install the dev version of the module, for Drupal 9.1+.

composer require 'drupal/amp:3.x-dev@dev'

All libraries required for work are installed by default with the module.

Theme installation

You'll need a design theme to display the AMP pages. Any Drupal 8+ compatible theme that meets AMP requirements can be used. The conversion and requirements can be found here.

We will be using a special and ready-made AMPTheme theme. Note that this theme is ready to use with AMP, but it does not contain styles. You will be able to add them yourself. Installing a clean theme will avoid conflicts and display issues that can arise when using a large and complex theme.

Setting the theme:

composer require 'drupal/amptheme’

Now we need to make a subtopic of ampsubtheme_example. You can create one yourself or use a sub-theme we have already prepared.

Topic title ampsubtheme can be changed, it must contain Latin characters, numbers and the underscore character "_". Rename the theme folder and all files containing ampsubtheme in the name. In the ampsubtheme.theme file, replace the occurrence of the ampsubtheme with your name.

On the admin/appearance theme management page, enable (install) your theme and AMP Base. Note that it does not need to be set as default, only enabled.

Setup

Moving on to setting up the admin/config/services/amp module. Select the subtopic to display.

Select the type of material you want to display as an AMP page and click “enable”.

Select AMP display and save the material type.

Move on to configure the "configure" display.

For text field format select AMP text, AMP Trimmed Text or AMP Summary or Trimmed depending on your text output needs. For images, select AMP image and configure.

Important! For the width and height values MUST be specified. You can specify a ratio, e.g: 16х9.

Check the operation of the module by going to the test page: admin/amp/library/test. If you see "The Library is working" then you have done everything correctly and everything is working.

To display additional AMP save buttons, you can activate the relevant checkbox:

Additional settings, the use of which is at your own risk:

• Advanced option - converts all HTML in the body field to AMPhtml. Not recommended as it may remove some of the HTML that does not conform to AMP standards.
• Experimental option - will generate the entire site in AMP format. Also not recommended - may also remove some HTML that does not conform to AMP standards.

Setting up and adding blocks

AMP pages, like normal pages, support block output admin/structure/block/list/ampsubtheme. Setting up is done in the same way as usual. You just need to select an appropriate theme.

You can add your own regions to the design theme. This is done as in the normal theme in the file my_amp_theme.info.yml.info.yml. Remember to reset the cache after making changes to the theme configuration file.

Summary

We set up a module and theme for AMP.

To access the AMP pages, query the page with the ?amp parameter in the address bar, e.g: node/12345?amp.

The module supports debugging mode. To access it, add a parameter to the address bar: ?amp&debug#development=1.

Advanced materials

Documentation of AMP technology with additional tags: amp.dev

Documentation for the module: accelerated-mobile-pages-amp/amp-version-83