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.
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.
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
ampsubtheme with your name.
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.
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
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
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.
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:
The module supports debugging mode. To access it, add a
parameter to the address bar:
Documentation of AMP technology with additional tags: amp.dev
Documentation for the module: accelerated-mobile-pages-amp/amp-version-83