AMP implementation in Drupal 8

11 Nov 2017
AMP in Drupal 8

Today, we will see AMP implementation in Drupal 8. AMP stands for (Accelerated Mobile Pages) and it was launched in 2016. But now most of the content based sites are implementing it for good SEO results. It requires complete new setup process and it works with lots of terms and conditions like you can not add JS on AMP pages, even limited CSS is allowed. The first key thing to understand is that AMP does not replace your entire site. AMP exists to provide a lightning fast way for site visitors to view articles and other content-focused pages.

AMP implementation

AMP requires AMP Module and AMP theme, but it needs to be installed from composer. By installing from composer, all the dependent libraries of AMP gets installed. So, If you are working on a environment which doesn't have composer installed. You can work around, by installing it first on your local machine and then moves library files to the server, and it will work.

AMP Installation Steps

  1. Go to your document root directory and run composer require drupal/amp. It will download amp module with its dependent library. You will find the module in /modules/contrib/amp and amp library in /vendor/lullabot.AMP Module
  2. After that Download the AMP theme with composer require drupal/amptheme. It will download the amptheme inside /themes/contrib/amptheme. It will have 2 themes "amptheme" and "ampsubtheme_example".AMP Theme
  3. Now, enable ampsubtheme_example theme, and change settings from "/admin/appearance/settings/ampsubtheme_example".

  4. After enabling theme, go to "/admin/modules" and enable AMP module.

  5. Go to /admin/config/content/amp and select your AMP configuration options.

  6. Go to `/admin/structure/block/list/{AMP-SUBTHEME-NAME}` and set up the blocks for the AMP page.

  7. Go to manage display of your content type "/admin/structure/types/manage/news/display" and Check AMP from custom display settings.

  8. After that go to AMP tab in Manage Display and select AMP tags from available format for each field.

Now, AMP Implementation is done. Create some content on your site and check for "node/1?amp=1". Use ?amp after any node url and you will find the AMP page. Now you can theme it as per your requirement, that is not a part of this tutorial article.