How To Setup Google AMP For WordPress Website

While some smartphone users are lucky to have 3G or 4G network connections, there are billions of others in the developing countries with slow network connections.

Luckily, things are moving correctly, with all of the key players implementing ways to increase content loading speed on mobile devices. Apple released its own News application. Facebook has released Instant Articles to increase the speed of loading web content. Google released AMP (Accelerated Mobile Pages) with a similar intention, however, an open standard appeal.

WordPress lately notified they included support for Google’s Accelerated Mobile Pages (AMP) as a free plugin to WordPress.com and WordPress.org sites. Google’s project team directly send the official plugin, thus it is the most updated version of AMP. You can benefit from AMP to increase your site’s speed performance on mobile devices.

In this article, we will explain the simple steps by which you can easily setup AMP in your WordPress blog or news site.

What Is Google AMP?

It is a plugin which makes your site’s pages load at a faster speed on mobile devices. It solves one of the main issues with mobile internet. Although everybody using it, mobile internet is very slow.

AMP restricts the numerous features on a page for speed, clearing out design features. Google states that AMP’s loads 85% faster than typical web pages.

AMP provides a unique mobile view for your site. This latest mobile website improves your content for supported customers from Google mobile search and Chrome. This latest view is in addition to the typical mobile sites you already have.

Your pages under this view look like typical site pages however the content cleared away. Due to this, you have to ensure your WordPress website is prepared for it.

What is Google AMP

How Does AMP Work?

The emphasis is on increasing loading speed for heavy content websites like blogs and news sites. It is a great option for news publishers. While it limits Javascript on your pages, it permits particular Analytics and Advertising components.

How Does AMP work

To Change Its Mobile View, AMP Uses Three Major Components:

AMP HTML – It includes some custom tags and stuffs with several limitations that permit AMP customers to render your content in desired way without stressing about performance. It automatically includes these new tags to your pages.

AMP JavaScript – It was created for mobile site pages, that controls the resource and speed, to make the AMP procedure work. Warning: You can’t use an outsider’s JavaScript on your AMP pages.

AMP CDN – It gives a content delivery network (optional) that can additionally cache and optimize your AMP web pages.

The Official Amp Plugin

Although, you can get the official plugin in the plugin store, to get the latest version visit the project’s Github website. Hence, you have to decide.

For any reason, if you want the recent version, install the plugin manually. Download the Github pack. Then, in Plugins panel, visit “Add New” section and click “Upload plugin”. Get the zip file including the pack, and allow WordPress to do its work. Once upload completes, activate the AMP plugin.

The Official AMP Plugin2

Installing AMP

You must install the plugin to use it on your WordPress website. It is already available to WordPress.com users. You can quickly install the plugin in WordPress. In the Plugin admin panel, visit “Add New” section and type amp-wp in the search box.

1

Click install and after that activate to use this plugin on your site. It makes amp version of each page and post of your website.

2

Then, visit Appearance » AMP page to check out your page’s appearance.

3

As per your wish, change the header and background color. Save the changes.

Include /amp/ in URL’s end to check it yourself. Like this:

http://example.com/2017/01/my-blog-post/amp/

4

But, you can’t rewrite these AMP pages.

PageFrog And Other AMP Plugins

If you really need something, get one of the other AMP plugins, like PageFrog. Visit plugin store to get PageFrog and other AMP plugins.

PageFrog expands on the core AMP plugin by letting you make some changes. It will further permit you to include some style and theme features, with different protocols like Instant Articles.

Configuring WordPress Website For AMP

You just have to activate the plugin. For most installations, make content as you would usually do, and AMP plugin will manage rest. However, note, features like your Google Analytics code will not work on your AMP pages. Read on to know how to include Analytics and SEO things in your latest AMP pages.

Connecting Google Analytics In Your AMP Pages

So, you want to get these elements in your mobile pages. Include Google Analytics manually to the single.php page template of this plugin.

Visit plugin admin panel and click the edit option alongside the AMP plugin. Then, edit it by clicking the single.php link. Note: You should always redo this activity when you update this plugin.

SEO Plugins And AMP

Since the AMP pages does not provide SEO elements, get a latest AMP-compatible SEO plugin. Luckily, many SEO plugin makers like Yoast provide AMP extensions one can use. Install them separately. However, make sure every page work towards enhancing your website’s SEO.

Solving Errors

While adding any plugin, check your AMP pages to correct errors. AMP is in developing stage, thus several elements might contain bugs. Before making your AMP pages publicly visible, you should manually solve these errors in your template files. Note that you should always redo your edits when you update AMP plugin if anything changes.

Solving Errors

Ads On Your AMP Pages

AMP HTML does not permit JavaScript. Hence, advertisements can’t be straightly embedded. Google created AMP to permit some sorts of advertisements. You should have advertisement plugins which supports this plugin. Visit AMP Github page, to get an entire list of these supported plugins.

Presently 10 Compatible Advertisement Providers Include:

  1. AdSense
  2. Adform
  3. AdTech
  4. Dot and Media
  5. Doubleclick
  6. A9
  7. AdReactor
  8. Smart AdServer
  9. Revcontent
  10. Yieldmo

AMP And Some Limitations

AMP can increase the speed of your website’s article pages. However, it won’t work well in all the situations and on every device. Additionally, it comes with major restrictions on what type of analytics (no js!) and ads one can run on their pages.