How to Setup AMP on Your WordPress Site

Everybody knows that loading speed is a crucial factor for websites. Sites with slow loading speed annoy the visitors, makes them more likely to bounce and less likely to return in the future. That is why leading sites are always trying to improve their page loading speed.

Realizing the importance of this factor, Google has come up with its own solution to improve loading speed. This is called the AMP project. In today’s post, I will introduce you to this project, its benefits, and how to integrate AMP with WordPress.

What is AMP?

AMP is the shortened form of Accelerated Mobile Pages. This is an open-source project launched by Google in October of 2015. As the name indicates, the main goal of the project is to speed up web pages for mobile devices. This will be done by stripping off all the unnecessary style, interactive elements, and retaining only the content with basic CSS.

Why should You Use AMP?

The most obvious benefit of using AMP is the enhanced page loading speed. Since AMP pages don’t contain any additional styling, scripts, or other add-ons, they load a lot faster than their regular counterparts. As a result, mobile visitors with slow internet connections will still be able to browse your website. This will help you reduce the bounce rate and increase visitor engagement on the website.

Using AMP also has some SEO benefits. While this is not an official ranking factor yet, it has several features that will boost up your SEO efforts. First of all, the better loading speed and reduced bounce rates are directly related to better search engine ranking. What’s more, Google prioritizes AMP pages on mobile searches by adding these to the carousels with big images.

Another excellent reason to use AMP is the built-in caching feature. When a mobile visitor visits an AMP page from Google for the first time, it will cache the page so that subsequent visitors enjoy an additional speed boost.

How to Integrate AMP with WordPress?

It is very easy to integrate AMP with WordPress. You just need to install the AMP plugin created by Automattic. Once you activate the plugin, your website will have AMP support. You can find the AMP version of any page by adding “/amp” after the URL.

For example, let’s say you have a post with the following URL –

www.mysite.com/latest-wordpress-updates

You can check out the AMP version of this page by visiting this URL –

www.mysite.com/latest-wordpress-updates/amp

The page will look like the following –

You can access the plugin options from the Appearance > AMP page. There are only three options – choose the header text color, background & link color, and the color scheme, that’s all.

If you want more customization options, continue reading as I will discuss that in the next section.

How to Customize the AMP Pages?

Due to the limited options offered by the original AMP plugin, there are some additional plugins to help you customize the AMP pages. For this tutorial, I will use the AMP for WP plugin to show you how to customize the AMP pages.

Install and activate the plugin on your WordPress site. This will create a new menu item titled “AMP” on the dashboard. Go to AMP > Getting Started to find the available customization options. As the options are divided into different sections, let’s take a quick look at the relevant sections.

General

The General section allows you to upload a logo for the AMP pages, define the logo size, and enable AMP for the pages.

Homepage

This section offers separate options to enable or disable AMP on the homepage, put links to the non-AMP homepage in the header and logo, etc.

Design

The plugin comes with three ready-made designs for your AMP pages. You can choose the design from the “Design Selector” field. Other options will allow you to enable the search, call now button, provide the phone number, and provide custom CSS.

Single

This section hosts various options to enable the sticky social icons, display excerpt, next and previous links, post modification date, author bio, pagination, etc. You will also find options to choose the category for the related posts and the number of posts to display.

Advertisement

When using the AMP for WP plugin, you can display up to six ads in different locations including below header, below the footer, above the post, below the post, below the title, etc. For each spot, you can define the ad size and provide the data client and ad slot information.

Social

As the name suggests, this section is for enabling various social media links including Facebook, Twitter, Google+, Pinterest, LinkedIn, WhatsApp, etc.

Analytics

The plugin supports various analytics providers including Google Analytics, Piwik Analytics, StatCounter, Chartbeat Analytics, and so on. This section offers the necessary integration options for your preferred analytics platform.

Structured Data

This section enables you to choose a default structured data logo, default featured image, width, and height for the post images.

Comments

Here, you can define the number of comments and enable support for Disqus and Facebook comments.

Translation Panel

In case you want to use AMP in another language, you can provide the translated text in this section.

Advanced Settings

In this section, you can enable AMP for the archive page, set up site-wide mobile redirection, allow RTL language support, and add custom HTML code to the header and footer.

Once you have made all the changes, click the “Save Changes” button to apply these changes. The other two buttons will allow you to reset the section settings or reset all settings at once.

Final Words

Since AMP offers so many benefits, most website owners will be interested in utilizing this technology. This in-depth tutorial showed you how to integrate AMP with your WordPress site. Now that you have read the tutorial, why don’t you get started with applying AMP on your site? Let me know if you still have any confusion about the process. I will try to help you out.