Getting Started with Google AMP in WordPress [Test Your AMP Pages Here!]

Getting Started with Google AMP in WordPress [Test Your AMP Pages Here!]

As a WordPress developer, your number one priority is to build engaging and powerful websites for your clients. Oftentimes, however, that’s easier said than done. You understand the different variables that make for a stellar on-site experience, but what do you do when external forces dictate they be done differently?

Take the mobile experience, for example. Five to ten years ago, you were designing websites to be “mobile-friendly”. Then, a few years ago, responsive web design became essential for any website that wanted to truly compete in the digital landscape. And now… well, now, Google is saying there’s yet another way WordPress developers should handle the mobile experience.

You know, it always seems like Google is on a mission to improve the web. They’ve become more strict about HTTPS and penalized websites that don’t make the switch. They’ve cracked down on websites that don’t take accessibility into account. And their mobile-first initiative is going to become a reality very soon.

Until that day arrives, however, Google has offered up their own solution to publishers, webmasters, and web developers that want to create a totally mobile-friendly experience for their visitors. It’s called AMP, or Accelerated Mobile Pages.

With mobile UX playing a big part in the WordPress development process, Google’s AMP Project might seem like a godsend as it promises to provide the tools needed to create a lightning-fast engagement with mobile visitors. But is that the whole story? Is it really as simple as that? Perhaps not.

Let’s look at what Google AMP is, what it does to your WordPress content, and why it may concern some web developers. For those of you not scared off by AMP and excited about this new open-source framework, I’ll walk you through how to use a plugin to get started and then test your implementation with a free validation tool right here!

What You Need to Know About Google AMP

Let’s start with the basics. What is Google AMP?

Originally, the AMP open source initiative was introduced back in 2015 with the goal of improving website speed on mobile. According to Google, though, it went beyond just improving the mobile experience for users. AMP was meant to be a solution that helped publishers more effectively monetize the mobile experience:

“We want webpages with rich content like video, animations and graphics to work alongside smart ads, and to load instantaneously. We also want the same code to work across multiple platforms and devices so that content can appear everywhere in an instant—no matter what type of phone, tablet or mobile device you’re using.”

With the ad blocker backlash we’ve seen from users, this was a smart move by Google.

As for what AMP looks like, you’ve probably encountered AMP articles in your travels around the mobile web, but perhaps weren’t aware of it. Here is how you know you’ve encountered an AMP article:

AMP in Google Search

See that lightning bolt icon next to the post time? That’s the indicator for AMP.

Upon clicking on an AMP article in search, here is what you will encounter:

AMP Article

It looks like most other responsive content you’d encounter, right? Well, kind of. See at the top how the web address is actually attributed to Google? That’s because it is. This particular article resides at:
https://www.google.com/amp/s/www.gq.com/story/what-is-art-basel-coolest-streetwear-guys-interview/amp

If you want to go straight to the source of the article, you’ll have to click on the hyperlink chain button at the top:

AMP Hyperlink Button

Another key difference between the standard mobile experience and AMP is the ad-centricity of these articles. That’s not to say that every page of content you optimize for AMP needs to be monetized, but that’s part of the benefit of using this technology. Here is how this article displays its in-line ads:

AMP Advertisements

If you’re familiar with Facebook Instant Articles, then AMP is going to look quite familiar to you. The main difference between the two is in where you can find the mobile-optimized content. Whereas Facebook Instant Articles are only available through Facebook, AMP articles are nearly everywhere else (e.g. Google, Bing, Medium, Twitter), which makes this a highly desirable alternative for people who like what Facebook has done but want more reach.

Is Google AMP All It’s Cracked Up to Be?

Speed and performance optimization are frequently talked about in conjunction with WordPress these days. According to Google, your visitors–especially those on mobile–just don’t have the patience to deal with frustrating experiences.

Currently, three-quarters of mobile sites take more than ten seconds to load, which doesn’t go over well with the 53% of mobile users who jump ship after only three seconds of load time. With websites earning twice as much mobile ad revenue when a site loads in under 5 seconds as opposed to more than 19 seconds, you can see why Google found AMP a necessary initiative to launch.

So, what makes AMP so fast? Well, it’s built on three speed-optimizing components:

  • AMP HTML: This is just a pared-down version of HTML.
  • AMP JS: This is AMP’s version of JavaScript. It utilizes JavaScript best practices as well as a library to manage all resource loading.
  • AMP Cache: This caching system is what’s responsible for fetching your AMP content, caching it, and delivering it to users in the fastest way possible.

According to case studies from some of their more high-profile users, AMP works very well to increase engagement and retention, and improve growth. For instance, Time magazine reports that visitors spend 13 times longer on their mobile site with AMP. Gizmodo, on the other hand, says that 80% of AMP visitors are brand new to their site.

And those aren’t the only benefits associated with AMP:

  • AMP doesn’t require large teams of developers or a hefty budget. In fact, most developers already have the skills to use this, especially if they work in WordPress.
  • Google promises that web developers will still be able to build flexible, customized, and branded mobile experiences. If you compare the above GQ example to the article on the GQ website, you’ll see that is indeed true.
  • According to Google, AMP integrates with over a hundred analytics tools, content management systems, as well as other leading tech solutions.
  • Bing is even impressed with it as it claims that AMP pages load 80% quicker than others.

