What are AMP pages and how to create one for your WordPress site

By | SEO, Web Design

The world is busier than ever and keeping up with the needs of your clients has become both easier and more difficult with the introduction of smartphones. If you want to optimize your website’s performance for mobile users you must consider using Accelerated Mobile Pages, also known as AMP pages.

AMP technology dramatically speeds your website’s performance which increases user engagement.

In fact, according to a recent marketing study, 75% of all respondents stated that they would leave a page if the information doesn’t load quickly.

AMP to the Rescue

Thankfully, there is a solution to slow loading pages on smartphones. Announced in 2015, Google introduced Accelerated Mobile Pages (AMP) and since then many businesses are already jumping on the bandwagon because they work so well. Unlike previous algorithms, this framework has already proven improved loading speed and overall mobile optimization.



How to Incorporate AMP with WordPress

If you are already using WordPress, then you likely know that the platform comes with loads of features. The AMP plugin developed by Automattic/WordPress makes it easy to incorporate the AMP framework for your pages.

So, before you begin, you will need to go to the Plugins section of WordPress and search for “AMP” Once you find it, go ahead and install it so that you can get started with using it.

AMP Plugins

Once you have the AMP plugin installed, you simply need to type /AMP/ to the end of your post’s URL, or if you don’t have “pretty permalinks” enabled on WordPress you would use ?amp=1.

For instance, http://example.com/2017/1/4/ would become http://example.com/2017/1/4/amp/ or http://example.com/2017/1/4/?amp=1 without “pretty permalinks”

When this is complete you should follow up with:

  • Chrome validation process
  • Fetch as a Google tool

Google search console

Each of these tools will show the errors that you need to troubleshoot.

For instance, to use the Chrome validation process, simply use Chrome to go to one of your AMP pages, and add #development=1 to the end of the URL.

Next press Control + Shift + I to open chrome developer tools, then press Console to see if your page validated, or what problems you may need to fix.

Validation successful

While having the WordPress plugin helps, it still requires some work to get running properly.

More than likely, you will have to manually validate many of your pages to benefit from AMP.

The process of validating your pages can take some time, as you usually need to make some alterations or corrections to your page to ensure that it is valid. Some of the most common changes users had to do were re-specifying the height and width stats for images or replacing old YouTube links that didn’t use HTTP addresses.

Schema markup is a requirement for AMP!

Schema markup is a code that you put on your site to help the search engines return more informative results to users and you should make sure that you are using it to your full advantage.

Also, Schema Markup is required to make your content eligible to appear in the Google search news carousel.

To learn more about AMP and schema markup click here.

Now that we know Schema markup or structured data is required for Accelerated Mobile Pages, let’s add it to our site.

A great free tool that you can use to add schema markup to your WordPress site is WP SEO Structured Data Schema.

After adding the schema markup to your site, use Google’s Structured Data Testing Tool to make sure it validates.

If there are any errors, the Google tool will tell you and give you suggestions on how to fix them.

For example, in the screenshot below, the Google Structured Data Testing Tool is suggesting that you are missing the a “url” and the “position” field, which is required to validate the schema markup.

AMP Error

Incorporate AMP with Google Analytics

Now that your page is AMP valid, it’s time to make it trackable by Google Analytics. While the WordPress AMP plugin doesn’t do this automatically, it’s easy to enable.

To enable Google Analytics to work on your AMP pages, you can edit the amp-post-template-actions.php file. However, we will show you a simpler method.

Download and activate a plugin called Glue for Yoast SEO & AMP. This is an add-on plugin to the original Yoast SEO plugin, you must have the Yoast plugin installed for this to work.

Then go to SEO > AMP > Analytics past this code and click Save Changes.

Yoast AMP

After you do this, make sure to change UA-XXXXX-Y to represent your  Google Analytics property ID, or else it may mess up your sites tracking, or cause issues with admin permissions.

Finally, re-validate, your new AMP pages, and after that you should have AMP and tracking enabled on your WordPress website.

Check Your Work and View Your Site

Remember, these pages are going to make it easier for people to see your page. If you want to tweak it till you get it right and see how it will look on a mobile page, you can always add /AMP/ to the end of your URL from the WordPress platform.

This allows you to see how your page would look as an accelerated mobile page.

Get AMPed!

There’s no denying that accelerated mobile pages have changed the playing field for digital marketing. If you haven’t jumped on the bandwagon yet, now is the time.

Author’s Bio:

Emin is the lead designer at Los Angeles based web design agency Ambed. On his free time, he enjoys blogging, drawing and reading books!

Share with a friend!

Leave a Reply

Your email address will not be published. Required fields are marked *

Romeo and Juliet reimagined in a graphic novel

It is common knowledge the end of Romeo and Juliet’s tale...

Cubism comes to life: A digital tribute to Pablo Picasso

Given his thoughts on gaining inspiration from another...

Into the Inkwell: A Look at Linocuts, Pen and Ink Mediums

A pen and paper. That’s all it takes for Ekaterina...