fbpx Guide to Google AMP on Drupal Websites | Drupal 8 and Mobile Apps Development Team

Guide to Google AMP on Drupal Websites

Google AMP (Accelerated Mobile Pages) is a widely known open-source technology for accelerating the performance of mobile web pages. It is provided in the form of a JS library. It was released in 2015 and, according to the Google team, its usage is not capable of enhancing ranking in search engines. The speed of performance this technology offers, however, can cause quite a felt boost in the increase of the website SERP positions.

Integration of Google AMP is considered to be most relevant for blogs, news resources, info sites, and landings. Nevertheless, the speed of a site’s loading can influence its rank in search results, which makes AMP an optimal option also for online stores. That is why we decided to consider the nuances of applying Google AMP for Drupal - one of the most popular CMSes for the creation of prevalently commercial web resources (NOTICE: further in the article, we will be using the term ‘Drupal’ to describe the 7th and 8th versions of Drupal).

Google AMP Integration: Is It Worth It?

Before we tell you how to use AMP with Drupal, we would recommend evaluating all the pros and cons of this tool. Thus, in order to realize how proper an employment of Google AMP on your particular web resource is, let’s consider the advantages of this integration:

  • Page load speed acceleration, which is among the decisive factors in the website promotion (particularly, having been developed by Google, AMP pages available for mobile users might as well be a helpful feature in the improvement of ranging in search engines);
  • Optimized АМР pages are placed in the carousel in the Google’s top mobile search results;
  • Availability of AMP modules for all known engines (including Drupal) that help to convert website to AMP.

For the sake of objectiveness, we will also highlight the technology’s disadvantages (which mostly concern developers instead of regular users). In particular, they are as follows:

  • AMP is difficult to implement for beginners and those without the experience of working with HTML;
  • АМР makes complex projects even more complicated;
  • Customization features are quite limited while the development of responsive web design requires an extensive developer experience.

What Changes Does Google AMP Bring To A Web Resource?

The page content enriched with the Google AMP HTML tags is different from plain content in that the rendering and page load are quite faster (while the elements that create an excessive stress-load are simply being deleted). Thus, according to the official Google claims, an employment of Google AMP accelerates the page loading speed by 15-85%. As for the technical implementation, a link that makes Google know that an AMP version must be displayed in the mobile search results is integrated with the page code.

When an AMP page appears in the mobile device Google search results, it is situated on the top, right below the paid advertisement content, with the special AMP marking.

Drupal & Google AMP Integration

In order to integrate AMP with Drupal, you will need to simply install the module of the same name (in the case of Drupal 7, you will additionally need Composer Manager that includes a PHP wrapper and allows setting up dependencies; Composer Manager is unnecessary if we are talking about the AMP support in Drupal 8).

Let’s get to the stages of integrating Google AMP module elements, then.

Launch AMP Module

If you are using Drupal 7, enter the following command in the console:

drush dl amp, amptheme, composer_manager

You will launch an AMP module, AMP theme, and Composer Manager.

Enable AMP Module

Once everything is loaded, you will need to enable all the new components. First off, the Composer Manager should be turned on, as an AMP module and AMP theme require it to be enabled in turn. Thus, enter the following:

drush en composer_manager, amptheme, ampsubtheme_example

drush en amp

The last line of the code enables an AMP module itself.

Configuring Drupal for Usage With Google AMP

Your Drupal platform must be reconfigured in order to get the ability to customize an updated web page. To do that, go to /admin/config/content/amp.

There, you can access all the types of data existing in your web-resource.

This stage is required so that you could define the AMP-preferable types of content. For instance, not many websites can do without the text filling, while many graphic and stress-loading elements (e.g., banners) can be safely neglected.

Once the type of content with the AMP support is defined, click ‘Enable AMP in Custom Display Settings’ to manually define the needed fields. Then, save the changes.

Enabling Sub-Theme

We have connected an exAMPle theme in one of the previous steps. If you wish to enable some user sub-theme, just enter the /admin/config/content/amp directory in your Drupal. Make sure that your CSS exceeds 50K at that.

That’s It!

You have successfully created an AMP page! Do you want to see how it operates now? Just add ‘?Amp’ at the end of the URL address of the page, load an updated page and start its testing (read further which tools can be used for that).

How to Provide Responsive Web Design Using Google AMP In Drupal?

Once Google AMP is connected with Drupal, many developers face the issue of responsive web design, in particular, the images that must be automatically scaled depending on a user device.

In such a manner, if you need all the images situated within the confines of a Google AMP page to react to the physical device dimensions they are launched on, you will have to use HTML tags instead of CSS tags.

Take a look at a use case of this function (which should be placed in the template.php file):

function subtheme_image(&$variables) {

if (isset($variables['attributes']['typeof'])) {

unset($variables['attributes']['typeof']);

}

$attributes = $variables['attributes'];

$attributes['src'] = file_create_url($variables['path']);

foreach (array('width', 'height', 'alt', 'title') as $key) {

if (isset($variables[$key])) {

if (empty($attributes[$key])) {

$attributes[$key] = $variables[$key];

}

}

}

return '< amp-img layout="responsive"' . drupal_attributes($attributes) . '>< /amp-img >';

}

How to Analyze The Performance of A Website With The Integrated Google AMP?

In order to analyze how correctly your resource’s web pages are performing after the Drupal AMP integration, experts usually recommend to try out two prominent software tools: Test AMP and AMP Validator.

google-amp

Conclusion

It is time to summarize our ‘How to implement Google AMP in Drupal’ tutorial. As you can see, with the right approach, the Google AMP technology can accelerate your mobile website performance and influence its ranking. If you are looking for professionals that would convert site to AMP or planning to build such a solution from scratch, let’s bring your ideas to life together.

Drupal Mon, 12/17/2018 - 14:38

Contact from Blog

Please read our Privacy policy first. You'll be able to send your inquiry in case you confirm that we can process and administer your personal information.

We use cookies on our website to support technical features that enhance your user experience.