Google AMP: What Is It and Is It Right for Your WordPress Website?

Posted on May 10, 2016 by in Resources | 37 comments

Google AMP: What Is It and Is It Right for Your WordPress Website?

If you’re the kind of person who frequents the Elegant Themes blog, we probably don’t need to impress upon you the importance of fast loading pages. Long loading times impact your bounce rate, and are one of the leading causes of people getting angry at their smartphones and cursing their internet providers.

There are literally hundreds of tricks and tools you can use to optimize your loading times for mobile, but the AMP Project is one of the most promising and ambitious methods aiming to tackle both this issue, and establish some basic design guidelines in order to make pages created with it be as accessible as possible.

The AMP Project stands for Accelerated Mobile Pages and today we’re going to talk a little bit about its history, guidelines, and how to create AMP pages using WordPress.

What Is the AMP Project?

A screenshot of the AMP Project homepage.

The AMP Project is an open-source initiative launched by Google in October of 2015 as a way to improve the overall performance of mobile websites. The project boasts its own lightweight framework – AMP HTML – and was designed to build super light web pages, thus cutting down on loading times.

While the AMP Project is by no means the only lightweight framework developed specifically for this purpose, it’s pretty safe to say that with Google’s backing, they’re in an enviable position. For example, sites developed using the AMP framework will be cached directly by Google at no cost to their developers (although they’re free to use other caching services if they choose to do so).

If lighting fast loading times and free caching aren’t enough to sweeten the deal, AMP-enabled pages also enjoy a boost in Google’s mobile results. The project also has the backing of other big name companies such as Twitter, Pinterest, Adobe Analytics, LinkedIn, and WordPress.com itself – who’ve all stated their plans with regard to AMP integration.

The downside to making your pages AMP friendly is that in order to do so, they must adhere to a number of strict guidelines, which may not be acceptable for everyone. If your website is already optimized for mobile browsing and was developed with best practices in mind, it should be pretty speedy already, so you may not see such a big benefit in that regard.

On the other hand, if you’re willing to take the plunge, the AMP Project guidelines are pretty well-documented, and making the switch isn’t that difficult – especially for WordPress users thanks to the magic of plugins.

How Does AMP Work?

Now the introduction is out of the way, let’s get into how AMP pages actually work.

As we mentioned earlier, the project uses its own framework, and this only allows for a limited set of technical functionalities, in order to cut down on bloat and fulfill its promise of speed.

AMP pages must follow a specific set of styling and layout rules to be considered compliant with the project’s guidelines and enjoy the perks offered by Google. As far as styling goes, AMP pages rely solely on CSS (with no external stylesheets) – so you can’t use inline style attributes, and some kinds of animations are disallowed as well, in order to avoid performance issues.

While not allowing external stylesheets can be considered a bit of a hassle, the project specifications explain that the performance increase gained by just including your CSS within the head tag is significant, and with AMP, every millisecond counts.

In order to add styles to a page you must use the <style amp-custom> tag, as seen in the example below.

<html>

<head>

<meta charset="utf-8">

<link rel="canonical" href="hello-world.html" >

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

<style amp-custom>

/*Your CSS goes here */

body {

background-color: white;

}

</style>

<script async src="https://cdn.ampproject.org/v0.js"></script>

</head>

<body>Hello from the Elegant Themes team!</body>

</html>

There are a lot of default components to AMP pages that can be found on the AMP Project’s GitHub page of pre-made CSS styles. While the framework itself isn’t difficult to learn, some enterprising WordPress developers have already taken it upon themselves to develop plugins capable of taking your pages and converting them to the AMP approved format. Let’s give these plugins a look.

How to Integrate AMP With WordPress

The AMP plugin – discussed shortly – is pretty much the best choice for adapting your pages to the AMP standards at the moment. The alternatives listed below work as complements to the AMP plugin and offer additional functionality, which we will cover in their respective sections.

AMP

The AMP plugin header.

The AMP plugin automatically creates AMP versions of all your posts once enabled, and its setup process couldn’t be easier. It literally couldn’t, since there aren’t any customization options available once the plugin is activated. All you have to do is add /amp/ to the URL of any of your posts in order to access its AMP version – like this http://www.example.com/insert-an-imaginative-title-here/amp/ – et voila!

