fbpx

How To Setup AMP For WordPress The Right Way

AMP an opensource project supported by Google that has appeared a few years ago and now Google has implemented in their search results, let’s see what it is, how it works and how to implement and configure it in WordPress CORRECTLY.

What is AMP – Accelerated Mobile Pages?

AMP stands for Accelerated Mobile Pages, is a project that tries to adapt the Internet and the format of content to what is currently what the Internet user most demands: a smooth and efficient navigation from the smartphone or tablet.

In order to understand what AMP is, it is first necessary to know some important concepts:

  • Navigation from mobile devices is increasing in a “scary” way in the last two years, we talk about that currently there are websites with almost 90% of traffic from mobile devices.
  • Although smartphones and tablets use data rates that are not as fast (usually) as cable or ADSL Internet connections, for the user / visitor / customer, the rules of the game remain the same, ie the user does not stay waiting to be loaded pages.
  • The responsive design is fine but everything depends on the implementation, there are still websites that have a responsive design “good” but that load javascript elements that saturate the browser of mobile devices (which usually have less power than computers, although at the pace we are going …).

For these reasons, Google began to support the AMP project with the aim of creating a content publishing format for online media. In addition, Google also has a way of displaying AMP version websites in search results, i.e. content with AMP version:

Google AMP - WaraGenio

AMP really is an HTML framework created with HTML, CSS and Javascript that specifies its own language to create simple pages, almost going back to the time of FrontPage or Dreamweaver.

AMP pages usually only have the information and little more, the javascript elements disappear, although you can use as much CSS as you want, although not having the support of javascript many dynamic elements can not be implemented.

As is common in many opensource projects supported by Google, the development is hosted in GitHub: https://github.com/ampproject

We are not going to go into what is the markup language and AMP HTML tags themselves, because in our case (in this article) we will make the implementation and configuration in WordPress using a free plugin.

What AMP is not?

One thing that needs to be made very clear is that AMP is not a system for creating a mobile version of your website, that is, it does not replace the responsive version of a website.

AMP is created for content websites such as news portals, blogs or online newspapers, sites where users continually enter to see new content published continuously and periodically.

If you have a static website such as a corporate website, AMP is not your solution unless you have a blog that you update continuously.

Configure AMP in WordPress.

To set up AMP on your site, you will need an AMP plugin for WordPress. Before proceeding, we recommend that you back up your WordPress site. Once you’ve done that, you’re ready to get started.

In addition to providing an elegant and user-friendly interface for beginners to set up their pages, the AMP for WordPress plugin can be integrated with many additional tools. These include WooCommerce (the leading e-commerce plugin for WordPress), Alexa metrics, OneSignal push button notifications and more.

AMP for WP - WaraGenioTo use this plugin first go to Plugins > Add New to your desktop. Search for ‘AMP for WP‘ download and install the plugin.

Then go to the new AMP tab on your WordPress board. You will see a drop-down menu with sections for Settings, Design, Extensions, etc. Let’s take a closer look at the Settings option:

AMP for WP Settings - WaraGenio

After configuring the basic elements, you can run the different AMP options for WP, which include:

  • SEO: This includes setting up meta descriptions, integration with SEO plugins, etc.
  • Performance: There is a unique configuration to enable and disable file minification. Minimizing can further improve the speed of your site.
  • Analytics: Here you can configure the integration with Google Tag Manager, as well as the analytics options.
  • Comments: This allows you to configure if you want to include WordPress, Disqus and/or Facebook comments in your AMP for WordPress.
  • Advanced Settings: You can enter custom HTML for headers and footers, set up mobile redirection and enable or disable retina images.

Be sure to click Save Changes for each of the above settings once you have configured them. After that, select the Design tab:

AMP for WP Design WaraGenio

Basically, this is where you can customize the look and feel of your WordPress AMP site.

To do this, you can choose a dedicated AMP theme from those listed in the Theme Selector drop-down menu. After choosing a theme, you can customize the look and feel.

You’ll find design settings for color schemes and typography (listed in the Global tab), header and footer display options, homepage sidebar options, and more. In the Social section, you can also select which social networking buttons you want to display on your AMP site for WordPress.

Once you are satisfied with the look and feel of your AMP site, you can save the changes. You can also get a preview by simply going to Appearance > AMP:

Appearance-AMP-WaraGenio

The free version of AMP for WP contains a wide variety of features. However, you can significantly improve the look and functionality of your AMP site with premium extensions. There are extensions to implement star ratings (which are perfect for real estate products or profiles), integration with AMP WooCommerce Pro, use of custom publication types and more: 

AMPforWP-Extensions-WaraGenio

It is also possible to buy Premium AMP themes. You can see them by going to Design > Themes on your desktop. There are options that are specifically tailored to particular types of websites, such as news sites, magazines, etc. In addition, there are some remarkable multipurpose themes: 

If you want to enjoy even more advanced features, there are several Pro plans available for this plugin.

After you have configured some of the AMP plugins for WordPress, there is one more step to follow. You will need to validate your AMP for WordPress to ensure that compatible platforms can be accessed and linked. Validation is also a practical way to get a reading of AMP errors in order to resolve them.

A very effective method of AMP validation is to use the AMP Validator extension for Google Chrome and Opera:

AMP-Validator-WaraGenio

This tool provides a simple display of errors (red icons) as well as their causes. In addition, if you are running AMP Validator on a non-AMP page, a blue extension icon will appear linking you to the AMP version of that page. This feature presents a useful way to evaluate elements of your site’s theme that may prevent AMP for WordPress from displaying correctly.

Conclusion

Even a few seconds of delay during loading could significantly reduce your site’s positioning (and conversion rates) in search engines. Fortunately, as we’ve seen, using Google AMP can help you ensure that your site’s pages load at lightning speed on mobile devices. In addition, setting up and customizing AMP for WordPress is simple and straightforward, as long as you use the WordPress plugin for accelerated mobile pages.



Leave a Reply