YTread Logo
YTread Logo

How to Add AMP in WordPress (Install Google Accelerated Mobile Pages with a Plugin)

Mar 06, 2020
Hello people of the internet, in this video I will show you how to add an MP in WordPress with the

plugin

and how to configure the settings for the best performance. After this video you will have super lightweight Google

accelerated

mobile

pages

that Google will store on their servers so they load extremely fast and at the end I will show you a browser

plugin

that will help you catch any errors in your MP

pages

and now Arnie will explain how an MP works. I just want to mention if you are still not sure why you need an MP, what it is and what its benefits are.
how to add amp in wordpress install google accelerated mobile pages with a plugin
Watch the video that will appear in the upper right corner of your screen. Now I will explain in detail the pros and cons of an MP. Okay, let's

install

an MP. in your WordPress, so I'm here in my dashboard, let's navigate to the plugins and add new ones and in the search box type IP for WP and it's this, this plugin is amazing, just

install

it and don't forget to activate it. Oh, here you can choose how to configure this. I would just choose the easiest one. Let's do it here. You select the type of website.
how to add amp in wordpress install google accelerated mobile pages with a plugin

More Interesting Facts About,

how to add amp in wordpress install google accelerated mobile pages with a plugin...

You can change it to something else and then blog. Maybe it's an e-commerce that you have for local businesses, but mine is a blog, so I. I'm going to let you choose where you want to have AP. I suggest you only have four posts and leave the page on the home page without it. MP works best when it's just text and images, there's nothing fancy, it's usually your posts and then you can also adjust the layout first, you can choose the logo here and they actually suggest the size of the logo here. I don't think mine is the right size but you should upload an image that fits correctly otherwise later you will feel like this is just supported and then you can select the color for the entire scheme so mine is a bit blue.
how to add amp in wordpress install google accelerated mobile pages with a plugin
I'm going to choose this one, you can readjust it later and then if you have your analytics tracking, you can add it here and it's simple if you have analytics open, just come here and go to the cog wheel, just click on it, it's here on the part Bottom, it's the admin area and then here in your tracking information you have your tracking code and this is where you also have your tracking ID. just copy it and place it here and then it will add what type of analytics it is, in my case it's Google Analytics so I would choose that and then click add, actually this is code that doesn't come from this website so don't do it.
how to add amp in wordpress install google accelerated mobile pages with a plugin
I'll do now, I just want to show you how to do it and then you have your privacy settings, so here you can choose which one you want to choose so that the cookies know this gdpr bar, I honestly don't know why. You can only choose one, but let's say I'm going to use the cookie bar and I have, if you have one, just check this Ernie, how do cookie bars work? Talk to the hand and on this page you can set up ads if you wish. I'm going to leave that for another video so if you're interested just look at the link in the description and then when you click on the easy setup view you'll come back and here you'll find third party support so this section is if you have others. plugins already installed so they work well together, for example if you have Yoast you can add them and then it will take some of the elements from Yoast.
Also, if you have PWA or structured data, you can use it. You should check this if you have them. plugins for me, I don't have them, so I'll skip them now. You might be wondering what you can do now, so now you have to go to your website, so this is not really a village, what you can do is just adjust. the URL and add a PM to the end of the pop quiz for you Arnie, what does a P mean? That's a little painful, okay? And this is what your website looks like. It looks a little strange because you really need to have a

mobile

view because an MP is mobile only so let me adjust that and you can do that by right clicking anywhere on your site and choosing inspect element and here at the top you should see this devices icon, just click on it and now you just need to wait.
MP pages are indexed by Google which usually happens within a few days or may take a little longer if your website is new, as you can see it is very important that you put the logo in the correct size otherwise you will end up with something like In This actually looks pretty ugly, but the website is now fully AAP and you can basically adjust these things, so for example if you don't want them you can also delete them, so let's take a look at the menu and you can see. completely empty and in fact I can't even get out of here unless I refresh the page, this is because you actually need to go back to WordPress and then appearance and menus, so here for example apply my main menu which it's on my normal site and I need to check the MP menu as well, this way it will apply to both.
Don't forget to save that menu and then if you go to your website and refresh the page, don't forget to be on the ANP website, so once you're there, click on the menu and you can see that now I have everything too which I had on my normal website, so now if I click About, I'll go to a normal web page, so it's no longer a P because that's how we set it up. I don't want it to be about us pages or pages in general just the posts oh yeah and there's also this cool plugin for Chrome where it's basically an ap validator that's what it's actually called and when you're on a normal page without the NP . you can click on it and if it has an impedance you will turn blue like you just saw.
I'll redirect you to the AP page and it's green if everything is fine, so for example this empty page was fine, but then I have a page here where there are actually two problems, let's see what they are. If you click on it, click on it, it will open and tell you what's wrong. For example here it says I have something wrong in the CSS so I have some custom stuff that shouldn't be there and I'm also missing some font set there for an image so that's great because this way you can debug what the problems are , they are generally very easy to solve.
I need to add a small star or attribute attack to your code, but that's it, it's usually a pretty simple solution. My name is Robert and if this is your first time here and you want to learn more about how to improve your website, get more traffic and others. things related to the website, make sure to subscribe so you don't miss anything. Here are two videos I think you should watch next.

If you have any copyright issue, please Contact