Beginners Guide To Setting Up Google AMP For WordPress Blogs

Google AMP
BlueHost WordPress and Website Hosting

In todays post, we’ll be talking about Google AMP and why you need it on your WordPress blog.

This is 2017 and the competition amongst webpreneurs continue to be fierce, and only the fittest, well-informed, and action-takers have the chance to survive. And to help the less privileged who might not have the budget for running huge and fearsome advertisement like the top guns in the industry, Google decided to introduce the application known as Accelerated Mobile Pages (AMP), which strictly helps to improve the mobile experience of end-users.

Setting up Google AMP for WordPress Blogs

 

Understanding that not so many people know about this let alone know how to go about applying it on their WordPress blogs to start enjoying the benefits themselves, I decided to write this guide on what Google AMP is about, why it is important, how to install it and the configurations. I hope you will find it useful.

What is Google AMP?

Google AMP is the short form for Google Accelerated Mobile Pages, which is simply geared towards improving the loading speed of mobile websites, just so it can function optimally and maximally, thereby improving your site’s user experience, which would also mean for a spike in your traffic.

Google AMP basically aids you to create stripped-down versions of your posts and pages and serve them up to mobile visitors. For those visiting coming from Google Search, Google will further cache your AMP content to enable it load faster.

Furthermore, AMP is most useful for non-interactive contents. If your site requires too may interactions, the stripped-down code standards of AMP will most likely affect it. But if your site is basically “read” by your users, then, there’s nothing to worry about because; AMP is a good way to boost the speed of your webpages without losing functionality.

Why is it important to use Google AMP on your WordPress Site?

Google love contents that are rich and high in quality and those kinds of contents will usually be detailed with a lot of texts, have graphical representations in high-quality images, and maybe video(s). Now, these content combinations will often make your pages slow to open, especially for mobile users. Hence the reason for creating an AMP-oriented HTML that is sure to tackle that efficiently.

That said. It is important to create this option of speeding up website pages over mobile devices as it helps in retaining customers and increasing the chances of snowballing one’s income over the cause of running their businesses online through their websites.

How To Best AMP Your Website

For beginners, it is advisable to maintain at least, two versions of your articles. The original versions of your articles which is the one your site visitors will see, and the AMP version of that same page.

It is important to bring to your notice that AMP does not support things like third-party JavaScripts and form elements, therefore; you may likely not be able to have on-page comments, lead forms, and all the other useful features you’re already used to in a standard implementation. Luckily, there’s currently a hack that seems to solve this problem.

It is also possible that you will rewrite your website’s template to accommodate the restrictions. For instance, all CSS in AMP must be less than 50KB and also be in-line. They must be able to load using a unique amp-font extension in order to control that loading due to loading intensiveness of custom fonts.

Furthermore, multimedia files must be specially handled. For instance, all the images on your site need to utilize the custom amp image element and must have an explicit height and width. Also, if your images are in GIF format, you need to use the separate amp animated extended component.

Similarly, if you want to embed locally hosted videos through HTML5, there’s a custom tag that must be used called amp-video. There’s also a separate extended element called amp-youtube for embedding Youtube videos which is what most of the web videos are.

Slideshows also have their own supports through amp-carousel, and image lightboxes through amp-image-lightbox. There are also extended components for social media embeds including Facebook, Twitter, Instagram, Pinterest and Vine.

The good thing here is that all these tags and components are not difficult to use at all, you just have to play with them on your website design.

For Google and other technologies supporting AMP to detect your site’s AMP version, you will have to edit the original version of the article’s page. The original article page must have the following tag:

<link rel=”amphtml” href=”http://www.examplesite.com/blog-post/amp/”>

On the AMP Discovery Page, it is also mentioned that some of the platforms that support AMP will need Schema.org metadata to accurately specify the content type of the page.

Finally, if you’re planning to get a benefit from Google in the future by implementing AMP, you must get your schema right because, according to them, schema.org meta data is required to make your content eligible to appear in the demo of the Google search news carousel.

How to Install Google AMP on Your WordPress Site

Getting started with Google AMP is not really a rocket science, even though it might be difficult to some people, however, there’s a good and simple to use plugin that is developed for it which is often updated on GitHub.

The first thing is to install the official wordpress Plugin, and to do this, visit the amp-wp GitHub page and download the plugin.

Just install this plugin on your website exactly the way you would install any other WordPress plugin.

After the installation, you’ll have to append “/amp/” to an article web page alternatively, if you don’t have good permalinks, you can append “?amp=1”).

Configuring Google AMP on your WordPress Site

Usually, when you’ve activated the plugin, you are done and things should start to take shape. And you can now relax, write and publish contents that will now be shown to your mobile surfers. But mind you, there some few hitches which you might notice and one of them is your inability to view stats using Google Analytics as the codes would get tampered with.

However, to set things up properly most times requires that you also download a plugin called Yoast SEO AMP glue plugin.

Glue for Yoast SEO AMP WordPress Plugin

Then the next best thing will be to go into the AMP settings menu, designed tab, and change the styles to fit your brand needs. You might also like to set up a branded-default image for posts that won’t have a featured image (Auto Featured Image might be your best resort for tackling this).

You are not done yet. Now, go back into AMP settings menu, now click analytics tab and add AMP-specific tracking code if you so desire. That’s it, you are done and you now have a fully functional AMP enabled wordpress website.

Glue for Yoast SEO AMP
 

Checking & Fixing the AMP Pages Issues

By now, Google Search Console is supposed to pick up on the AMP version of your articles through the rel=”amphtml” tag added by the plugin, allowing bulk validation of articles. However, from my experience so far, it doesn’t detect changes very quickly. For instance, If you fix something now, the changes may show up after 2-3 days.

