How To Implement AMP Pages On WordPress Blog – Complete Tutorial

Hey Guys, Harsh here from SohoutMeLoud and this is again one of our mega tutorial where you will be learning something new to do on your blog So, in today's video your will learn how you can implement AMP pages on your blog and also how you can customize it

If you don't know about AMP let me tell you like they have desktop site, we also have a mobile version of a site Now AMP is- "Accelerated Mobile Pages", which is basically a standard by Google which will help your page load really fast It's highly recommend that you start using it and you should also customize it to make most out of it So, in this video I am going to implement AMP on one of my WorPress blogs I will also show you how I am customizing it so that will give you a lot of ideas about the things that you do, about how you can add advertisements and all those stuff Alright? So let's go ahead and let's try it and see how it goes

Just a disclaimer- I am doing it on my live site so chances are that sometimes video might be little lengthier, but if you haven't implemented AMP yet or if you are learning something new, this kind of video is going to be more useful to you rather than something which is shortcut Alright? So, without further delay let's go ahead and start using AMP So, first thing that you need to do is you need to login to your dashboard And click on Plugins and Add New Here, I will search for AMP

So, we will be installing two plugins The numebr one is this- AMP by Automattic This is an official plugin by WordPress Team and the second is AMP for WP This plugin is by Ahmed Kaludi These people are already one of the WordPress theme development company based out of Hyderabad

A pretty interesting people and this plugin is very peowerful So, I will show how to use this plugin as well But first let me install both the plugins So, these are the two plugins that you need to install- AMP by Automatic and AMP For WP by Ahmed and Mohammed Kaludi So, let's activate this plugin and activate this plugin

So, once default plugin has been activated, you don't need to do anything What you need to do is let's check if the AMP has been enabled on our blog or not So, open any of the blog posts and add sufifx /amp/ and click enter And that's it So, here you can see my AMP page and this is the same process you are going to use to enable AMP on your website

Let me disable this AMP for WP Plugin because I want you to see the difference between both the plugins If you are not using the addon plugin what happens Right now let me refresh this page That's it So, this is what happens when you installed the default AMP for WP plugin

As you can see your header is gone, there is no navigation and that's it When post is done, people can see categoires, tag, the point to leave a comment So, this page is pretty boring Right? And it's not pretty friendly in terms of lot of phase that you lose a chance for branding You don't know how to add advertisement and also your Google Analytics code

So, this is the reason that this other plugin that I was mentioning about Accelerated Mobile Pages, AMP by Ahmed and Mohammad Kaludi This is very important So, once you install the plugin, it starts working by default So, as you can see here, there is no soical media sharing button, there is no related post, and even the branding is gone Now, let's refresh this page to see the effect

So, here you can see your blog name is visible here Now, Featured image is more prominent Most important you have a sharing button over here and you have another social media sharing button over here Then you can see related posts which is again very useful, because most of the people who started implementing AMP, they are complaining that- Okay! my bounce rate is getting higher And in case you know, people want to visit the mobile site or desktop version they can just click on view non-AMP version and they will be redirected to the non-AMP version

So, just to clear your confusion, I mean, these are the two plugins that you need from day one You should defeinitely use it to make the most out of it Let me show you how to configure this second plugin by Ahmed and Mohammad Kaludi So, click on Settings and this plugin is very easy to configure, I mean, even anyone without any technical skills can get started with this Alright? So, I want next previous links, I want social icons- Yes! Featured image, Number of related posts- 3 is good

Click on General Upload a logo for the AMP version So, you can create a logo for your blog The recommend size is 190 X 36 And then you can upload it

I don't have it handy with me right now otherwise I would have done that When you are doing it you should definitely do that Another thing which is very important is your Google Analytics code By default, your AMP pages will not be tracked by Google Analytics But you can enable this feature from here

What you need here is you need your analytics code Let me get it for my blog This is my tracking code Just copy and paste it Create custom AMP Front Pages- No! That's not what I am doing and that's not what I recommend right now

And That's it Click on Save Changes Then design- in case if you want to make any changes in the design

It has inbuilt featured to integrate your Yoast SEO plugin with AMP SEO So, this is very useful and ensure that you know, your AMP pages does not create duplicate content issues Alright Another thing which is very interesting is like you can add a menu

So, if you see this site, there is no menu Oh! there is navigation by default But you can decide which menu that you wanted So, you can create a new menu all together for your AMP site Highlighting most important pages of your website

And that will be seen over here when people click on it Now, apart from that, Advertisement This is very important So if you want to enable advertisement, let's say you want to add Google Adsense to your AMP website, you can do that from here Just click on Select the Size that you want to use

336 x 280 is what I recomement Get your Adsense Pub ID and ca-pub-id and your ad slot Just paste it over here Click on Save Changes And advertisement will start showing So let me disbale it for now

But in case if you are monetizing your site using Adsense, this is highly recommended to you Let me disable few of them because it's not very important Sometimes it's actually good to have less social media sharing buttons that will help people to give them less options so that they can take something out of the less Alright? That's it And if you want to change any word, let's say instead of navigate you want to use menu

You can use menu, click on Save Changes and let me show you what happens Just now So, from navigation changes to menu So, you know, like this like small fall changes that you can do with this plugin I had a word with their author and they told me like there are coming up with many advanced features

So as you can see they are already adding support for custom post types, advanced AMP ads, and few other things that is coming up So, this is the plugin that you should look out for becuase I like the way mobile site has become a big deal in 2015-16 AMP pages are going to be another big deal in 2017 and in coming years Ah! Well with this, I hope you have enabled AMP pages on your WordPress site Go ahead, try it if you haven't I have added the links of both the plugins in the description below And I think within minutes you should be able to enable this In case of any confusion, in case of any doubt, you can let me know in the comment section below

Do let me know how you like this video and if you would like me to do ah similar videos more let me know in the comment section below That will help me to really decide whether these videos are really helping you or not And I will see you in the next video Bbyeee! This is Harsh from ShoutMeLoud

Free Email Updates
We respect your privacy.

wordpress plugins tutorial

affiliate marketing