--- title: "AMP installation and setup guide" date: "2019-08-20T10:15:59+00:00" summary: "Learn how to install and set up AMP for faster mobile content delivery. This guide covers module installation, theme setup, and configuration steps to optimize your Drupal site for accelerated mobile pages." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/amp-installation-and-setup-guide" id: "d7c7db5a-19f3-454a-9922-bcf28eefc12d" --- Table of contents will be added AMP (Accelerated Mobile Pages), are a stripped down form of HTML designed to be lightweight and serve mobile content much faster than regular pages. Search engines favour AMP pages when searching on a mobile device, as these pages load quicker than the full site. Step 1 - Install AMP and AMP theme ---------------------------------- Install version `8.x-2.1` of the [Accelerated Mobile Pages (AMP) module](https://www.drupal.org/project/amp) and version `8.x-1.1` of the [AMP theme](https://www.drupal.org/project/amptheme). We recommend using `composer` as it will install all dependencies and libraries needed, run the following composer commands to install the module and theme at the correct version. composer require 'drupal/amp:2.1' composer require 'drupal/amptheme:1.1' AMP installs a newer, incompatible version of the `Masterminds` HTML5 library, so version `2.3.0` of this should be installed: composer require masterminds/html5:~2.3.0 Once the module and theme are downloaded, enable the module through the UI or using `drush`. Step 2 - Setup AMP sub-theme ---------------------------- 1. [Create a sub-theme](https://www.drupal.org/docs/theming-drupal/creating-sub-themes) of the AMP theme, as per traditional Drupal practice. This theme will contain all of your AMP styling and templates. 2. Once created, install the theme through the UI or using `drush`, but don't set as default. 3. Navigate to `Appearance` > `Settings` > `AMP sub-theme` and scroll to the `Acquia Cohesion` section. 4. Check the `Generate templates only` checkbox. This setting prevents Site Studio from generating styles for this theme. 5. Click `Save configuration`. Step 3 - Enable AMP view mode ----------------------------- Enable the AMP view mode on your content types you want to configure for AMP: 1. Navigate to Manage display of a content type For example `Structure` > `Content types` > `Basic page` > `Manage display` 2. Scroll down to `Custom display settings` and open the accordion 3. Check the `AMP` view mode ![bf104b96-enable-amp-view-mode.png](https://acquia.widen.net/content/e15faa30-0ad4-484b-8a89-857ae4632225/web/bf104b96-enable-amp-view-mode.png) 4. Click `Save`. Step 4 - Setup AMP settings --------------------------- To configure and setup AMP: 1. Navigate to `Configuration` > `Content authoring` > `AMP configuration` 2. Set your custom AMP theme ![60d25bd4-configure-amp-module.png](https://acquia.widen.net/content/20be3b44-5eee-446d-98b7-90b26ba40f0c/web/60d25bd4-configure-amp-module.png) 3. Set `Power User: Run the whole HTML page through the AMP library` This will run the whole HTML page through the AMP library and convert HTML tags to AMP compliant ones. ![3d269297-enable-amp-library.png](https://acquia.widen.net/content/282ef721-3cb2-4e46-acee-e09776ad2521/web/3d269297-enable-amp-library.png) 4. Click `Save configuration`. Step 5 - Test AMP configuration ------------------------------- On the AMP configuration page click `Test that AMP is configured properly`. ![d030d64b-test-amp.png](https://acquia.widen.net/content/d563ce42-e98d-478c-9d7e-ab2e597bf107/web/d030d64b-test-amp.png) The test page should look like the below: ![84a8a590-test-amp-output.png](https://acquia.widen.net/content/044d424c-4674-4dc0-9780-9efdf8f380b8/web/84a8a590-test-amp-output.png) Navigate to a page and add the following parameters to the URL: `?amp&debug#development=1` For example: `http://www.mywebsite.com/about-us?amp&debug#development=1` This will display the AMP version of the page and provide debug information within your browsers console. Important If you see no content on the AMP version of the page, you may find that the layout canvas field is disabled for the the AMP view mode of your content type. Navigate to `Structure` > `Content types` > `[content type]` > `Manage display` > `AMP` to enable it.  You may also need to perform a rebuild to regenerate your templates (`Site Studio` > `Developer tools` > `Rebuild`). Useful resources ---------------- * [AMP compatibility](/drupal-starter-kits/add-ons/site-studio/amp-compatibility "AMP compatibility") * [Customising your AMP sub-theme](/drupal-starter-kits/add-ons/site-studio/customising-your-amp-sub-theme "Customising your AMP sub-theme") * [Drupal sub-theming](https://www.drupal.org/docs/8/theming-drupal-8/creating-a-drupal-8-sub-theme-or-sub-theme-of-sub-theme) * [AMP Drupal documentation](https://www.drupal.org/docs/8/modules/accelerated-mobile-pages-amp/amp-version-82)