To solve this, I’ll recommend using an AMP Validator Chrome extension. This is the extension you can use to validate all of your AMP pages. This Chrome extension also gives the AMP related errors, so you can work on them and get them fixed.

Now Showing you a AMP Error Graphs from Bloggers Passion Google Search Console account:

AMP Section from Google Search Console

From the Chrome Extensions, AMP Validator will check the current page to see if it is an AMP page and then run it through the AMP validator and report if the page passes (green) or fails (red) via the extension icon.

If there are any warnings or errors it’ll list the number underneath the extension icon and, clicking the icon will display the warnings and/or errors.

Another method would be to use a combination Chrome validation and Search Console process. To use the Chrome validation process, visit any of your AMP pages in Chrome and add “#development=1” to the end of the URL.

After all these, you may likely refresh the page to see if it’s successful or not. Once you do, it will say “AMP validation successful” or give you a list of more issues to correct.

amp validation process

To make sure that site owners are implementing Google AMP properly on their sites, Google Search Console now reports on errors it finds using the AMP technology on your website.

This error report can easily be found on the Search Appearance section of Google Search Console. The aim is to assist website owners detect errors via the implementation of Google AMP across an entire website. This is a huge step up from the previous solution offered by Google, which works by individually running each page through a testing tool.

The AMP error report is much similar to Search Console’s Mobile Usability error report and robots.txt Tester. It gives a total overview of a website while indicating specific errors and the URLs they’re found on. From the Google Search Console account, one can know how many of their pages are already indexed in Google, can find all Critical and non-critical errors for their amp pages.

amp error reporting

How To Monetize Your Ads In AMP Pages

With the constant increase of ad blockers, it now tough for publishers to easily monetize their sites. For some people, boosting website load time has been a real incentive to use ad blockers which help in improving browsing time. According to Search Engine Land, AMP seems to be a good solution to this issue with their current statement as seen below:

benefits of goggle AMP

Because of this, some of the most popular ad networks on the internet are now using amp-ad extended component, some of the sites include:

  • Google AdSense
  • Taboola
  • Yieldmo
  • Plista
  • Smart AdServer
  • DotAndAds
  • Adform
  • Flite
  • AOL AdTech
  • AdReactor
  • Amazon A9
  • Google Doubleclick

Examples of each Ad network are provided here.

Although, some publishers are not happy with AMP for WordPress, and the biggest problem they’re having is still in the area of monetization. This is simply because AMP is stripped down and has limited advertising opportunities.

AMP allows Ads but, they are more challenging to implement. The good thing is that Google is expanding the number of Ad types AMP supports even though some publishers reports they’re still generating lower revenue from AMP compared to traditional mobile pages.

For now, it ‘s hard to say for sure how AMP will affect your site’s revenue; I guess you’ll have to see that for yourself in the future.

Are Google AMP Pages Different from Mobile Friendly Pages?

Yes!

When you want to compare which of the two platforms loads faster, you will have to put these two things into consideration; the speed and the way at which contents are being rendered and delivered to the end users.

First consideration: Which platform is fast loading?

So far so good, it’s been discovered and was confirmed by Jon Parise of Pinterest that site loaded with AMP loads on average 4x faster than any mobile-optimized blog page.

In his words…

“We found that AMP pages load four times faster and use eight times fewer data than traditional mobile-optimized pages.”

Now, to confirm Jon’s statements, here’s the test ran by PenguinWP and what they’ve done is to simply check a single page and a blog post on their WordPress website, and the result was mouthwatering.

 Why do Google AMP pages Loads That Fast?

If you’ve made a visit to the project page, you must have come across this documentation that shows the three most important components of Google AMP.

  • AMP HTML: a subset of HTML, with custom tags and properties such as amp-adamp-img, and amp-video
  • AMP JS: a JavaScript framework for mobile pages that manages resource handling and results in loading asynchronously all external resources
  • Google AMP Cache: a proxy-based CDN for delivering all valid AMP pages

That said. Google AMP pages are lightweight versions, and it simply does the job of ridding of “superfluous” tags, plus all non-compliant (read: third-party) Javascript is forbidden, and they also leverage of on the influence a CDN designed by Search King themselves for the sakes of easy delivery.

Does Google AMP Have any Affect on SEO?

From all indications and the results that people have continued to get from their tests, Google AMP are a great fit for SEO, and they improve our results on Google SERPs.

How do I know this?  Well, run a search on some of the famous names you know, and you’d see for yourself how the AMP-enabled pages are now showing up on the first page of Google. Magic, huh?!

Well, that’s largely thanks to Google’s amazing introduction of Google Accelerated Mobile Pages. 🙂

Wrapping up the Guide to Setting Up Google AMP on WordPress Sites

Before I call it a wrap, though, I’d like to share with you 5 reasons why your business would benefit from using Google AMP.

  • It loads 4x faster than standard mobile pages.
  • It helps to rank your business on Google’s first page
  • It helps you to have high click-through rates.
  • It helps you to make more money with ads as it is geared towards news publishers and content creators.

I should not fail to give bloggers who are more about lead generation a heads up. In this early stage of Google AMP, they are not compatible with your lead generation tools, and you’d realize that they will automatically not function.

Asides this, though, you should give Google AMP a BIG thumbs up on creating this winner tool for the backend users as well as for a good user experience for the frontend users. They have done a really great job at this one.

I’d like to know your thoughts about this. Have you installed Google AMP already? How are you finding it? Oh wait…you are yet to install the tool? Why, exactly what’s stopping you?

Thanks so much, I will anticipate your lovely comments!

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

BloggersPassion Featured & As Seen On:

Featured In
Share19
Tweet27
+13