AMP Pages and WordPress Plug-in

I started delving into the world of AMP pages today. It's basically a Google idea (along with others' input) where web pages are remade to load quickly on mobile devices.

This is a disagreement that I have had with my boss for years. He wants everything to appear on every page all of the time. I want to strip the pages down. We both want a couple of ads on each page, but the world doesn't want any ads at all. And so, our web traffic and earnings have both suffered since we move toward Wordpress and the world moved toward mobile.

Our site really does load terribly slow on mobile devices. It's unacceptable. We have so many ads and plug-ins on the pages, and then half the ads are video that starts automatically. Pain in the butt trying to get all the parts and interests to harmonize. But something has to change.

So, I'm looking at multiple different platforms where we can offer our content -- since people are not using their phones to browse our pages, and FB and Google seem to be moving away referring people to traditional HTML pages outside of what they call and acceptable "user experience."

OK. I give in.

So, what is this AMP?

Accelerated Mobile Pages are smaller versions of HTML pages, crafted in such a way that they will load fast and will be easy to use. But that means they also have a lot of restrictions and requirements put on them. There are several javascript imports that have to be done to get full functionality out of the AMP pages. Once you get started, it's actually kind of nifty what the pages can do, albeit, in a somewhat standardized manner as far as adverts and multimedia.

The idea is that AMP pages are alternate versions of your regular HTML pages. They are duplicates of your content, stripped bare of a lot of formatting and bloat.

What good is it to make all of the effort to have two sets of pages? I don't know exactly.

Google seems to be running an experiment here, like so many others. They also seem to have a sort of shadow Web, in that they are recommending AMP pages to mobile users who search for subjects. So far, I will have to wait to see how it affects our company site. It's not a positive yet. But the pages do load faster, somewhat. There's still a delay for videos and images, but you can scroll almost imediately, which is important, I suppose. Ads take even longer to load. But they do work. And a responsive AdSense ad does fill whatever space is available, which is pretty cool.

I'm also beginning to work with Google Play Newsstand, which is very interesting stuff. When I search for news, the results are very limited, and they seem to favor AMP pages in the results. I'll let you know if this boosts us or was a big waste of time....

How do AMP pages work?

Your regular HTML page refers to the AMP page, and the AMP page refers back to the HTML page.

From your regular HTML page, you add a line like this to your AMP version.

<link rel=\"amphtml" href="http://www.mysite.com/pathToMyAmpPage/" />

Then, in your AMP page, you will have a similar "canonical" link back to your AMP page.

<link rel="canonical" href="http://www.mysite/pathBackToMyHTMLPage" />

But, what if you have years and years worth of old pages and posts out there?

.... just going to skip ahead here to get to my main point....

AMP Pages Are Easy With Wordpress Plug-in

Okay, maybe there's no way for you to figure out how to recode your thousands of pages to make these alternate versions AMP-compliant or with matching URLs.

If you are using Wordpress, there's a super plug-in called "AMP by Autommatic".

It will do virtually all of the work for you, except for a few detaiils.

One problem we had was that my boss is fond of the Ninja Pop-Ups plug-in. He's never going to get rid of it. Unfortunately, it adds tons of extraneous code at the end of each HTML document. The AMP plug-in wasn't able to get rid of it. I tried for a whole day to figure it out, and then just decided to write my own AMP filtering script.

But then I found the answer: Open the AMP plug-in folder, find the amp.php file. Add this one line to the end of the code to make the pages AMP compliant -- without the Ninja NGG code.

add_filter( 'run_ngg_resource_manager', '__return_false' );

Monetizing with Advertising Revenue

Now, if you want to add in advertisements, you can do that in the single.php file. If you make changes to the file, make sure you keep a backup in case a future plug-in update wipes out your customizations.

To implement ads, you put this script in the head of the single.php file.

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

And then in the body, where you want the ads, you put in a bit of code like this one for Google AdSense:

<amp-ad width=970 height=250
      type="adsense"
 layout="responsive"
      data-ad-client="ca-pub-2662953475244486"
      data-ad-slot="6842974331" >
</amp-ad>

The ad-client and ad-slot settings come from your pre-established AdSense account.

There are different versions of the code specifications for the various ad networks.

What Didn't Work

I tried a few different types of settings with AMP Ads.

AMP has an experimental AdSense setup called "amp-auto-ads" and it is supposed to insert ads into your code automatically at various places in your text. Nope. Didn't work at all for me.

I was able to make a Doubleclick ad slot successfully, but it wants you to specify the width and height. On the Doubleclick side, you can specify multiple ad sizes, but doing this doesn't necessarily translate to a "repsonsive" situation on the display side. You must specify the width and height of the ad slot on the Amp single.php page. And, if you specify width=300 and height=250, then that is the only ad size that will be served. Any other sizes will not show an ad, or if you chose multiple ad sizes on the Doubleclick side, then you will get one of those specific ad sizes, maybe.

I tried adding layout="responsive" to the code, but that didn't work. It just made a really big square space, and then still only served the 300x250 ad.

I also tried adding other sizes using: data-multi-size="728x90,300x50", but that didn't have any effect either. The documentation doesn't explain what this is for.
Along with not being responsive, if you do get a 728x90 ad to show, and the phone screen is only 320px wide, then you have this long ad sticking out on the side and causing the page to scroll. Very ugly and annoying and useless as far as user interaction.

Errors, Errors, Errors -- So Picky

AMP is so specific in how the HTML and special elements are implemented. You'll have to put your pages through a couple of different Validators to get a full idea of what's happening. And also check for errors on Google for Webmasters. It will not allow certain types of legacy HTML or any in-line styles at all.

• https://validator.ampproject.org/
• https://search.google.com/search-console/amp
• https://www.google.com/webmasters