Of course, AMP isn’t free from criticism. There are some developers and publishers who have expressed concern with it, so let’s quickly recap why AMP might not be a good fit for all websites:

Confusing UX
Look at that GQ example once more:

AMP Confusing UX

See how there is an “X” button towards the top-left? When it’s clicked, it takes users back to Google search results. Unless your visitors are fluent in Google AMP content, this is likely to cause some confusion as they try to figure out how to get to your site or to the source article. Google seems to be aware of this possible confusion and is working on a better solution for designing the top bars.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

Lose Plugin Functionality
While AMP is likely to give your content a boost in SEO because of the improved mobile experience, it comes with a tradeoff. Because it utilizes very light HTML and JavaScript, it doesn’t really work with plugins all that well, especially ones that add contact forms, pop-ups, or other dynamic content to your site.

Google Analytics Bug
Apparently, there is a well-documented bug with Google Analytics when it tries to access AMP traffic. Google is aware of the problem and does not yet have a fix for it. So, you’ll have to rely on AMP analytics for the time being if you want accurate traffic information.

Difficulty in Implementation
Not every web developer is in agreement that AMP is easy to implement. That’s because AMP isn’t a universally ideal solution for all website types or even all content types. For example:

  • AMP really only works well for blog posts and news stories, not web pages.
  • It’s also not ideal for all websites. Those that focus on telling stories–again, blogs and news sites–are the ones that will benefit from this format the most.
  • You’ll need to create two separate versions of your content: one for the regular desktop and mobile versions of your site and one for AMP.
  • If you already know how to code with HTML and CSS, that’ll reduce the learning curve. But you’ll have to use AMP’s specific rules to rewrite your code and update your media tags for each piece of content you want to push to AMP.

How to Start Using AMP in WordPress

If you’ve decided that AMP would be great for your site, let’s take a look at how you can start using AMP in WordPress and then validate that everything is working properly (we have a tool for it right here!).

1. Get the Plugin

AMP for WP Plugin

First thing’s first: install the AMP for WP plugin in WordPress. The plugin developer does a great job explaining how to do this here (start at the 2:50-mark):

[youtube https://www.youtube.com/watch?v=Em1nsE_KaKw?rel=0]

As you take time to explore this plugin, be sure to take note of a few things:

  1. That it supports a number of contact form and call-to-action plugins that you might not otherwise be able to use if you add them on your own. (Which is a relief.)
  2. The developer has an awesome AMP tutorials section on their website that will help with questions like how to optimize AMP content for search, how to use with WooCommerce, and so on.
  3. This plugin adds an AMP page builder to WordPress which streamlines the process of creating content made specifically for mobile. Here’s a video on how to use it:

[youtube https://www.youtube.com/watch?v=vAGPFKKm5G4?rel=0]

2. Create Your Content

Next, it’s time to create your content. Be sure to reference the Google AMP tutorials so that you know how to code and configure your pages according to the guidelines. You can also use this to learn how to add advanced features and interactive designs to AMP.

3. Tag Your Content

When you’re done, you’ll need to add canonical tags in order to show Google and other platforms publishing AMP content that this page falls into that category.

On the original page of your website, include this canonical tag:

<link rel="amphtml" href="http://www.yourwebsite.com/blog/amp/">

On the AMP content page you’ve created, include this canonical tag:

<link rel="canonical" href="http://www.yourwebsite.com/blog/">

4. Edit the Schema Markup

You know how important it is to add schema.org markup to WordPress for better SEO. If you want to ensure your AMP content is truly optimized, you need to edit the markup in any page created specifically for AMP.

Non-AMP content typically only requires you to define variables like the headline and image in schema markup. However, AMP content has a more rigorous set of structured data you need to define, as Google explains here.

So, if you’d like Google to not only rank your AMP content, but place it within the highly visible AMP carousel at the top of search, you’ll need to adjust your approach to writing markup for your AMP content. Also, keep in mind that you cannot use microdata for AMP content; only JSON-LD code is acceptable.

5. Add Google Analytics

Google Analytics might currently be buggy, but that doesn’t mean you shouldn’t track your AMP content. You never know when Google will get that glitch sorted out and this takes no time at all to set up. Simply go into your AMP plugin and add your Google Analytics ID there.

6. Validate Your Page

Once your content is created and tagged, it’s time to verify that the page is valid. You can also test your pages right here on the WPMU DEV website.

Simply input your URL into the field above. You’ll receive your validation results in a separate browser. If all is good, then you’re ready to move on to the last step!

7. Index Your AMP Content

Accelerated Mobile Pages

Finally, it’s important to index your AMP content within the Google Search Console.

Under Search Appearance, click on Accelerated Mobile Pages. Your pages should show up here once they’ve been validated. When that happens, you can submit them for indexing.

Wrapping Up

The secret to AMP’s success? It utilizes very limited HTML and JavaScript in order to publish lean, mean, and super fast content to mobile. If you know your clients would benefit from creating AMP content for their site, make sure to include this in your project proposals as well as in the strategy and planning stages. That way, you can properly budget the time and additional work into your process from the get-go.





Over to you: What do you think about AMP? Will your clients be on board or will it require some convincing?

Tags:

Brenda Barron Brenda is a freelance writer from Southern California. She specializes in WordPress, tech, and business and founded WP Theme Roundups. When not writing about all things, she's spending time with her family.