CMS Plugins for Google AMP (Accelerated Mobile Pages)

Last Edited February 16, 2017 by Garenne Bigby in Search Engine Optimization

cms plugins amp

What is AMP?

AMP, short for accelerated mobile pages, is a new way to build web pages that will allow static content to render faster on a mobile device. There are three different parts of AMP in action.

AMP HTML is like regular HTML, but with some restrictions that enable a reliable performance, and it incorporates extensions that help to build content that is richer than basic HTML. AMP JS library makes sure that AMP HTML pages will render quickly. The Google AMP cache may be used to serve saved AMP HTML pages.

It can be said that AMP HTML is simply extended HTML with properties that are customized for AMP. Most of the tags in an AMP HTML page will be regular HTML tags, while some will be replaced with tags that are specific to the AMP design. These custom elements are called ANP HTML components, and allow common patterns to be easily implemented.

The AMP JS library holds all of the best performance practices for AMP, manages resources, and it gives custom tags to be used in AMP HTML. All of these things work together to ensure that web pages render quickly on mobile devices. One of the best things about optimizing in this way is that it ensures that everything coming from an external resource will work together in unison, making sure that nothing is blocked from rendering.

You might be thinking that you've seen AMP all around the web, but what you might have been seeing are standard mobile-optimized pages. What are the differences of the two? The differences are actually quite startling: the speed of loading, and how the content is rendered then delivered. AMP pages load about 4 times quicker than any page that is simply mobile optimized. How is it that they load so quickly? It is thanks to the specialized HTML, the specialized JavaScript framework for mobile pages, and the AMP cache that delivers all of the valid AMP pages.

There are a lot of factors that go into how fast an AMP will load, but what is important to know is that because the AMP pages are scaled down versions of a regular page, they will have to leave out some of the content in order to load quickly. How is this possible? With the specialized HTML, webmasters are able to get rid of the extra tags, and all 3rd party JavaScript is prohibited. In addition to this, they can leverage a CDN from Google to get delivered. To look at it simply, Google AMP pages are what would happen if regular HTML pages are passed through a strainer and were delivered with a competitive caching system.

In short, and AMP uses its own custom framework that allows for just a portion of the technical functionalities that would be found on a standard website. This is how the website is slimmed down and fills its promise to load 4 times faster than a standard site. The AMP page has to follow a particular set of rules for styling and layouts to be considered compliant with the guidelines set out by the project, thus being able to enjoy the perks given by Google. AMP pages rely only on CSS for styling, so webmasters are not able to use inline style attributes. Certain types of animations are disallowed as well, only to avoid problems with performance. While some may think that not allowing external stylesheets is a hassle, but all of that is explained within the project specifications and will outline the performance increase that is gained simply by including the CSS in the head tag.

What is a CMS?

Short for content management system, it is a computer application that will support the creation and alteration of digital content. Many times it is used to support multiple users that are working in collaboration. The features of CMS vary widely through each program, but most support format management, web-based publishing, indexing, search, and more.

A CMS typically has 2 major components: the content management application that allows the user to modify content on a site without the help of a webmaster, and the content delivery application that compiles that information and will update the website. The digital asset management system is another type of CMS. It can manage documents, pictures, movies, and data. It can also store, control, revise, and publish documentation. It is said that WordPress is the most popular content management system available today, next to Joomla and Drupal.

Content management collects, manages, and publishes information in any medium on the internet. When it is stored and accessed through computers, it is typically just referred to as content. This digital content can be text, multimedia, or any other file type that will follow the content life cycle and require management. This process is actually so complex that content management systems/software was developed so that the process could be automated. These content management systems are offered by many large and small software vendors.

The Reasons You Want to Use a CMS Plugin or Component?

Some of the most popular features of a CMS are that it can create SEO friendly URLs, it provides integrated and online help, there is modularity and extensibility, templating supports changing designs, there are install and upgrade wizards, there is both user and group functionality, there are integrated audit logs, and it is compliant with many accessibility frameworks.

The major advantages of employing a CMS is that it reduces the need for the webmaster to code from scratch. It also gives the ability to create a cohesive look and feel, as well as the ability to create a website quickly. You will also have control over the version of the site, and you can edit all permission management.


wordpress cms pluginWordPress and Google AMP

AMP for WP Plugin

 

