Step By Step Guide On How To Make Your Website Google Amp

Recently Google has announced that they are rolling out Accelerated Search Pages in their mobile search results. This means Google first looks to the mobile version of your website to determine how it should be indexed in search. 

Now, you might be wondering to know how you can get in on the action? 

The first thing you should know is -what is AMP? 

The AMP stands for Accelerated Mobile Pages. It’s an open-source HTML framework that allows webpages to be loaded almost instantly, even the rich content like images, videos also. 

Google first announced the AMP project in 2015. 

For example, if you are an athlete, you always focus on reducing the fat percentage of your body, only have the muscle mass so that you can perform better. Similarly, AMP is the lean structure of web pages that contains all the muscle-mass of content but eliminates all the extras like body fat that makes you slower. 

The best part of AMP is it allows your visitors to see all the content of your web pages instantly, rather than waiting up to 20 seconds. 

 You might have already seen a lot of AMP sites with your smartphone. If you haven’t, here’s the demo above.

Google AMP Demo

Why Does AMP Matter?

 

These days people don’t have time. If your web pages are slow, the more people leave your site and, the faster your pages are, the happier your visitors are and, end up with better engagement rate and conversion. 

Google like this kind of behavior. It's true that AMP is still not a ranking factor, but at the same time, Google love website that visitors love and engage with. 

So, you must set up AMP for your website. 

AMP helps you serve content to your visitors faster, so it reduces the likelihood of your visitors to leave your site quickly, and you will have less bounce rate. 

How does AMP Work?

 

AMP consists of three basic parts: 

AMP HTML: 

It’s a subset of HTML that comes with custom tags, properties and a lot of restrictions. If you are familiar with the regular HTML, you won’t have any difficulties in adopting the current pages to AMP HTML. 

AMP JS: 

It’s a JavaScript framework for the mobile pages. Primarily it manages resource handling and asynchronous loading. One thing that you must note down that any third-party JavaScript is not permitted with AMP. 

AMP CDN: 

It’s an optional Content Delivery Network which takes AMP-enabled pages, cache them and, automatically make some performance optimization. 

Know the procedure to AMP your site: 

If you are at the starter level, you will have to manage two versions of an article page, the original version of the AMP page that people will see and an AMP version of your article page. 

Since AMP doesn’t allow on-page forms or third-party JavaScripts, so, you won’t be able to have on-page forms, on-page comments and some other elements that you can have your regular web pages. 

The template of your website needs to be re-written so that you will be able to accommodate all the restrictions. Take CSS for an example- all the CSS in AMP must be in-line and, less than 50 KB. The custom fonts should be loaded with AMP fonts extension. 

When it comes to handling multimedia, it should be handled carefully. The images must use the custom amp-image element and, must include the right width and height. 

If your images are animated GIFs, you should use the separated AMP-anim extend component. 

Just like images, there is a specific custom tag that must be utilized to embed locally hosted videos via HTML 5- amp-video. 

When it comes to embedding YouTube videos, there’s a specific extended component, amp-YouTube. 

There are supports for almost everything- amp-carousel for slideshows, amp-image lightbox for image lightbox, social media embeds for all the social media platforms like Facebook, Twitter, Instagram, etc. 

Using these components are not complicated, but it needs some planning on your site’s design. 

If you want Google to detect the AMP version of your website, you will need to make some modifications to the original web pages. The original page must include the following tag-

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

How to monetize ads into AMP?

 

These days the rising number of ad blockers have made it difficult for publishers to monetize their websites with ads. 

As a result, several popular ad networks are using amp-ad extended components. 

Some of the popular ad networks are-

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

Now, follow these instructions to AMP your website or blog-


1.    Install AMP Plugin: 

Nothing could make things any easier than this awesome AMP plugin. All you need to do is activate this plugin, and it will make all your page amp-ready by adding /amp/suffix at the end of your URL. 

2.    Install the Yoast Glue Plugin:

SEO Article

Wouldn’t be it nicer if your pages look like the rest of your website instead of just having the default black and white style? 

The best news is – there’s a plugin for you for this purpose. Yoast has an excellent plugin that allows you to integrate metadata into the AMP pages and at the same time, customize the colors to match up with your brand. And, all of these for free of cost. 

