(How to) Complete Guide to Setup AMP on WordPress

Have you tried a lot and none of the tricks has worked to install AMP? Here is a complete step by step guide to setup Accelerated Mobile Pages on WordPress.

We all are familiar with the popular search engine Google, and it’s habit to introduce new feature every time to serve better search results to users. With Google, we also made a habit to keep ourself updated with each new feature or function Google introduced and making our website or blog more search engine friendly.

Google has introduced Accelerated Mobile Pages (AMP) earlier this year. The aim to launch of AMP pages by Google is to improve the usability and page load time of web pages, with less flash and more text and images based content.

Potentially this project competing with Apple News and Facebook’s Instant Articles. AMP is very useful to boost the visibility of the site content in Google search results happens on mobile phones.

If the website is regularly publishing articles of the blog post then setting up AMP and staying ahead in search results is the great opportunity for webmasters.

In this post, I will explain what AMP is, how does AMP work and how to set up and customize AMP on WordPress based site.

What Is AMP?

AMP Project or Accelerate Mobile Pages is an open-source initiative that is launched by Google in October of 2015. AMP improves the entire performance of mobile websites. This project is aimed at providing a faster mobile browsing and less mobile data consumption through the search results. To execute the same Google has developed a new open sourced type of HTML, namely the AMP HTML. AMP HTML is a lightweight framework which helps to cut down the loading time of web pages.

This project also has the backing of many big name companies such as Twitter, Pinterest, Adobe Analytics, LinkedIn and WordPress.com itself. All these big companies stated their plans about AMP integration.

How does AMP Work?

Now the introduction of this project is out of the way, let’s dive into how does APM works.

As I mentioned before that, the project uses its framework. This structure restricts certain HTML, CSS and JavaScript features to speed up content on mobile devices. However, there are few more restrictions that AMP includes.

  • CSS styles must be declared in an inline stylesheet bound to a maximum size of 50 kb.
  • Animation can’t affect page layout.
  • All the scripts must load asynchronously. And mostly interactive features must be added using custom AMP HTML in and iframe. With the utilization of the feature, the web page loads without waiting on scripts to be downloaded and processed.
  • Just because Java scripts are loaded in asynchronous mode, downloads web fonts and few more objects at the time of loading a single web page. These objects are heavier to load and triggered before any other resources.
  • External resources like ads, embedded Facebook posts, tweets, Instagram posts, images and few more are loaded as HTML objects with size to be loaded while page loads. Such objects size can be set before the objects are downloaded.

All these things are enforced by a validation tool build into AMP. Pages that fail to validate may not be indexed by Google or used in the apps that support the format. AMP framework is not that much difficult to learn, and WordPress developers have already developed plugins which are capable of taking your pages and converting them into the AMP approved format.

Let’s see how you can set up that plugin on your WordPress site.

Step-By-Step Guide: To Setup and Customize AMP on WordPress

complete guide to setup amp on wordpress

Don’t get scared, and it’s not that hard, here I have explained easy steps to set up the plugin on to your WordPress site.

Step #1: Login to the WordPress CMS and Navigate to Plugins Add New Plugin Section.

Step #2: Look for AMP For WordPress Plugin and install the same.

install amp wordpress plugin

Step #3: Once an installation is completed, activate the plugin for functioning.

activate amp wordpress plugin

Now, what?

Now, you have to verify the plugin is enabled for your blog or not. For that visit any article on your blog by just adding “/amp/” at the end of the URL without quotes. For instance,

bforblogging.com/how-to-choose-the-best-and-secure-wordpress-hosting/amp/

Now, the real game will begin. I am sure you will find many problems after adding AMP, such as actual design, the logo of your blog and customization that you have made will disappeared.

But don’t worry, there is nothing to worry about, after installing AMP on your WordPress site you will need little customization and for that, you need to install 2 more WordPress Plugins. That is Yoast SEO and Glue for Yoast SEO & AMP.

Customize AMP For Mobile Device

Step #1: After installation of AMP plugin, install Yoast SEO plugin or Yoast SEO Premium Plugin. If you already have this plugin installed on your WordPress site skip this step.

Step #2: Now, install another plugin Glue for Yoast SEO & AMP.

install glue for yoast seo and amp plugin

Step #3: Now, visit your admin panel and go to SEO where you will find AMP. Click on it.

amp setting in glue for yoast seo and amp wordpressplugin

Once you click on AMP, you will be represented with a three tabs Post Type, Designs, and Analytics.

In the Post Types tab, you can enable AMP for post only or pages, media and much more. It can also use as a switch to enable or disable AMP.

amp yoast seo post types settings

In the other tab Designs, you can add a logo, choose a content color, link text and hover color, blockquotes text, background, and hover color. You can even add an image here to display in the article by default. It will only use when your content has no image to show.

amp yoast seo design settings

Click Here to view image with Complete Options of Glue for Yoast SEO & AMP

In analytics, you can add your Google Analytics code.

amp yoast google analytics code setting

You can make your desired changes to it but don’t forget to save them all. Once you are done with this all, you will see the changes to your WordPress site.

At a time of setting up AMP into your WordPress site may seem like a bit of annoying but the process can be done smoothly with one or two plugin installation.

Best Paid Plugin for Hassel Free Installation and Monetization

With WP-AMP WordPress Plugin with few click, you can make your website or blog Mobile Friendly. The great features of this WordPress Plugin encouraged me to suggest this one to you, my friends. Let’s see what the features this AMP Plugin has are.

  • This will include and convert all the content types in AMP.
  • This will allow embedding videos and iframes.
  • You can control to customize the standard design and or you can create an entirely new design of AMP pages which is similar to your current website blog design.
  • Accurate visitors are tracking with the help of Google Analytics.
  • Easy integration with Yoast SEO or All in SEO WordPress Plugins.
  • Integrated AMP with WooCommerce to generate more sales from Accelerated Mobile Pages.
  • You can add AdSense advertise to monetize your blog or website

WP-AMP is a premium version, which provides supports for Accelerated Mobile Pages.

Get WP-AMP WordPress Plugin

The other side from obvious beneficial. We all loved to stay on top position in Google and such technologies help us to stay ahead in the competition. All we need to do is, find such useful technologies, implement them correctly and wait for the results.

Thus, AMP help us to setup a new experience for our users and also help us to stay ahead and rank our site at first or before the competitors’ website.

Questions:

Comment them below, and we will answer to them with the perfect solutions to your problems.