Accelerated Mobile Pages (AMP) is an open source project initiated by Google to provide better and fast experience to the user on mobile. The biggest reason you should be integrating AMP pages with Drupal 7 and 8 websites is to rank better in google and display content faster on mobile devices.
This tutorial wil explain what, why and how of AMP implementation in Drupal.
Components of AMP
There are 3 core components which are required to build an 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 needs to be added to the AMP page.
- AMP Cache - AMP cache uses Google AMP Cache to serve cached AMP HTML pages.
Integration of AMP with Drupal 7 and Drupal 8
Integrating AMP with Drupal is really simple as installing a module, literally a module. Drupal's 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 Drupal AMP module, theme, and library
The 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 the composer manager module as well but in the case of Drupal 8, you can skip it as Drupal 8 uses PHP autoloader. First, you need to run drush command to download the required modules and these.
Download AMP module for Drupal 7
drush dl amp, amptheme, composer_manager
Download AMP module for Drupal 8
drush dl amp, amptheme
This command will download the AMP module and theme.
Next step is to install the module and the theme.
Enable AMP module for Drupal 7
drush en composer_manager, amptheme, ampsubtheme_example
drush en amp
You can notice that the composer manager is installed before the AMP module to make sure that it handles AMP module dependencies.
Enable AMP module for Drupal 8
drush en amp, amptheme, ampsubtheme_example
Once the module is AMP module will also download the AMP library which is defined in its composer.json file as a dependency.
There is another option to download the Drupal AMP theme and module with a dependent library which is to run "composer require" command.
composer require drupal/amp
composer require drupal/amptheme
Before going further make sure that the module is enabled, the library is present and there is no error in the 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.
On this configuration page choose the content type for which you want to enable Accelerated Mobile Pages. Clicking on the "Enable AMP in the Custom Display Settings" link will take you to the content type's manage display page.
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 go to "Manage Display" settings of the content type for which you enabled AMP pages. Now go to the AMP display to configure the field according to AMP standards.
By default fields in AMP, display mode will look like 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 formatter. In the above example, we got an image field for which the "AMP Image" format can be used and for body field "AMP Iframe" format can be used. Formatter can differ based on the requirements and which formatter is best suited according to the standards.
You can notice that "Disqus Comments" is disabled because of it dependent on external js and this violates the AMP standards. After these simple steps module configuration is complete.
Configuring the Drupal theme for AMP pages
Once the Drupal 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.
AMP theme will generate valid markup according to 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 than 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 go to website's google webmaster account's search console dashboard, under Search Appearance click on Accelerated Mobile Pages.
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.
Know more about AMP
- 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 whom this is for. AMP documentation, different tools, and case studies can also be found here.
- AMP by Example provides a hands-on introduction to Accelerated Mobile Pages (AMP) focusing on code and live samples.
- The AMP Channel - The official AMP youtube channel.