The process is straightforward. Once you have downloaded and installed the plugin, go to the Yoast SEO menu in your dashboard and click on AMP. 

 Now, you can find the Design Tab, and from there you can upload a custom icon, change your color, adjust the hyperlink settings and, other things. 

One thing you must note that The Glue for Yoast  SEO and AMP plugin won’t work if you use other plugins.

3.    Review Your AMP Page Using Search Consoles: 

Once you have implemented AMP and customized it to match the feel and look of your website, you must ensure that Google notices your effort. 

How? Log into to your Google Search Console and click on the Search Appearance and then click on Accelerated Mobile Pages.

Search Console Amped

This is the exact page above where you can watch all your AMP pages that are indexed and fix any errors that may arise. 

How To Implement AMP for Your WordPress Site: A Step by Step Guide

Well, there are three methods of implementing AMP to your WordPress site-

Method 1: 

Login to WordPress admin options panel and then go to plugins and click on Add New. Now search for Accelerated Mobile Pages and install it and after that click the Activate button. 

AmpWP Plugin
ampwp activate

Method 2: 

Download the Accelerated Mobile Pages plugin online. 

AmpWP Download

This procedure is also the same as method 1. Login to WordPress admin panel of your website. Click on Plugins and then follow this step- Add New> Upload Plugin> Choose File>Install Now>Activate. 

Method 3: 

Extract the downloaded zip file. Now, login to your FTP client. Go to Root Directory and then follow this step -WpContent>Plugins>upload the extracted folder. 

Now, login to your WordPress Admin Panel, click on the Plugins, and Activate the new Plugin. 

Testing For AMP: 

Once you have activated the AMP pages, Google will automatically index the AMP pages in the search console. 

How To Check Errors in Google Search Console: 

If Google finds any error in your website, Google won’t make your visible and distribute in the search engine result. 

Use the Google Webmaster Tool and select the website. 

Now, go to the Google Search Console and go to AMP. This is the page where you can all the errors of AMP for your website. 

Adding Advertising on Your AMP Pages: 

You need to follow the exact steps given below to add advertisement to your AMP pages of mobile application or mobile-optimized website. . 

Log in your Google Adsense Account, go to the My Ads tab. You can create a new Ad Unit or use the existing Ads Unit of ant size. You need to copy the Ad Slot ID and Publisher ID. 

Amp Ads AdSense

Now, login to your WordPress Admin panel and go to the AMP option panel. Now follow these steps- Go to Settings>General Advertisement Tab> Select the size of the ad and paste the Ad Slot ID and Publisher ID to the right fields. 

Monetize Your AMP Pages: 

If you are going to publish AMP pages, make sure you are going to monetizing the pages well. 

The first thing that you need to know here are the principles behind advertising in AMP. 

We have already taken a balanced stance to prioritize user experience over anything else. But, imagine how ads could perform and make more revenues with the features that are  challenging to implement on non-AMP sites for important reasons. 

1.    Faster Rendering Process 

Unlike the non-AMP pages, the AMP pages make the ad request as early as the lifecycle of the ads. This process allows the pages to be rendered fast, while also allowing the ad server to run the action faster to come up with the best advertisement. By the time the best ad arrives, the page has already finished loading so that ad can also render almost immediately, which ensures better viewability and click-through rate. It’s a win-win situation for publishers and advertisers. 

Ampfast

3.    Prefer Ad Format That Users Can Easily Dismiss and Scroll Post

You cannot ignore the fact that users come to your site for content, not ads. So, there are design choices in AMP that would never show ads that block the content, which means no content-blocking pop-up. 

It supports all ads within a specific layout which includes Rich Media Ads also. 

Furthermore, AMP launched some native ad formats like Sticky ads, Flying Carpet ads, etc. 

So you might have realized that with AMP, you can provide better user-experience along with showing ads in a more non-disturbing manner. 

Conclusion:

Finally, you have it. You follow these easy step and implement AMP on your WordPress site. This exciting new technology is very much in trend. Make sure your website is AMPed.

Last Updated on

>