How To Use AMP for WordPress Blog

How To Use AMP for WordPress Blog

Hey! In this Article, You Will Learn that what is Accelerated Mobile Pages (AMP). In Addition, How To Use AMP for WordPress Blog to make your webpages faster.

Recently We have learned How to Speed Up WordPress Website Load Time and I hope that helped you to speed up your website. AMP also help you to increase website speed.

AMP for WordPress Blog

Many Of you Already follow the process to make your web pages Mobile friendly.

Google-AMP-for-WordPress

If you are not able to do that then today i’ll make you understand How To Use AMP for WordPress Blog. Let’s understand How?

What is Accelerated Mobile Page (AMP)?

AMP is nothing but just a kind of Script and a new way of making mobile-friendly pages that load quickly compared to traditional mobile pages. Cool Right?

At its core, AMP simplifies the whole thing for mobile users and cut down version of normal HTML which allows better performance when pages are served in the browser.

In other word’s, AMP is a new way of building mobile-friendly pages that load faster than existing pages to mobile users.

Accelerated Mobile Pages (AMP) Frequently Asked Questions (FAQ)

To Give you a better idea about AMP for WordPress Blog, I’m going to answer some common question which is asked by new bloggers.

How does Find Which is an AMP Page?

On Google, I searched for Off Page SEO in mobile and I got these results as below. Can you see there is a lighting mark before the URL?

This shows that the pages you got on the search result page with lighting Symble are optimized with AMP. If you open this webpage, you’ll see the speed. Try it.

Who is currently supporting AMP?

The AMP plugin was born out of a collaboration between Google and Twitter.

Moreover, Google is the biggest stage that supports AMP in their search results right now. Also, Pinterest, Twitter, LinkedIn are in the line.

Is Facebook Support AMP

Yeah! But In Different way. Some times ago, Facebook has created its own version of AMP which is called Instant Articles.

Contact is same as AMP but with different technology.

Is AMP an SEO Ranking Factor?

Yeah but not directly. AMP is all about Speed and Google has a ranking factor on website speed.

Will AMP Pages create Duplicate Content Issues?

Naah, Not at all, every AMP page has a canonical URL pointing to the desktop version so that the different consumers. Which mean not duplicate content.

Can I use AdSense on AMP Pages?

Oh Yeah, Google Adsense fully support AMP. So you can use.

Is it difficult to add AMP to my WordPress Website?

No, We will learn it below that How To Use AMP for WordPress Blog.

Should I add AMP on my website?

Personally and professionally i’ll say a big YES. Google is already crazy about making the mobile web faster and the AMP initiative is a big part of this project.

But, AMP is not one of the ranking factors right now. However,  They give more importance to AMP pages in their mobile search results.

How To Use AMP for WordPress Blog– A Step By Step Guide

Till now, I hope you understand what is AMP, now it’s time to do the main work. Let’s Apply AMP in a WordPress blog.

Step 1: Install AMP Plugin

WordPress released a plugin called AMP developed by By AMP Project Contributors. What you need to do is just install that plugin on your WordPress website.

  • Open WordPress Dashboard
  • Go to Plugins > Add Plugins
  • Search For AMP and Install it.

AMP for WordPress Blog

Or you can install it manually from downloading the Plugin from here.

Step 2: Header color customized

With this plugin, You will not get very much customization option (Till I wrote this post). So you can not do visually.

You can just change the background and foreground color of the header and choosing between a ‘light’ and ‘dark’ only predefined color scheme.

  • Go to Appearance
  • Click on AMP

AMP for WordPress Blog

Step 3: Add Analytics Support

After Install AMP, You will not able to track AMP visitors on Google Analytics. The analytics code that is already available on your desktop and mobile pages will only track desktop and mobile pages.

You’ll need to make some setting in order to make this data available, you need to add the analytics code within your AMP code manually or via a plugin. It means you’ll have two option, which are,

1. Are you using Yoast SEO on your website? Go Enough for you. you need to install and activate a plugin called Glue for Yoast SEO & AMP and use the ANALYTICS section to add your Google Analytics ID in it. This is a simple Step. And another one is,

2. If you don’t want to install any more plugin you to WordPress website then you have to do it manually. Go to your FUNCTIONS.PHP File and Add the Code in that,

add_filter( 'amp_post_template_analytics', 'xyz_amp_add_custom_analytics' );
function xyz_amp_add_custom_analytics( $analytics ) {
if ( ! is_array( $analytics ) ) {
$analytics = array();
}
$analytics['xyz-googleanalytics'] = array( 'type' => 'googleanalytics', 'attributes' => array(
// 'data-credentials' => 'include',
), 'config_data' => array( 'vars' => array( 'account' => "XX-XXXXXXX-XX"
), 'triggers' => array( 'trackPageview' => array( 'on' => 'visible', 'request' => 'pageview',
),
),
),
);
return $analytics;
}

Important: Just one more thing, Just replace XX-XXXXXXXX-XX shown in the above code with your Analytics Id.

Step 4: Check AMP Execution – AMP for WordPress Blog

1st Method.

I have a very simple Idea to check your MP Execution to make sure your AMP pages look good but also comply with AMP guidelines.

Open the web browser and enter any Webpage URL, For Instance,

www.seokhazanas.com/know-before-join-affiliate-program/

And this will be like

AMP for WordPress Blog

Now, Add AMP at the end of /

That will be like

www.seokhazanas.com/know-before-join-affiliate-program/AMP

Hit enter and you will see the difference.

AMP for WordPress Blog

2nd Method

The 2nd method to verify AMP Execution is also very simple. What you need to do is to install the AMP Validator Chrome Extension then open a webpage that supports AMP. Click on the small AMP icon added on your chrome (Something like Lighting Icon).

Now Click that icon, if you see Green Icon Like then Everything is okay, If not converted into a green then check your AMP settings.

AMP Pages & Google Adsense Case Study

I worked for my client. who uses Google Adsense which was the main source of income. I implicate AMP of his website and got some result that I’ll share with you.

Effect on traffic after Install AMP?

I migrated the client website to AMP and a week after, the website started receiving AMP traffic. Two months after the implementation, the AMP traffic is steadily increasing together with the overall site traffic (if you combine desktop, mobile, and amp).

Now after migrating to AMP, the total site traffic increased by 20%. that’s cool right.

Any effect on Google AdSense Earnings?

Adsense Earning is correlated with Traffic available on the website/blog. And, As I said above, 20% of traffic got increased after AMP implementation. So the Website earning also Increased.

Looking at AdSense reports and comparing the performance of AMP and non-AMP mobile pages, I can see that:

  • CPC was similar on AMP and non AMP pages.
  • CTR got a little higher on Normal Pages, I don’t know why. But not on AMP pages because AMP pages take more time to load so if the users scroll down the page quickly they will miss it

You can also read some case studies showing the effect of AMP on AdSense earnings

AdSense has also released some early case studies showing the effect of AMP on AdSense earnings (screenshot below).

AMP for WordPress Blog

Conclusion

If you ask me, Should you migrate to AMP or not? then Yes, because you will have to go with AMP and the reason is simple: Google is pushing AMP a lot.

There Might be a chance in the future that AMP becomes the Ranking factor directly.

What is your experience with AMP pages so far? Let me know in the comments.