Depending on your permalink customization, you can also use ?amp=1 as an alternative to access the AMP versions of your post. This plugin limits itself to creating the AMP pages, but if you want your mobile users to be able to access them, you’ll need to make them discoverable by Google beforehand, which is a process we’ll cover in a bit.

While this plugin does only one thing (and it does it well) it also doesn’t allow for any customization, which can be a turn-off – and that’s where our next plugin steps in.

Custom AMP

The Custom AMP plugin header.

In order for this plugin to work properly, the AMP plugin must be installed and activated, since it changes some of the default configurations for generating AMP pages.

To be more specific, using the Custom AMP plugin will do the following:

  • Enable you to modify your site’s logo as it will appear on mobile devices
  • Add featured images to your posts
  • Show your WordPress comments section
  • Include related posts
  • Set a custom content width
  • Show a navigation menu
  • Set up Google Analytics
  • Add custom code to your posts’ CSS and footer.

Facebook Instant Articles and Google AMP Pages

The Facebook Instant Articles and Google AMP Pages plugin header.

While discussing the AMP plugin, we mentioned how despite handling the actual process of conversion to AMP standards, it didn’t set those pages to be viewed by mobile users by default. This plugin takes care of the submission process to Google for AMP pages and Facebook Instant Articles – but for now, we’ll just focus on the former.

As with Custom AMP, in order for this plugin to fulfill its duty, you must already have AMP-compliant pages, so we recommend using it together with the AMP plugin. Once you’ve installed it, you’ll need to head over to the Mobile Formats tab on your dashboard to complete the configuration process. The first thing you’ll see inside is a list of publishing choices including Facebook Instant Article, Google AMP HTML, and Apple News formats, which will be implemented soon. If you’ve already installed the AMP plugin, you’ll see a ready checkmark on the Google AMP HTML option:

A screenshot of the publishing formats included within the plugin.

The checkmark signifies that your content is ready to be sent to Google and appear in its search results, but the plugin also offers a lot more options that you may want to check out beforehand. For example, you can change your logo and modify the fonts used on your AMP pages in the Styling tab:

A screenshot of the Styling tab.

As you can see, this section also includes a handy little preview to show you how your pages will be displayed following the AMP protocols. All you have to do is choose which page you want to preview from the corresponding list:

A screenshot of the settings page.

Moving on, although the Custom AMP plugin can handle integration with Google Analytics, we recommend using this plugin to do so, since its interface is much more pleasant to work with. All you have to do is head over to the Analytics tab and link your account in order to enable it for your AMP pages:

A screenshot of the Google Analytics option included with the plugin.

The plugin also enables you to choose which kinds of publications (posts, pages, and projects) should work with AMP. By default, the AMP plugin only works with posts unless you use this plugin to configure it otherwise:

A screenshot of the settings page.

There is also an option for forcibly disabling plugins from AMP pages, which shouldn’t be necessary unless the AMP plugin isn’t working due to some compatibility issue with one of your active plugins. Finally, you can also enable AdSense integration for your AMP pages from within the plugin by linking your account from within the Ads tab.

Glue for Yoast SEO & AMP

The Glue for Yoast SEO & AMP plugin header.

Our last spot for this list of WordPress AMP plugins goes to Glue for Yoast SEO & AMP. This simple little plugin weighs only a few kilobytes and fulfills a simple, yet important function: that of making sure your AMP pages use the correct Yoast SEO metadata.

There is no complicated setup process either – all you have to do is set up the plugin and continue configuring your Yoast SEO options for each of your posts as usual, then let AMP and all the other plugins we’ve covered do their jobs in the background.

Conclusion

While integrating AMP into your WordPress website may seem like a bit of a hassle, with only a plugin or two, the process becomes incredibly easy and enables you to reap the rewards without hardly any work. And aside from the obvious benefits, it’s always a good practice to stay on top of the latest technologies to remain ahead of the competition.

All you need to do in order to successfully integrate AMP pages into your WordPress website is:

  1. Get acquainted with the basics of the AMP Project.
  2. Install the AMP plugin.
  3. Install the Custom AMP plugin and configure the style of your AMP pages.
  4. Set up Facebook Instant Articles and Google AMP Pages to make your AMP pages discoverable by Google.

What are your thoughts on the AMP Project, and is it worth all the fuss? Subscribe and share your opinions with us in the comments section below!

