261 Google Amp for WordPress: What Bloggers Need to Know

By Leslie Samuel | Podcasts

May 04

Download the Guide

Are you looking to improve the mobile browsing experience on your blog?

Have you heard of Google AMP, but you’re not sure what it is or how to make it work for you?

Listen to This Episode

In this post, I’ll walk you through what Google AMP is, why it’s important, and what it can do for your blog. I also address some major concerns that bloggers need to be aware of.

Understanding the Problem

261_Google Amp_Pinterest

Google AMP for WordPress

The mobile web isn’t giving the average user the kind of browsing experience that they want. It’s slow. Pages take a long time to load, and ads and pop-ups just don’t work as well as they should.

This is a big deal, because people navigate away from slow-loading pages. Kissmetrics did a study where they found that 40% of people leave a page that hasn’t loaded after three seconds.

Just let that sink in.

If it takes longer than three-Mississippi for your page to load, you’ve potentially lost 40% of your visitors. That’s huge.

In addition, lots of people have installed ad blockers to make their mobile browsing experience easier. That’s bad news for you if you’re using ads on your site.

Facebook, Apple, and Google know that these are big problems. And they also know that if they can control mobile browsing, they’re in a really powerful position. So they want to be part of the solution to the mobile web problem.

I’ll do podcasts in the future about Facebook Instant Articles and Apple News, but today we’re going to focus on Google AMP.

What is Google AMP?

AMP stands for Accelerate Mobile Pages. The AMP Project is an open-source initiative that’s being built in collaboration with a bunch of different partners. Its goal is to improve the mobile web browsing experience.

Once you set up AMP on your site, your pages will load an average of four times faster. In some cases, your content will also use up to ten times less data. That means your pages load so fast, it almost looks like they’re appearing instantly. And that makes everyone much happier.

AMP Project

AMP Project

 

How Does It Work?

AMP helps your pages to load faster in a few different ways. It’s not the same as a “responsive” site. Instead, it’s a second version of your site (assuming you’re using WordPress) that loads differently. Essentially, the AMP version of your site is a normal HTML website with some restrictions and some added extras.

Google Amp

Google Amp

First of all, it gets rid of additional, “unnecessary” scripts. Plugins and features add scripts to your site. These scripts can slow it down, especially on a mobile device. AMP decides that these extra elements are “unnecessary” and stops them from appearing so that your content will load faster.

Secondly, every AMP page has the same dimensions. Normally, the dimensions for a site are embedded in its code. Your browser will read the code in order to find out the dimensions and adjust appropriately. With AMP, the browser already knows what the dimensions of the page will be because they are always the same. It doesn’t have to check the code, so your page loads faster.

Finally, AMP takes advantage of “lazy loading.” Basically, it prioritizes the content and loads what you need to see first, first. So if you have a bunch of images at the top of a page and a bunch of images at the bottom, AMP will load the stuff at the top first. This helps it seem like the page has loaded instantly!

The Technical Stuff

There are three elements that make up the AMP Project.

Tools You'll Need

Tools You'll Need

1. AMP HTML

Every website that you see on the internet is a result of HTML. It’s a specific type of coding that allows your browser to display content. AMP HTML is basically a modified version of HTML that is optimized for mobile browsing.

2. AMP JS

AMP Javascript or JS handles the resource loading, or the “lazy loading” that I mentioned before.

3. Goolge AMP cache and Google CDN

Google takes advantage of these elements to speed up page loading. Caching basically saves some of the scripts from any site you visit within your browser so that it will be easier to reload that page when you return to it. CDN stands for Content Delivery Network, and Google has a huge one. If I want to load your page, but I’m in Michigan and you’re in France, it’s much faster to load the page from a server that’s closer to me. A CDN helps to make that happen.

These three things together deliver a significantly faster browsing experience.

Pros and Cons of Using Google AMP

Of course, there are benefits and drawbacks to AMP. Here’s what I think so far:

Preferential Treatment from Google

Preferential Treatment from Google

Benefits

1. This one’s obvious: your pages will be quicker to load. It’s so fast, it’ll look like they have appeared instantly.

2. Fewer people will abandon your site. Remember the Kissmetric study? Faster loading means more people will stick around to see your content, and that’s a very good thing.

3. Google is giving preferential treatment to AMP sites. You can see this in action on your mobile device in the Google Chrome browser. This works best for news sites at the moment, so I used Donald Trump for the podcast since he’s in the news a lot right now. Open up your Chrome browser and search for “Donald Trump”.

When your search results load, you’ll see a set of “Top Stories” at the top of the page, before the normal search results. If you look at the bottom left-hand corner of each of these Top Stories, you’ll see a lightning bolt symbol and “AMP.” This is how you know that these sites have set up AMP.

Think about what that means: AMP sites are appearing in a separate Top Stories section before the normal search results. Google is prioritizing them.

Now, this only seems to be happening for news sites so far. But in the future, it could be you getting preferential treatment from Google. So it’s really important to pay attention to this, especially if a lot of your traffic comes from Google.

4. Social networks like Twitter, LinkedIn, and Pinterest have said that they will support AMP. We don’t know exactly what that means yet, but setting up AMP for your site could mean that these social networks give you preferential treatment in the future, too.

Concerns
Concerns

Concerns

