Have you ever noticed an AMP tag at the beneath, which can only be discovered through mobile search, that’s because the Google AMP (Accelerated Mobile Pages) is now a days a common widespread tool used by brands, those who are looking to boost their SEO and provide its customers with clean and instant-loading website on mobiles.
Google AMPs are often compared to Facebook’s Instant Articles. Nevertheless, both of them share the same goal of providing users with the fast-loading web pages on their mobile screens. Facebook’s Instant Articles aim to easing the pain for their app users, even if AMP can be reached with a web URL. On the other hand, Google team-up with powerful launch partners in the publishing and technology sectors, to impact the future of content distribution on mobile devices with Google AMP.
In today's digital ecosystem, Google AMP is the hottest thing on the internet, with over a 25 Million website domains, and have published over 4 Billion AMP pages, it supports the projects to be a huge success within a short span of time. Google AMP comprises of two most important features, speed and support for monetisation of objects, AMP implication is far more reaching for marketers, enterprises, small and medium businesses, e-commerce and other big and small organisations. It comes with no surprise that AMP pages in Google AMP, get featured more prominently in Google SERP, as it’s a Google initiative with great features.
The process of implementing Google AMP on a Drupal website is fairly simple and a straightforward process. For both Drupal 7 and Drupal 10 there’s a great module which ensures the connection of Google AMP with Drupal.
We have written a really useful introduction, highlights, key benefits, and tutorial of using an AMP. Since, there’s not a big difference in the process of AMP implementation for Drupal 7 and Drupal 10, this article can be suitable for both versions of the Drupal platform.
What is AMP?
Due to the huge rise in the number of mobile these days, the need for providing the best desktop like user experience to users by businesses does not just cut it. Today smart phone users come with a much smaller attention span and varied internet speeds, but businesses can cater to these specified challenges with a much faster loading, light-weight and an app-like website with Google AMP.
AMP is an open-source framework that simplifies the HTML codes, streamlines CSS rules, restricts the use of JavaScript (instead of which, AMP’s component library is used) and delivers the web pages to users via a Google AMP cache (which is a proxy-based Content Delivery Network).
Why AMP?
Google’s open-source initiative aims at providing streamlined web pages to mobile browsers and other apps, with technical architecture of digital assets.
It is Fast, like Really Fast
When comparing to normal mobile pages, Google AMP loads web pages, twice as fast and with less latency. Intended in providing the fastest user experience for mobile users, customers will be able to access content faster, and they will be more likely to stay on the page to make a purchase or enquire about your service, because they won’t be taking long.
An Organic Boost
The eligibility for an AMP that’s on the top of the Google Search Results Page, ensures a significant increase in the organic results and traffic on the web page, which can be a major boost for the online visibility of an organisation. Google AMP plays a major role in attracting far more traffic on your website, though it’s not responsible for the increasing page authority and domain authority.
ROI
Even when we compare AMP with other equivalent technologies in the market, the cost for adopting AMP is much lesser as it leverages but not disrupting the existing web infrastructure of a website. And as a result, Google AMP ensures the better and much superior user experience which indeed enables better conversion rates on mobile devices.
Installing the Google AMP module
For the start, you can work using AMP modules for Accelerated Mobile Pages, and if you are familiar enough with the working of Drupal then you will know that the name is self-explanatory, which means modules are more or like plugins which enables a specific behaviour on your website.
In order to install a module, you will need a composer which then enables the packaging for PHP and allows you to install dependencies. The best way to achieve this in Drupal 7 is to make use of a module named Composer Manager. And in the case of Drupal 8 (or 10), it uses a built-in PHP autoloader, so you won’t be needing to use Composer Manager. So, if you are using Drupal 10, you can skip this step of the tutorial.
Downloading modules and themes
To download the Google AMP modules and themes, you need to type the following commands within your Drupal directory.
First: drush dl amp, amptheme, composer_manager
This command will download the AMP module, AMP theme, and the Composer Manager tool that we mentioned above. After the modules has been downloaded, you can now enable the AMP theme, its sub themes and the Composer Manager tool. Always enable the Composer Manager tool before you enable the AMP module, since it requires the Composer Manager up and running.
Then: drush en composer_manager, amptheme, ampsubtheme_example
After the above command you can now enable the AMP module by typing the following command,
drush en amp
To quickly enable the AMP module, Composer Manager, and both the AMP theme and its sub themes, this set-up was a straight forward, and non-problematic way.
Now you can start to fully customise the look of your web page, and before that you will need to configure Drupal to work with AMP module. For that you need to visit /admin/config/content/amp and in here you will see all the necessary content types for your website.
It’s definitely crucial to consider which all content types will be used in your website to AMP enable, but blog posts and articles lend themselves best to AMP modules. By making use of this strategy, you can build a strong SEO for your website and boost your organic visibility on the Google SERP, as the Text content driven pages will serve the information much faster, without compromising on the looks and behaviour.
After you have decided on the type of the AMP posts on your website, click on the “Enable AMP” link in the Display Settings, which will now open a field-set. Here tick the box for “AMP and Save”, and this will point you to a new link ”Configuring AMP view module”, where you will now see an option to select which all fields your web page will be displaying. At this point, it will be a good idea to change all the field formatters to AMP formatters, for example; AMP Image, Iframe, and text, the gear icon will allow you to perform some extra changes as well.
The changes you just made are the critical parts of the AMP module, as they will help in forming the AMP components on your page. Any mark-ups which are not valid or cannot be translated for the AMP page, will be taken out of the view to ensure it validates.
Creating a theme
You might be remembering an exAMPle sub theme that’s enabled when you were enabling different types of modules. This sub theme is a great guide for creating a theme for this AMP module.
You can enable this theme, or any custom one from in/admin/config/content/amp. The base theme will be responsible for enabling all the necessary mark-ups which are based on the core’s Stable theme to keep things clean.
The provision of sub theme is there for you to develop and create custom styles and looks for your pages, but make sure to keep your CSS below 50k as it’s the limit. This can either be achieved by amp-custom-styles.css (Drupal 7) or in amp-custom-styles.html.twig (Drupal 8, 9 & 10).
Developing a custom template from the given sub theme will be a fairly simple process as Google AMP does not accept custom JS and all the content has to be written in CSS. If you are planning to write content in SASS, then we would strongly discourage you, as it will be much harder to control the size of the CSS, it’s worth to keep this in mind that until and unless its short when compiles to a right format and file, SASS is not recommended.
When developing a theme for web pages, you will encounter an issue with responsive image, as the module will convert any images used on the page to an AMP Image. This creates and issue with the image responsiveness, if you want the images to be responsive, AMP has its own layout properties, so you will need to apply this to the image in the HTML tags, rather than just in the CSS. This is done using a hook in the module, the function itself has to be overwritten.
The following is the overriding function that checks for images on your page and assigns all of the attributes of the images to the new AMP Image tag with a layout=”responsive” attribute, which will allow all the AMP Images to be responsive ready. This function should be placed in the template.php of the sub theme, you can find the original function in the main AMP theme 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>';
}
Conclusion
Now you have successfully created an AMP page. In order to view the changes you made, add “?amp” at the end of the URL and it should preview the results. There are many great tools that can help you in testing your web pages and ensure its AMP valid, like;
AMP Test: This is a very handy tool which enables very efficient debugging, as it shows accurate and descriptive errors for an online page.
AMP Validator: This is another great tool that checks all your mark-ups, and checks for bugs on the static version of the source which you copied.
Happy AMP-ing!