Article thumbnail image by T-Kot / shutterstock.com

37 Comments

  1. I have an issue with this new trends: They don’t work with Divi or Divi Builder, since they can’t read the layouts we create, even the mobile ones, the posts appear without all the styling and custom design, and the content of each module on top of the other, makin an ugly mess. You should mention that in the article, AMP and FB Instant Articles do not work with “builder” kind of themes.

    • I like the idea of AMP but, maybe it’s a compatibility issue with Divi, the AMP plugins are throwing a TON of errors in Google Webmaster.

    • I guess that is a very important point that Sergio mentions.
      It looks like Google AMP could work with Divi, but obviously it won’t!
      You have to build very lean pages with lean code and simple styling.
      But if you do that your page loading speed will increase anyway even without Googles AMP.

    • That’s an issue I often see in these Elegant blog post. They give tons of very good and useful information, but usually it’s not related to anything Elegant. If they give a list like ‘the 10 best plugins for xyz’ then I would expect them to work with Divi/Extra, or at least have a note that indicates if they are compatible or not.

      • Jake: Thumbs up!

      • Nathan B. Weller

        This is something we’re working on John-Pierre. Hopefully we’ll be able to show improvements in providing Divi/Extra specific info in non-Divi/Extra related posts. It’s a tough balancing act at times. We provide a lot of general information that is relevant to anyone using WordPress but most of our readers are also customers who use our products. We’re still trying to nail down the right ration of ET Specific Information to General WordPress information.

      • Completely agree.

        One will get the impression from this article that there aren’t any issues with AMP and ET’s flagship themes — but they would be wrong.

    • Nathan B. Weller

      Hi Sergio, you’re right. At the moment builder posts/pages of any kind do not display correctly with Google AMP (or Facebook Instant Articles for that matter). Only standard post/page content will display correctly.

      I asked Dustin from our QA / Support team to weigh in on the issue and he said this:

      “I think that once the spec matures it will be integrated into wordpress core and at that time there will be some hooks and filters we can hook into to ensure it works with our products.”

      So basically we just have to wait on the builder content but it’s not something we’re ignoring either.

      We’ll try to be better about mentioning conflicts like this in our blog posts moving forward.

      • That’s great Nathan. Hopefully there’s a new version of Divi with this in mind. 🙂

  2. Google AMP seems to be a great idea for accelerating webpages but what if our current theme messes up in the mobile view.

    I have a feeling that more plugins installed may increase the server load, am i right ?

    • Nathan B. Weller

      Because of how young things like Google AMP and Facebook Instant Articles are there are probably still some kinks to work out. So yes it’s possible, even likely, that certain plugins or content types won’t display well. For the moment, if it works for you I think the benefits are clear. If not, then focusing on creating blazing fast mobile views of your content is something to prioritize.

  3. The PageFrog people appear to be toast and have not been answering anyone for weeks. You should look for an alternative to that one.

    • Tom Ewer

      Thanks for the heads-up. The PageFrog plugin is one of the only options out there providing decent functionality. It’s still current, and works with the latest WordPress. It’s definitely worth keeping an eye on, however.

  4. Thanks for the write up.

    With AMP, are we going to have to go back to having a mobile website with their html/js and ditch responsive? Or is AMP baked into the responsive structure, like Bootstrap?

    • Tom Ewer

      The difference between mobile websites of the past and AMP is that code is pulled from the same page. You’re generally not having to create new versions. As far as our tests were concerned, websites remain responsive regardless of the format used to deliver them.

  5. Thanks for bringing this topic up. I initially used the page frog plugin but Yoast recommended using Automatics instead. All my urls work but they don’t appear in Google. Any ideas?

    • Tom Ewer

      Without the details of your setup, I wouldn’t know. If they’re not appearing in Google, however, their own support forums should be able to assist you. Good luck. 🙂

  6. I was positive before I got to the second paragraph that, whoever was writing this article, he (Tom) could not be a designer. While the advantages of streamlining coding for fast load times are obvious, the fact that Google is WEIGHTING projects that adhere to these guidelines is serious indeed for the design community.

    To stretch an analogy, since bookstores are going by the wayside, it’s as if Barnes & Noble (who at one controlled a huge percentage of the retail book market) were to say, “We don’t like all these complicated book designs with hard-to-read typefaces, so from now on, we’re going to move the coffee table books with easy-to-read spines to the front of the shelf.”

    Would it move (sell) books? Probably. But the stifling effect on the design, usability and user experience community is going to be serious indeed.

    Add to that the fact that the self-appointed arbiters of best practices in mobile web page design are going to be Google themselves, who have a strong reputation in the design community for some of the most counter-intuitive, and sometimes even cockamamie, user-unfriendly and bad design decisions out there. So much so they threatened to surpassed Microsoft itself (the inventors of the “Start” button one uses to turn off a computer).

    I’m disturbed by the breezy way this writer encourages everyone to jump on the AMP bandwagon (and as a developer, I feel I’m left with little choice), with hardly a mention of the creative mugging that is taking place.

    • Nathan B. Weller

      That is a touch pill to swallow Jeff. Perhaps as Google AMP and Facebook Instant Articles mature we’ll see more options open up for content creators to deliver a unique experience.

    • Tom Ewer

      We hear you Jeff – AMP and Instant Articles are not going to please everyone, especially designers. However, there are solid numbers out there from end users who want a better (and quicker) way to browse the web from their smart devices. I think we can all agree that mobile browsing is not at the standard it should be in its current form.

      I agree with Nathan too – in the future, expect to see a maturity in the format that will loosen the creative reigns for designers.

  7. Interesting comments above. Intriguing article. Any chance you could take before and after pictures of a mobile device and show what the amp page on a mobile device looks like compared to a “regular” mobile page?

    • Tom Ewer

      Mark, you can do that yourself. Head to any site that has enabled their pages for Google AMP, and tack /amp/ onto the end of the URL.

      Of course, if you wish to view it as it looks on a mobile device, it’s probably best to use your own!

  8. AMP is another buzz word at the moment please take it with a grain of salt and if you did a lot more indepth reading on this topic you will see that it really only is beneficial for large aggregated news site to use and take advantage of. It not meant for a business site that posts 2 blogs a month.

    • Tom Ewer

      Mitch, I’d say you’re right if we’re talking about Instant Articles. Facebook insist on websites having 50 relevant articles ready to go before being accepted. However, I’d say AMP is suitable for anyone who wants to improve the mobile experience for their visitors. I’d say it’s different from being just a buzzword, only because there’s a real need for mobile browsing improvement. I’d expect to see AMP stick around for a very long time, and we’ll likely see more formats appear over the next couple of years.

      That said, it’s down to the individual to decide whether it’s worth the effort.

  9. Thanks for sharing. Great article

    • Tom Ewer

      Thanks, Raja. 🙂

  10. Thanks for sharing this. Great…

    • Tom Ewer

      Glad to be of service, Erkan. 🙂

  11. Hi Tom,

    That is a very well written and insightful article. I gave me a full overview about Google AMP in minutes. Thanks a ton! I’ve implemented this on my website and I’ve noticed that the Elegant Themes Monarch Plugin has issues with AMP layout. Notice the empty bulleted list at bottom and behind featured image? If you remove /amp from the link then you’ll see that, that bulleted list is actually social media share icons.

    What should I do to avoid this?

    • Nathan B. Weller

      It looks like there are some plugin conflicts that exist here. Unfortunately there’s not a lot we can do about it at the moment. Hopefully as AMP matures we will have more options for resolving display issues.

      • Thanks for the reply Nathan. Will wait for the plugin to evolve.

  12. Can anyone recommend an Elegant Themes theme to experiment with Google AMP on other than Divi? I was thinking of something simple like “Nimble” or “Evolution” or “SimplePress”?

    • Tom Ewer

      Bill, it looks like you’ve already made a list. 🙂

  13. So, Google is claiming to boost your ranking in its results if you use AMP? Does anyone know by how large of a margin it gets boosted? I currently use WP-Rocket, and from what I can tell, my site loads pretty fast. If there’s a chance it’ll load even faster, and its rankings will improve further by using AMP though, I’m definitely interested in it.

    Has anyone used AMP and seen a change in rankings? Is it really worth using over things like WP-Rocket?

    Regards,

    • Tom Ewer

      I think it’s still too early to say yet, Jared. From what’s happened so far, some publishers have seen their content rise to a prominent position, but there’s been no official word, or figures, to guarantee a boost.

      There are lots of reasons to consider integrating AMP, however, other than a simple bump up the Google rankings.

401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest