How to create AMP pages on Drupal to rank better

How to create AMP pages on Drupal to rank better

Why to use AMP with Drupal?

Accelerated Mobile Pages (AMP) is an open source project initiated by Google to provide better and fast experience to user on mobile. Biggest reason you should be integrating AMP pages with Drupal websites is to rank better on google.

Components of AMP

There are 3 core components which are required to build a AMP page:

  • AMP HTML - AMP HTML is actually a normal HTML but with few restrictions and some custom AMP properties.
  • AMP JS - To make sure pages render faster on mobile, AMP standard doesn’t allow any external js on a page. AMP JS is a standard JS file which need added to the AMP page.
  • AMP Cache - AMP cache uses Google AMP Cache to serve cached AMP HTML pages.

Integration of AMP with Drupal

Integrating AMP with Drupal is really simple as simple as installing a module, literally a module. Accelerated Mobile Pages (AMP) is a module which will help you to convert normal pages into AMP pages automatically without making them from scratch. This module help to comply with the standards guided by Accelerated Mobile Pages Project team to make a page render fast on mobile.

For the integration of AMP with Drupal you need to have these 3 things:

Downloading and installing AMP module, theme and library

First thing to do is to get the AMP module and theme with the library to support it. Drush and composer is your best friend when it comes to development in Drupal. If you are using Drupal 7 then you will need composer manager module as well but in case of Drupal 8 you can skip it as Druapl 8 uses PHP autoloader. First you need to run drush command to to download the required modules and these.

For Drupal 7

drush dl amp, amptheme, composer_manager

For Drupal 8

drush dl amp, amptheme

This command will download the AMP module and theme.

Nest step is to install the module and the theme.

For Drupal 7

drush en composer_manager, amptheme, ampsubtheme_example
drush en amp

You can notice that composer manager is installed befor AMP module to make sure that it handle AMP module depencencies.

For Drupal 8

drush en amp, amptheme, ampsubtheme_example

Once module is AMP module will also download the AMP library which is defined in its composer.json file as dependency.

There is another option to download the AMP theme and module with dependent library which is to run "composer require" command.

composer require drupal/amp
composer require drupal/amptheme

Before going further make sure that module is enabled, library is present and there is not error in status report regarding AMP library integration.

Configuring AMP module for Drupal

Right now AMP module only converts node pages. So if you go to AMP module configuration page you will only see AMP status for Content Types only.

Enable AMP for content type

On this configuration page choose the content type for which you want to enable Accelerated Mobile Pages. Clicking on the "Enable AMP in Custom Display Settings" link will take you to the content type's manage display page.

Enable AMP display

On manage display settings page click on "Custom Display Settings" and check the AMP display option for the content type. This will enable the AMP display mode and now the field can be configured for this display mode.

To configure the content type field for AMP display mode goto "Manage Display" settings of the content type for which you enabed AMP. Here goto the AMP display to configure the field according to AMP standards.

Configure fields for AMP

By default fields in AMP display mode will look as the default display mode. To configure it properly first thing you might need to decide is what fields you want your user to see and are important to the page. You can disable the unwanted field as it will ultimately decrease the size of the page.

Next step is to configure the fields according to AMP field formatters. In above example we got a image field for which "AMP Image" formatter can be used and for body field "AMP Iframe" be used. Formatter can differ based on the requirements and which formatter is best suited according the the standards.

Fields configured for AMP

You can notice that "Disqus Comments" is disabled because it dependent on external js and this violates the AMP standards. After these simple steps module configuration is complete.

Configuring the theme for AMP pages

Once module and content type is configured properly, its time to select a theme for AMP pages and configure it. "AMP Theme" and its subtheme "AMP Subtheme Example" which we already enabled can be selected as AMP theme from admin/config/content/amp.

Configure AMP theme

AMP theme will generate the valid markup according the AMP standards. Sub theme can be generated from the base AMP theme to generate your own custom style for the AMP pages. Custom CSS can be done in amp-custom-styles.css from Drupal 7 and in amp-custom-styles.html.twig for Drupal 8. Make sure that CSS size is less then 50k as this is the limit in the AMP standards.

Next step is to configure the blocks which will be shown on the AMP pages and it totally depends on the requirements. AMP pages can be validated with chrome's AMP Validator plugin and make sure all the error are fixed before publishing the AMP pages because if AMP pages got errors them Google will not consider them valid and will not show on the mobile search results page.

Once functionality is live AMP pages can be tracked with Google Webmaster. Just goto website's google webmaster account's search console dashboard, under Search Appearance click on Accelerated Mobile Pages.

Google webmaster AMP status

This will show the status of all the indexed AMP pages and error which are found in them with solutions as well. Make sure all critical issues are fixed to make your Drupal website AMP pages rank better on mobile search results.

External resources

  • AMP Project is the official site of the project with all the information about it. Here you can find answers to questions like what it is, how it works and from whome this is for. AMP documentation, different tools and case studies can also be found here.
  • AMP by Example provides hands-on introduction to Accelerated Mobile Pages (AMP) focusing on code and live samples.
  • The AMP Channel - The official AMP youtube channel.