Download the Guide
Google AMP for WordPress
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?
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
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
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
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
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
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
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
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?
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
- AMP Project website
- Kissmetrics study – showed how loading time affects visitors to your blog
- Tools you need to install AMP for WordPress:
- Google AMP plugin
- Facebook Instant Articles and Google AMP by PageFrog – allows more control of your AMP site
- Google Analytics Separate Property
Download the Guide
Infographic
Google Amp for WordPress
The post 261 Google Amp for WordPress: What Bloggers Need to Know appeared first on Become A Blogger by Leslie Samuel.
from Become A Blogger http://ift.tt/1Y7O1wE
via IFTTT
No comments:
Post a Comment