This plugin will automatically add AMP functionality to a WordPress website. AMP has the ability to make websites faster for the visitors that are using it on mobile. In the update, some of the new features include: support for Disqus comments, support for Google tag manager, support for page, category, and tags, and a custom AMP editor- this allows the webmaster to override content that has been written in a post or page, so that specific content can be used with AMP if needed. The normal features that are still supported include the ever important mobile redirection- over half of a website's traffic will come from mobile users, so redirecting them to an AMP page it vital to their overall user experience. You will also be able to find support for custom post types, star ratings, the addition or a drag and drop page builder, 2 additional designs, AMP WooCommerce support, related posts below the post being viewed, a list of recent comments, support for Google analytics, advertisements in 7 sizes, an options panel that is user friendly, Google AdSense support, and an unlimited color scheme. Additionally, there is an upload for image logos, an overlay navigation menu bar, separate menus for the AMP version of a site, better stretching and sizing for images, embed support for YouTube, Twitter, Vine, Instagram, and Facebook, a custom AMP front page, as well as notifications.

It has been said that this plugin is the most recommended Accelerated Mobile Pages plugin within the AMP community.


AMP

amp plugin

With this Plugin, you will find support for the AMP project, the open source initiative that helps to provide content that is optimized for mobile users that will load instantly anywhere. When the plugin has been activated, all of your posts within a website will have instantaneously generated AMP pages, accessible by simply adding /amp/ to the ends of the URLs.

It should be noted that Pages and Archives are not supported currently with this plugin. Also, it will only create the AMP content but does not display it automatically to users that visit the page from a mobile device. That is something that would be done by Google Search.

While it may seem like integrating an AMP plugin to a WordPress site can seem like just a bit of a hassle, using only one or two plugins the process becomes simple and will enable you to get all of the benefits with just a little work. Aside from the apparent benefits, it is considered good practice to stay on top of the latest technology to stay ahead of your competition.


joomla cms pluginJoomla and Google AMP

Joomla Accelerated Mobile Pages

jamp plugin amp

This extension allows for the web page to be AMP compatible. It will boost the performance through the decrease of the time that it takes for the page to load. It is compatible with all Joomla pages and is well integrated. The approximate loading time of AMP is less than 1 second. It is able to define the behavior of all custom elements. It will lead to an increase in the client's acquisition. It is able to manage the rendering and resource loading that is needed in order to optimize the performance. Possibly the biggest and most notable feature is that it will provide a seamless web surfing experience for the site's visitors.

The main functionalities of JAMP include:

Automatic conversion: the Joomla pages will be converted instantly to an AMP HTML markup. Pretty much every extension available is supported, even when AMP pages would need to be only related to news. JAMP has the capability to manage the metadata automatically for the usual components, or can be configured so that it is able to be integrated with all third party extensions, even something like SP Page Builder, a third party system.

AMP sidebar: JAMP can manage a Joomla module that has been assigned to a special AMP sidebar that will show or hide contents, utilizing a sliding sidebar.

Easy activation: all that you need to do is to select the specific extension and view that should be enabled, and JAMP will take care of the rest. It is active for the native content that is the single article view by default, but you can easily manipulate it for something like an easy blog post view, Kunena thread view, and components of that nature.

Metadata management: JAMP will manage all meta data that is required by Google in order to accept and index the AMP pages. It can also manage Open Graph, Twitter Card, Schema.org, and more. Most important is that each meta image can be automatically processed to resize so that it matches the dimensions the AMP protocol requires so that it can be accepted during validation.

AMP menu: you will be able to choose a normal menu module, and AMP has the ability to turn it into a specific accordion menu. This will allow users to navigate straight to other pages directly from the AMP page that they visited.

Automated submission: AMP links are submitted automatically to Google to be indexed from the main (canonical) page, thanks to the rel=”amphtml” meta tag.

Highly customizable: this plugin can be tuned in many ways to better integrate with 3rd party extensions. You can customize the theme, appearance, colors, logos, titles, and so much more—you can even add in your own customized CSS to pages, and include Google Fonts. Furthermore, it is not necessary to set up intricate Joomla overrides for files, this is because you are able to simply render further custom HTML modules if needed.

Social sharing: all that you need to do is select the social share buttons that you would like to include, and they will be rendered in a way that is totally compatible with AMP.

AMP lightbox: you are able to choose if you want to render an AMP lightbox effect to any of your photos.

Analytics support: JAMP will implement the AMP analytics component just by providing your property ID for web analytics.

AMP ad: you will be able to display ads within your AMP HTML through a special type of markup.

User notification: JAMP renders a special user notification message and then save the status. It is something great to implement a dialog that will notify users of the cookies.

Debug mode: because of this mode, you are able to test the AMP version of the web page quickly, and then test the validation using the Google AMP Test site.

A powerful exclusions system: to make sure that your page passes the validation, you need to configure your system to manage the exclusions for HTML elements, tags, plugins, attributes, and things like that. This is how JAMP enables you to integrate with all extensions, thus purifying AMP content so that the page will validate against Google's AMP test.

AMP slideshow: it is possible to display a slideshow of images, all which is needed is for it to be enabled, the photos need to be chosen, and JAMP will do the rest of the process to put it together.


