Working procedure of AMP theme in Drupal 8/9

The AMP Theme is intended to generate the special markup required by the AMP HTML standard. For any node delivered via an ?amp path, the AMP theme is activated.

Like any other Drupal theme, the AMP theme can be extended with a subtheme, giving publishers as much flexibility as they need to customize how AMP pages are displayed. The AMP module is intended to transform Drupal pages into AMP-compliant pages.

Drupal pages can be transformed into pages that adhere to the AMP standard using the AMP module. AMP can be activated for any node after the AMP module is installed. Then, AMP content can be found on URLs like node/1?amp or node/article-title?amp. Additionally, there are unique AMP formatters for text, image, and video fields.

Install AMP for Drupal

Similar to adding other modules or themes using Composer, adding AMP tools to your site project is straightforward. In your project's root directory, type the following commands on the command line:

• By using the following command download the AMP module and its dependencies,

$composer require drupal/amp

• By using the following command download the AMP theme,

$omposer require drupal/amptheme

Two subthemes are offered by the AMP theme: AMP Base and ExAMPle. You have the option to build your own unique subtheme based on the AMP Base theme or utilize the ExAMPle subtheme that is already available. Subthemes should be added to the /themes directory if you want to develop your own unique AMP subthemes.

Enable AMP for Drupal

Enable/install AMP theme:

• Go to /admin/appearance to install an AMP base theme and AMP subtheme using the user interface.
• Drush's command-line interface can be used to install an AMP subtheme by using the following command,

$drush en ampsubtheme_example

Enable AMP module:

• Drush's command-line interface can be used to enable an AMP module by using the following command,

$drush en amp

• Go to "admin/modules" and select Accelerated Mobile Pages to enable the Drupal AMP module.

  Note: None of the AMP themes should be set as the default. Only AMP pages make use of AMP themes. Switch on the AMP module. Note that you should do this after installing the AMP themes.

AMP module configuration

After installation, the AMP theme needs to be configured and the content types for which the AMP subtheme can be used must be enabled. Navigate to "/admin/config/services/amp"

Theme:

• For the AMP pages, choose a theme. The AMP Base theme should not be used. You should see an option for the subtheme you installed in the previous step, and you should choose it.

• Select the sub-theme and click save configurations.

Content Types: 

• The list of content types is found at the top of the AMP Configuration page.
• Click the link to "Enable”.
• Open the "Custom Display Settings" fieldset, check AMP, and click the Save button.

• Click "Configure AMP view mode".
• The fields that will appear on the AMP page for each content type can be changed in the AMP view mode. Only a title, picture, and body may be sufficient for you.
• Use the special formatters for the text, picture, and iframe fields in the AMP view mode in order to output AMP components. Use the AMP Text formatter in the body field.
• Click the Save button.

Check the AMP page

To check the AMP page, add '?amp' to the end of the page's URL. For instance: "/node/8?amp". To ensure that the page complies with AMP requirements, replace the blocks with AMP blocks.

AMP Validation:

To test the validity of the AMP page, utilise the AMP Validator Google Chrome extension. It assists in quickly determining whether the current page is valid by generating a report outlining any issues that need to be corrected. It will show a Green icon if there are no bugs. If not, a red icon containing a list of bugs and warnings will appear, highlighting what has to be repaired by you.

Conclusion

The Drupal AMP module is a very helpful Drupal module that facilitates the quick and simple conversion of your Drupal web pages to meet the AMP standards.