“The Accelerated Mobile Pages (AMP) Project is an open-source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.” Accelerated Mobile Pages Project https://www.ampproject.org/
Drupal AMP Module, Theme, & PHP Library Suite https://www.drupal.org/project/amp https://www.drupal.org/project/amptheme https://github.com/Drupal Update/amp-library
Install and Enable the AMP Suite
- Installing the AMP Suite requires the use of Composer. This must be done at the command line so ask your developer for help if you need it.
- The commands typically are: >composer require drupal/amp >composer require drupal/amptheme
- Go to the Extend page: Click Manage > Extend (Coffee: “extend”) or visit http://yourDrupal8site.dev/admin/modules in your browser.
- Select the checkbox next to “Accelerated Mobile Pages (AMP)” and click the Install button at the bottom of the page. There are no separate permissions required for the AMP module.
Install the AMP themes
- Go to the Appearance admin page by clicking Manage > Appearance (Coffee: “appearance”)
- Click the Install link below ExAMPle Subtheme.
Configure AMP
- Go to the AMP module admin page by clicking Manage > Content authoring > AMP Configuration (Coffee: “amp”) or visit http://yourDrupal8site.dev/admin/config/content/amp in your browser.
- Configure the module as shown above: A. Under AMP theme, select ExAMPle Subtheme. B. Enter your Google Analytics Web Property ID which can be found in your Google Analytics module settings (coffee: “Google Analytics”) or by logging in to Google Analytics and visiting Admin > Property Settings > Tracking ID. C. If you use AdSense or Doubleclick, enter their respective numbers in the fields provided.
- Click the Save configuration button at the bottom of the page.
How do I enable AMP for Drupal Content Types?
- Go to the AMP module admin page by clicking Manage > Content authoring > AMP Configuration (Coffee: “amp”) or visit http://yourDrupal8site.dev/admin/config/content/amp in your browser.
- Click “Enable AMP in Custom Display Settings” link
- On the following page, open the “Custom Display Settings” drop down.
- Select the “AMP” checkbox.
- Click the Save button at the bottom of the page.
- Repeat steps 1-5 for each Content Type that will use AMP.
Configure display blocks for the AMP theme You can see the AMP version of your pages by adding “?amp” to the end of any node that you’ve set up in this way. You may see a lot of extra blocks in the header that pushes your content down below the fold. You can rearrange the blocks or remove them from the theme. In this example, we’ll go with the ExAMPle sub-theme but this works on any theme.
- Go to the ExAMPle subtheme Block layout admin page by clicking Manage > Structure > Block layout and then clicking ExAMPle Subtheme (Coffee: “block”)
- In the Region column next to each Block, change the drop-down from “Header” to “Footer” or “None”. Header blocks appear at the top, Footer blocks at the bottom, and None will be hidden on this theme.
- Click the Save blocks button at the bottom of the page. Take another look at your AMP pages. They should look cleaner and easier to read.
Validate AMP pages 1. Go to one of your AMP pages on your website. 2. View source and copy the HTML.
- Visit https://validator.ampproject.org/
- Paste in the HTML.
- The site will give you inline error reporting alongside the HTML source of the page. Now, you wait for Google to crawl your website. The Googlebot will automatically detect that you have AMP-compatible pages. After you added AMP.
