Skip to main content

Blog Post

Ramping Up with the AMP Module in Drupal 8

By now, you should have heard about the latest buzz that is Google AMP - but if not, check out our previous introductory post to learn about the benefits (and potential pitfalls).

For the ever-extensible CMS that is Drupal, the AMP module couldn’t have been released at a better time and is available for both Drupal 7 and 8. With the introduction of the AMP module, publishers and content authors can easily create and convert existing Drupal content to meet AMP standards.

This post will provide a roadmap for using the AMP module in Drupal 8, from initial configuration to integrating with Google Analytics.

Setting up AMP

Install the module as you would any other contrib module - through the Drupal “Extend” UI, using drush ( drush en amp -y), or using composer (composer require drupal/amp)Once you have the AMP module installed, install AMP Theme which works together with the AMP module to act as the base theme for your AMP’ed content. Now, enable the module, install the theme (but do not set it as the default - as this theme is only for your AMP content), and get ready for the real fun..

Go to /admin/config/content/amp to start configuring your AMP settings. Here, you are able to identify which content types you want to have the AMP display.


Click “Enable AMP in Custom Display Settings” next to the desired content type - where you will be directed to the content type’s display page. Expand “Custom Display Settings.” check “AMP,” and hit “Save.” Now, you should have an “AMP” display on your content type. Good job - you’re halfway there!

On the “AMP” display, you are able to set up the fields that will show up on the AMP version of the content type. Since AMP follows its own subset of HTML (AMP HTML), be sure to use the respective AMP formatters for each field:


Your display should look something like this:

The benefit of adopting AMP is to minimize the page weight to improve page load times. We need to edit the block layout for the AMP theme to include only what we want to be displayed. Go to the block layout page for your AMP theme (/admin/structure/block/list/[AMP-THEME-NAME]) and remove all the blocks that you don’t want showing up in the AMP version (most of the blocks should be removed to keep a simple layout - usually only the site branding, title, and content should be on the display):

Now that we’ve structured some AMP content, let’s add some metadata to make our page discoverable! The AMP module provides an easy way to do so and uses Schema.org for use by search engines. Go to admin/config/content/amp/metadata and click on the “Add AMP Metadata” button. We are going to add some global metadata:


Hit “Save”.

We all love analytics. Who doesn’t want to know who’s visiting their site? The AMP module offers an easy way to integrate with Google Analytics on the configuration page. amp-pixel, used to count page views can also be easily enabled:

One last (and very useful!) configuration provided by this module is to allow your entire HTML page to pass through the AMP Library to ensure and validate the full page is valid AMP HTML. On the AMP configuration page, check “Power User: Run the whole HTML page through the AMP library” checkbox to add this extra layer of validation:

And now you’re finally ready to view the AMP page you’ve created! If you haven’t already, create a piece of content of the content type that has the AMP view mode enabled (we will create a test Article). On the edit page, there should be an extra option under the save button to “Save and view AMP page”:

Select that option, and you should now be viewing your new AMP’ed page! (Pro-tip: another way to access the AMP version of an AMP-enabled node is to append ?amp to the end of the page URL)

How do I know that I am viewing the AMP version of my page?

There are a few ways to check:
1. If you view the “Console” tab in Chrome DevTools, you should see a “Powered by AMP” message:

2. Similarly, your see amp and amp-version in your <html> tag.
3. The amp-boilerplate is also added in your <head>.
4. The AMP metadata that we added earlier also shows up in the <head> section:

And that’s it! Congratulations on converting your first piece of Drupal content to AMP!

As Google AMP becomes more and more popular as the standard to adopt, it is important to keep up-to-date with the changes. The best way to do so is to regularly check the AMP documentation.

Additional Resources
AMP’lify Your Website: Google AMP 101 | Blog Post
5 Drupal 8 Development Tips | Video
How to Prepare Your Website for Drupal 8 | eBook

Ed

Meet team member, Edward Chan

Edward brings four years of Drupal and full-stack experience to his role as a Developer at Mediacurrent. He has experience in all tiers in the Drupal stack- from front-end theming,...

Learn more about Edward >
Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow