Google Accelerated Mobile Pages (AMP) will re-release near the end of February, 2016. So far, two plugins have been created for WordPress that support the special tags needed to serve a stripped down, super-fast version of your blog posts on mobile.
See how each of them fared in extensive tests, and what tricks and tips you need to know to add more components like video, embedded Tweets, and others.
Two Plugins Reviewed and Tested
AMP-WP – Developed by Automattic, the same folks that own WordPress.com and are partners in the open source AMP project.
Accelerated Mobile Pages – Developed by Mohammed Kaludi and Ahmed Kaludi.
You can view a brief on my test conditions at the end of this post.
My Webmaster Training Level 5 members received a 36 page case study, full documentation, screenshots, and source code of all the tests.
Chrome DevTools Validation
Both plugins passed the validation test via this method.
In fact, that’s how Google suggests checking the validation of any AMP pages that you create.
It’s amazingly deceptive. I’ll tell you why in a moment.
Following is a side-by-side snapshot of how each of the plugins renders the AMP post.
While the Accelerated Mobile Pages plugin render looks great, it actually includes multiple elements that the AMP specification may not support.
The Real Difference in the Plugins
You can’t easily see the critical difference in the plugins.
It’s in the code.
The AMP-WP plugin outputs all of the correct code, including:
- the html amp tag to identify it is an AMP version of the post
- viewport for scaling
- Google fonts
- canonical URL
- Google’s CDN for caching
- blogposting schema
The Accelerated Mobile Pages plugin outputs only part of the needed code, including
- html amp – to identify as AMP post
But it’s missing
- Google CDN
- Google fonts
- schema markup for post or page
- support for other AMP tags
Why the Code Matters
The code included in the AMP-WP plugin calls Google’s CDN into play. That will deliver the proper cached version of your post super-fast from Google’s Content Delivery Network (CDN).
Google fonts are also delivered via the Google CDN.
The AMP-WP plugin also includes the proper schema markup to alert Google that this is a blog post, which is the only thing that AMP supports at this time.
AMP does not support pages or blog archive pages.
So, while the Accelerated Mobile Pages plugin makes things prettier, it does not meet the coding standard needed to work well with AMP because it supports both posts and pages and does not include the call for the CDN or include other element tags.
The AMP-WP plugin throws errors when doing Fetch and Validate in the Google Structured Data Testing Tool. But, those errors will be different on different themes and how their schema markup is done.
At least that’s how it seems to me from the errors I encountered, like missing a logo graphic. There isn’t one on my test site. And it didn’t pick up my Gravatar either, even though it’s working. I saw other errors posted on the plugin’s support page.
AMP should be theme independent, but it’s not entirely.
The Accelerated Mobile Pages plugin had no errors in my test. But as I mentioned before, that’s deceptive. It adds no schema markup of any kind, which is not good.
AMP Supported Elements
There are several special tags for certain elements that you may want to include in your post that will be supported by AMP right away.
- Embedded Tweets
- Embedded Instagram pictures
- Google carousel
The AMP-WP plugin includes tags to support all of the above elements.
The Accelerated Mobile Pages plugin does not. In fact, it has no elements listed at all in the code.
The Accelerated Mobile Pages plugin has a lot of support for all manner of styling, which is why it looks so much better. But, much of it may be on elements that Google would rather see stripped out.
The AMP-WP plugin supports only the following styling at this time:
- image alignment
- image caption
- body font – background, color, padding
- content – padding, font weight, color
- link colors
- title bar
The problem is, they don’t give you any setting interface in the plugin to change these styles. At least not yet. I’m not sure if you can include a CSS in your theme for it or not. I haven’t tested that.
Hoops and Restrictions
Even though one of the plugins includes tag support for things like video, it’s not that simple.
You also have to add a special script to the head portion of the post. That’s very easy to do on Genesis, but will likely require another header/footer plugin for other themes.
I tried it with a YouTube video, following the official instructions from Google AMP to Include 3rd Party Components
I couldn’t get it to work.
What does that tell you about how easy this is going to be to implement?
That’s not all.
If you want to include an iframe, there are significant restrictions on where it can be placed. Basically, it can’t render above the fold. See the AMP guidelines for including media (image, iframe, video, audio) for all of the restrictions.
And just wait until you try to integrate this with your ad network delivery system, especially if it already has a mobile version.
What You Loose with AMP
The whole point of this latest Google experiment is to deliver the most stripped down version of your post possible.
- No navigation
- No sidebar
- No footer
- No CTAs (Calls to Action) like optins
Is AMP Worth It?
What I see happening with this stripped down version of a post is:
- bounce rate going through the roof
- conversion rate dropping lower than whale poop
So is it worth jumping through all of these hoops to have?
I guess we’ll see Google re-releases it.
And I bet we see more plugins developed and/or improved along the way.
Become a Webmaster Level 5 http://www.webmaster.blogaid.net member to see the full 36 page case study report.
My test conditions included:
- Twenty Sixteen theme
- Genesis 2.2.6 with Daily Dish Pro theme
- No logo image
- User Gravatar connected
- Yoast SEO plugin active and fully configured
- Responsinator was used for the mobile tester and screenshots were taken with this version iPhone 6 portrait · width: 375px
- Chrome DevTools Console and Google Structured Data Testing Tool were used to validate the output
- Source code was documented for each test
- The post under test had an embedded image followed by one short paragraph of content
I tested both plugins on both themes, just to ensure that AMP results were independent of theme schema markup. (The WordPress theme has no schema markup. The Genesis theme has quite a bit.)
Posts tested with the AMP-WP plugin require placing /amp after the URL.
Posts tested with the Accelerated Mobile Pages plugin require placing /?mobile after the URL.
More AMP Resources
Include media (image, iframe, video, audio)
- Note iframe restrictions
- Note image and video fallback, in case they don’t load or browser doesn’t support HTML5.
- Must declare sizes
- Must be served from https source
- This is for elements like YouTube videos, embedded Tweets, embedded Instagram, and ads.
- Requires placing a script in the head of the theme, then special amp tagged code.