An Introduction to AMP and Using it in Joomla

An Introduction to AMP and Using it in Joomla

Accelerated Mobile Pages, an acronym for AMP, is an emerging tool to provide mobile optimized pages to reduce page load times on mobile devices and can easily be implemented in Joomla.

As described on the AMP project page, the Accelerated Mobile Pages (AMP) project Google AMP is “an open source initiative that came out of discussions between publishers and technology companies about the need to improve their mobile content ecosystem for everyone – publishers, consumer platforms, creators, and users.” The driving force behind the initiative is to improve the browsing experience for mobile users, which is a growing segment of computer users worldwide. The main benefit of the project is speed; faster browsing experiences leads to more viewers engaging the content – the whole purpose of publishing a web page in the first place.

As with other announcements from Google, the long term implications of the AMP project are hard to determine. In the past when Google has announced changes to the search algorithm or other things affecting search engine optimization (SEO), companies have responded in various degrees according to the overall impact of the change. For example, web publishers have only slowly responded to the “HTTPS Everywhere” initiative first announced by Google in August of 2014. This is also the case with AMP which was itself first announced much more recently in October of 2015. Our bet is that when web publishers begin to recognize SEO gains by leveraging AMP and other page speed increasing technologies (such as NGINX cache, varnish, memcached, and CDN) they will jump on the AMP bandwagon.

AMP in A Nut Shell

What really is AMP? It’s really a conglomeration of several technologies including code sub-setting, tagging, and content delivery network (CDN), with the latter hosted by Google. In fact, a quick check of the code from one of our AMP pages shows the fact clearly:

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP is, in a nut shell, a web framework in which publishers agree upon a subset of web page technologies including elimination of all third-party java scripts. But what about the script code we revealed above from our AMP page? This script code is part of the AMP core technology and is processed from a file delivered through Google’s CDN, it’s not a third party script. Elimination of java scripts will certainly make web pages load much faster, but at the expense of functionality that is taken for granted such as most analytic packages and tracking tools. Banned HTML tags include object, embed, iframe, and all scrips other than JSON. Many HTML tags are supported though, and several new “AMP only” tags are introduced including amp-video, amp-audio, and amp-img. These new page elements are treated in such a way as to be constrained at will, like when the AMP publisher decides they can eliminate slow loading elements such as video from the page. CSS is also greatly reduced in AMP, with animation properties disabled along with limits upon custom fonts which are often the bane of slow loading web pages. The whole AMP framework is designed in such a way that publishers can prioritize the loading of critical page elements such as headlines and text over images. With such limits placed upon the design, the results are often anything but pretty, but they are fast!

Implementing AMP in Joomla

Weeblr, the producers of the widely used SH404SEF extension for Joomla, has produced a Joomla extension called wbAMP which makes publishing of AMP version pages easy in Joomla. The following is the simplified steps to install and configure the extension fresh from our experience of implementing it on two Joomla web sites.

1. Install the Extension

Download and install the extension from Weeblr. They have created both free and commercial versions of the extension, with the latter geared towards those who need advanced templating and social sharing features. Our instructions cover only the much simpler free (community) version. The Joomla package you install will publish two plugins, one of type “system” and the other “wbamp.” Be sure that at least the “wbamp” plugin is published, then move onto the next step.

2. Activate the Plugins

In the plugin manager, locate the wbAMP plugin and click it to set the configuration parameters. As with their SH404SEF extension, the plugin is laid out in an easy to configure pattern in which you simply configure each tabbed section from left to right. The primary settings which you need to enter for each tab are as follows.

3. Configure the “Plugin” Tab

Here you just need to set the suffix to be used on your AMP URL. Unless you have a compelling reason to use some other value, just accept the default “amp” in lower case letters. In our case, we already restrict our URL’s to lower case in SH404SEF so this setting was a no brainer.

4. Configure the “Select Pages” Tab

This is a tricky part during which our instructions may save you a large amount of grief. We suggest that for your first AMP pages you determine an appropriate Joomla category and create AMP pages for all of the articles in that category. If you desire, you can create a new category and then assign some articles to the new category. Take note that this category should contain either news articles or blog posts, nothing else, at least at the present time this is the content which should be delivered through this medium. Then just enter the following values:

Itemid(s) *

View(s) article

Task You can leave this blank

Com_content category(ies)   Simply select one or more categories from the dropdown list, that is as easy as it gets!

Article id(s) *

5. Configure the “Meta data” Tab

On this tab you need to configure your site name, header image URL (either absolute or relative), the dimensions of the header image in pixels, and your publisher information. Publisher information isn’t entirely intuitive. What you need to do is visit your corporate Google Places page and enter the values exactly as they appear on that page including your publisher name, publisher ID (the long numerical string in your Google Pages URL), and a publisher logo. For that last item you will need to create a new image which represents your company and make it exactly 600 pixels wide by 60 pixels tall. Upload the image to your web site and provide either a relative or absolute URL. Then enter the value of 600 for the width and 60 for the heights of the publisher image. Finally, set the default article type to either News or Blog Posting.