wbAMP

wb amp

wbAMP community edition will automatically create and advertise an AMP version of your page to search engines. It is available at no charge, and will operate with a simple and clean version of a web page in the AMP format. It will use the same conversion engine that the full web site uses- this means that you will have a valid AMP page no matter what extensions are being used on your website.

What's new with this version? It has been updated to the latest specification for AMP, it is available in 9 languages, it will automatically find the local image size, it supports multiple document types, it gives warnings in the case of a misconfiguration, and it has whitelist based AMP validations, making it more efficient.


Accelerated Mobile Pages

accelerated mobile pages

The AMP extension is an application that will provide users with the ability to create content that is mobile optimized in an instant, so that it can be loaded quickly, anywhere. Using this extension, the webpage will load at a faster speed across platforms so that the content will appear in an instant on any mobile device. When the Joomla Accelerated Mobile Pages plugin added, the web pages within the site become AMP compatible. When the site becomes AMP compatible, the performance of the site will increase as the duration of the page load time decreases. This will also lead to a reduction in the bounce rate.

It has been developed to be well integrated and compatible with any Joomla pages. The approximate loading time for AMP is about 0.7 seconds. It will increase client acquisition, and is highly cache-able while providing the website visitors with a hassle-free browsing process. The smart content prioritization includes features like pre-fetching elements, asynchronous load, no re-layout, and total scrset support via the responsive design.


drupal cms pluginDrupal and Google AMP

AMP Module for Drupal

The AMP module for Drupal is designed to convert the regular pages into one that will fully comply with the AMP standard. At first, only node pages can be altered, and other types of pages will be enabled at a later date.

When the AMP plugin that is installed, AMP may be enabled for any type of node. When that happens, AMP content will become available on different URLs. There are also special AMP formatters that can be used with image, text, and video.

The AMP plugin is designed in a way that it will make a very special type of markup that is required by the AMP HTML. The plugin is triggered for any node that is delivered through the path of ?amp. As is the same with all Drupal theme, the AMP plugin may be extended using a sub theme. This allows publishers to have maximum flexibility so that they can customize how the AMP pages are shown. This will also make it possible to do things such as putting Ad blocks in the AMP page, through the use of Drupal's block system.

The AMP PHP library will analyze the HTML that users enter into a number of rich text fields, and then will report any issues that would make the HTML not compliant with the AMP protocols. The library works hard to make all of the necessary corrections needed to the HTML, making it more compliant with the standard, whenever possible. It will also automatically convert images, iframes, and HTML embeds for instagram, tweets, and YouTube into their HTML that will make it AMP compliant. The PHP library is designed to work for Drupal 7 and Drupal 8, making it CMS agnostic.

 

AMP in Relation to SEO

The big question remains: how does AMP affect SEO, if it does at all? For starters, AMP enabled pages rank higher in search engine results pages. That is simply a fact. The higher that a page ranks, the more click-throughs it will get. The more click-throughs it receives, the more views and engagement will happen. Some people may think that AMP pages are not what they need, but is this true? It could be especially confusing for someone that does not publish content on a regular basis. You and your business need to be ready to give up on using the content pages as a leading magnet tool, this is because AMP pages are not capable of opt-in pages.

All in All

Google's AMP pages are great because they allow for pages to load at speeds up to 4 times faster than standard pages. Plus, if you find that you have been able to make it to the carousel for any given search query, your AMP pages will tank much higher and also have a higher click-through rate. For the most part, AMP pages are aimed at news publishers and content publishers who create a lot of content on a daily basis. This means that Google AMP may not affect or improve on anything that is not being updated on a daily basis. It's hard to say for sure what types of sites benefit most from an AMP page, but it has not done a page any harm to load 4 times faster on a mobile device.

Garenne Bigby
Author: Garenne BigbyWebsite: http://garennebigby.com
Founder @dynomapper
Garenne Bigby is freelance Chicago developer and founder of DYNO Mapper with over 10 years experience in both agency and freelance roles in design, development, user experience, SEO, and information architecture.

Back

Related Articles

Create Visual Sitemaps

Create, edit, customize, and share visual sitemaps integrated with Google Analytics for easy discovery, planning, and collaboration.

Sign up for our free 14-day trial.
*No credit card required.

Popular Tags

Search Engine Optimization SEO Create Sitemaps Sitemaps Content Audit Sitemap Generator Website Content Audit Accessibility Testing UX Content Inventory

Private Beta

Are you interested in participating in Dyno Mapper's private beta period? We are currently selecting users so please fill out the form below to apply.

First Name*
Invalid Input

Last Name*
Invalid Input

Email*
Invalid Input

Occupation*
Invalid Input

How do you plan to use Dyno Mapper?*
Invalid Input

Submit