How To Implement AMP Pages On WordPress Blog – Complete Tutorial

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.

47 thoughts on “How To Implement AMP Pages On WordPress Blog – Complete Tutorial

  1. Thank you Harsh … I am a big fan of your Shoutmeloud.com
    Now i am going to add the AMP to my site.

    Harsh I have doubt, both you and me using Genesis Framework, But can you please make video on to make our own custom child theme for Genesis FrameWork or Guide me to get any Resources….Sorry for Bad English.-Thank You.

  2. Thanks for the tutorial Harsh! I use the shortcodes ultimate plugin on my site and those shortcodes aren't transalating into an AMP page, is there a work around for this? I am facing the same issues with Instagram embeds.

  3. Hey Harsh,
    What should i do if i'm using yoast? Should i use AMP for WP or yoast glue? i see you have yoast plugin as well and you still using the AMP for WP. Does it effect the seo if you're' not using the yoast one. Thanks for the tutorial !!!

  4. i'm using this plugin but my webmaster have a some error-
    Google systems have detected that some of your AMP pages do not meet our guidelines and will therefore not show in Google Search AMP-related features. The following report provides examples of pages with errors:

    Please help me

  5. Nice video, please can you do a video on how to unblock my url on facebook; Facebook blocked my url such that nothing about that url can be shared on Facebook platform. Any help please?

  6. Hey! Harsh, you have shared great information in this video. I was looking for this information but i haven't got it anywhere. Today i got it through push up notification from you. Thanks a lot! Now i can install this in my blog. 🙂

  7. Thank you very much. I have done every thing you did and very thing works but my question is, when you ware testing you added /amp/ does that mean when I want to share my links on the social media I have to add /amp/ at the end of every link or it automatically converts it

  8. Hi, thank you so much for this video tutorial, However https://search.google.com/search-console/amp says that my site is not a valid AMP site. Why is that?

  9. Update:
    Nevermind, the core plugin is required.

    Hello Harsh,

    In order to get the layout similar to your page, is it mandatory to use both the plugins? Or just using the Ahmed Kaludi one will do?

    Thanks.

    www.pcversity.com

  10. Just to clarify, once it's enabled, does all future mobile traffic to the website get directed to the AMP ver?

  11. Hi, I tried this but it's not working. Will google index all my posts as AMP page or should users type amp manually.?? thanks

  12. Thanks for sharring that video, i have a question about same, what would be the next step after setting up AMP? How user can direct access AMP version on mobile device and will it consider duplicate content after amp?

  13. https://wordpress.org/plugins/accelerated-mobile-pages/
    The accelerated-mobile-pages plugin are no longer available for download from 11 Jan, 2018. What should we do now?

  14. Hi Harsh, when i'm activating AMP for WP the AMP by Automattic gets deactivated automatically. Both plugins are not working together. Could you please help?

  15. Sir I have seen your video and implement the plugin of Ahmed Kaludi… and add the Adsense ad units but the ads are not showing… what should I do?

  16. Hello when i'm using your method all my content doesn't update, I don't have any pages or menu.. I'm using a premium theme (Jupiter), what can I do?

  17. used Accelerated Mobile Pages plugin following your settings.
    But in AMP validator getting some errors. can you able to explain that

  18. I active AMP plugin .After this, i c visitor decrease drastically (almost half) …Google analytics do not show mobile visitor ….This time mobile visitor show s only below 10 …where desktop visitor show more than 400 ….After this , I deactivate AMP plugin I c reverse result …..google analytics shows mobile visitor & also visitor come in previous position ….mobile visitor shows previous data ..desktop show 350 visitor & mobile visitor shows 280 visitor (from 10)..why this happened …pls clarify & give me solution

  19. how to create the amp page for custom plugin's for our site, by defautl it is not showing in correct way design n all is gone

Leave a Reply

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