6. Configure the “Analytics” Tab (Paid Version Only)

Assuming that you are using the community edition, you can skip that tab entirely.

7. Configure the “Custom Elements” Tab

The only attributes which can be set in the community edition are to select a Joomla module from the drop down list that you want to display as a footer. You can also add any customer CSS that you want applied or links that you want added to the HEAD section of the document, such as a link to your corporate home page. For now, we left this section entirely blank except to select a footer module.

8. Configure the “Ad Networks” Tab (Paid Version Only)

Assuming that you are using the community edition, you can skip that tab entirely.

9. Configure the “Advanced” Tab

Here you need only to set the cache time in seconds and choose whether to utilize GZIP on the page.

10. Complete the Final Configuration Steps:

You will need to log into your Google Webmaster Tools account and submit the new AMP URL’s to Google. There are two methods in which you can accomplish this, the manual process or the automated one through submission of a site map.

A. Manual Process (Not Desired)

Hopefully you don’t have more than a few dozen, as you may already know that the process is very time consuming. To summarize, first select your domain. Then scroll down on the left side menu and expand the “Crawl” section, then “Fetch as Google.” Next, enter the ending portion of each of the URL’s from that category of Joomla articles and include the “/amp” suffix on the end. Then select “Fetch” and once that has been completed select “Submit to Index” after answering the challenge bot CAPTCHA questions successfully. Once you have submitted all of your URL’s, here is a link to what an AMP page will look like:

https://www.ufcinc.com/User-Friendly-Consulting-Inc-Blog/the-importance-of-data-capture-software-for-accountants/amp

B. Automated Process (Desired)

Since the popular site map extensions available in Joomla do not yet support automatic creation of AMP sitemaps, you will need to use a work around to get this done so that you can submit a sitemap to Google in Webmaster Tools (Sitemap section) so that all of the AMP pages are indexed automatically. To leverage this easy work around, just download the regular XML site map of your site. If you don’t already have a sitemap, then install an extension such as JSiteMap Pro or visit one of the many free sitemap generation tools available on the web. Second, edit the XML sitemap in a text editor. Delete any obvious URL section for which you did not create AMP pages. Second, search for the text string “</loc>” which marks the closing tag for each XML entry of the URL value. Next, assuming that you used the default value of “amp” as a URL suffix, just replace the </loc> string everywhere in the file with “amp/</loc>” thereby adding the AMP suffix to each URL. Finally, upload the new sitemap file to the root of your web site (we suggest using AMP in the name, such as amp-sitemap) and visit Webmaster Tools to submit the new AMP sitemap. This will then accomplish the addition of all of the AMP friendly URL’s to Google, saving you many hours of adding them manually! Remember that since this was a manually generated sitemap, when you add new articles to the affected categories of your web site you will need to go back and either update the sitemap or just submit those new URL’s to Google (more about this below). It would be easy to create a simple macro that would automate the search and replace function of the sitemap edit, but hopefully this challenge is solved in future releases of the Joomla sitemap tools.

Note: We discussed with the makers of the JSiteMap Pro extension on their forum whether they would build a sitemap data wizard such that the AMP sitemap that could be automatically created and then submitted to Google. They said that they are considering this idea but will wait and see if the use of AMP becomes commonplace. If you are interested this is a linkthis is a link to the discussion.

Conclusion:

All of our configuration worked out very well and we were able to view the resulting AMP pages nicely on our iPhone. We noticed that the layout wasn’t perfect, specifically the Joomla attachments extension which created some display irregularities at the bottom of the article. But it did load very quickly. We tested the page load speed in a side by side test on Webpagetest.orgWebpagetest.org and noted a substantial decrease in loading time. We have some issues with the methodology used in their testing as our Joomla web page is delivered through an extremely fast NGIX cache, however we are penalized by the various asynchronous scripts that we load for the purposes of analytics and chat functions. In reality, both the AMP and plain Joomla pages load very fast regardless of the test results. What we need to keep in mind is that with AMP system we have a means of restricting the content which we desire to display, and doing so in an agreed upon way through the coding conventions adopted in the code subset. Only time will tell as to the degree of adoption of AMP, as well as the desirability. Rather than wait on the sidelines, why not push out a few AMP pages today and see if this improves your SEO.

Related Articles/Posts

Rate this blog entry:
6 Steps to a Successful FlexiCapture Distributed I...
Disruptive Innovation Part 1: Software Impacting D...
 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Guest
Tuesday, 14 November 2017

Search the Blog

Blog Archive

Our Bloggers

My role in the company is digital marketing. I hav ...