1. Your branding is gone. Branding is such an essential part of what you do online, but AMP doesn’t allow for it unless you do some advanced customization and work on the code yourself.

2. The sidebar is gone. This is kind of a big deal if you do important advertising in your sidebar or if, like me, you have a big opt-in form in your sidebar.

3. You’re restricted in terms of what you can add to the site. For example, there are no comments on an AMP version of your WordPress post. That’s a loss of functionality.

This also means that your social sharing buttons will disappear. Now, I have seen these on some AMP sites, so it is possible to add them in if you can do more advanced customization. This tells me that there will be more and more options and features coming for AMP in the future. But for now, just be aware that not all of your plugins will work with AMP.

What Are the Implications?

Focus on Content

Focus on Content

It’s better to be proactive than reactive.

Focus on the content. For the AMP version of your website, the sidebar is gone, the ads are gone, the pop-ups are gone. This means that you’ve got to pay attention to story-selling or narrative-selling rather than interruption marketing.

If you’ve got some important products advertised in a banner ad or a sidebar or a pop-up, start thinking about how to incorporate those products into your content. From what I can see, the future of the mobile web is going to force us to think more about content even in our monetization and our business models.

How Do I Set It Up?

Google Amp Tutorial

If you want to try out Google AMP for yourself, it’s relatively easy to set it up on WordPress. I’ve also created a free, step-by-step tutorial for you called A WordPress User’s Guide to Google AMP. You can get it by clicking on the links at the top and bottom of this post.

You’ll need to install two plugins on your WordPress site. The first one is AMP.

Search “AMP” in the plugins directory. You’re looking for the Google AMP plugin created by Automattic. Once you install that, your site has AMP enabled. Easy!
The AMP plugin is very bare bones. If you want to customize, you’ll need another plugin. I use one called Facebook Instant Articles and Google AMP by PageFrog. You can find it by just searching “PageFrog.”

Once you’ve installed that plugin, you’ll have a lot more control over the look and feel of your AMP site. I’m so much happier with the AMP version of my site since using PageFrog!

If you want to use Google Analytics for your AMP site, Google recommends that you set up a separate property. You can do this from your Analytics admin page.

To check that AMP is working, just go to any recent post and add “/amp” at the end of the URL. You can do this on becomeablogger.com, too, if you want to see what it looks like. You should see a simplified version of the page, stripped down to just the content.

Conclusion

Big changes are coming to mobile web browsing, so consider this your wake-up call.

You need to pay attention to AMP because it will affect all publishers eventually. Like I said, it’s much better to be proactive than reactive. If you can get ahead of the curve now, you’ll be in a much better position down the road.

Go out and explore the resources. It’s not enough to listen to what people say about AMP. Try it out. It might not work for you, and that’s fine! But at least you’ll be making an informed decision.

Resources Mentioned

Download the Guide

Infographic

Google Amp for WordPress

Google Amp for WordPress

 

  • Lorna says:

    Hi Leslie

    It essentially reduces the page to a single blog post and various elements disappear as you said but this includes the menu at the top and so how do people then navigate your site?

    • Lorna says:

      Or is that because I am viewing your site on my desktop and a menu is still visible on a mobile device?

    • That’s a good point. That’s another thing that isn’t there on AMP. However, most people who visit on mobile devices don’t end up browsing around. I think the best approach is to use that page to funnel people to your email list. At the top and bottom of this post, I have a banner that you can click on to join my email list. I think that can be effective. But, it’s all left to be seen.

  • Arletta Penick says:

    Thank you Leslie for the information. It’s very helpful!

  • Maria says:

    I know my page loads slowly on a mobile phone, so I will really have to think about the pros and cons of this.

  • Enjoyed both this podcast and the one you did with M. Stelzner on the AMP Project. I wrote up some of the details you and Mike discussed over on my blog http://lynndye.com/google-amp-project/ that weren’t in the show notes.

    I installed the AMP and the Frog plugin today to experiment. I wasn’t seeing a difference on my Android, so I went to the Automattic plugin description and saw this:

    Note #2: this plugin only creates AMP content but does not automatically display it to your users when they visit from a mobile device. That is handled by AMP consumers such as Google Search.

    So this is telling me that even though I installed the plugin, activated and set it up with the PageFrog plugin, it will definitely not be shown in the AMP style when typing it in my phone. Even when I went to Google and did a search on my site, found an article and clicked on it, it STILL did not show the AMP style.

    **It seems that it’s up to Google to show it or not. Do you read that?**

    Another note on this plugin is:
    Note #1: that Pages and archives are not currently supported.

    • That is correct. As I mentioned in the episode (at least I think I did), what we’re doing now is simply preparing for changes that seem to be coming to Google and other partners. It’s being proactive rather than reactive. So your posts don’t automatically show up in search with the AMP version. This is all relatively new and it will be interesting to see how it evolves over time.

      And that’s correct, pages and archives are not supported as yet.

  • Awesome guide, thanks for sharing! Will be interesting to see the impact on CTR, has anyone got any data on this yet?

    • I haven’t seen any data on this as yet. It’s all relatively new so I don’t think anyone has published this kind of data. I’ll be keeping an eye out though 🙂

  • >
    67 Shares
    Share11
    Tweet22
    Pin28
    Share6