How To Add AMP To WordPress - Accelerated Mobile Pages [2019]

Hi, I'm Kevin with creative digital media and in this video I'm going to walk you through setting up amp

pages

or

accelerated

mobile

pages

on your WordPress website. This is the home page of the plugin. I'll show you how to install amp for WP, so amp or

accelerated

mobile

pages are essentially simplified versions of your website that load much faster than your normal website. They are cache pages that basically have no CSS or custom styles. They are very simplified and load very fast on mobile devices, which provides a better user experience and goes a long way in improving the search engine optimization or SEO of your site, so this is an important aspect or add-on important thing to add to improve your site's SEO friendliness. so just to show you the difference in the amplifier, I have here this is my website with amplifier enabled.

This is my usual blog. I just press down or press down on the window because the website is responsive so it looks good on mobile devices even without a magnifier like you. You can see it in the example on the left, but on the right it doesn't look that different. I mean, obviously, you can see that these individual blog posts have a hover effect and there's a black shadow like a subtle box shadow behind each of the posts while the amp version, other than when I hover over a link, there is no custom style or anything, everything is like all the custom styling is removed, as you can see the header is more or less the same, actually you like the aunt header better because it has this do button click to call which I could add to my header but it's easier to do and the menu is like there's a slide up menu and you can choose which side you want it to come out on and you can set whatever background color you want.

You can choose to have or disable the search function and you can also add links to your social media profiles which is great, so those are the visual differences between amp and non-amp. Now I will show you how to install it in Word and simply. very quickly, this is the amp home page for WP, but there are also a good number of tutorials and how-to guides on their site in help. If you hover over help, they have tutorials and you can contact them. I don't know how receptive they are. It's a pretty well-developed plugin, so I assume they're pretty good at communicating with you, but there's a lot of very verbose details, like this is the post to basically set up camp on your website and it's pretty fucked up. long, but it goes through like each option step by step once you log into WordPress within your WordPress dashboard, you hover over the plugins.

I'm sure if you're adding amp you already know how to install a plugin in WordPress, but if not Here's how you do it. I already searched for amplifier, but just type it in and it will do a search. There is another amplifier plugin that actually has more facilities but does not offer any customization options. Actually, it's this one. one here and if you are using Yoast on WordPress, which most people are, you also have to use Yoast glue and amplify here along with this plugin, so I like this one, it has better ratings and a lot more reviews, and it has a Tons of options to customize it, it even supports page builders, like if you use Divi or Elementor, it doesn't repeat, it doesn't work with thrive themes and I know this because I was using thrive themes on my website which is a great theme , but when I went to add a booster for WP and went through the whole setup process, then I went to look at my website and I thought I liked all the bulleted lists on my blog if they had a bullet each.

Bullet would somehow explode into a full screen image, it was weird so I got frustrated and just got rid of their themes and switched to Studiopress Genesis framework and am using the Business Pro theme which really keeps everything consistent in my entire site and it's like a very clean professional design and they have more options depending on what type of business you need or what you need your website for, they have blog themes, more corporate style lawyer themes for news sites, commerce sites email and have like 60 different themes, they are premium themes, so you have to pay for them, you pay for the Genesis framework and then any theme you want on top of that, it costs like 120 dollars depending on the theme to install. this plugin, all you have to do is click install and then activate it so that the amplifier is installed.

There is an option to go through an installation wizard. I don't think it's not necessary. I think it's really worth it because you can just go through all the settings. I'll show you all the settings in this video, so just by watching this video, you'll have a gap implemented incorrectly on your website and the setup wizard just your installation wizard, it's just five steps that you add. your logo, add a Google Analytics tracking code, choose which pages on your website you want to be zoom pages and that's it, so I'll walk you through all the settings right now if you need help or are looking for something not be a physical guy, but like a step by step written guide down here, they have links to different, basically, those pages that I showed you before, like the tutorials here, so on the left, click on settings, once that's done , go to settings. page this is where it will take you after the installation wizard if you do.

I think down here there are different plugins that you can purchase, like adding email subscription forms if you have an ecommerce store and your ecommerce website. you can admit that they have expanded commerce star ratings, so it's basically like for a schema brand or structured data, you should have a schema on your website, so this allows you to basically display your aggregated star rating on search results and can also allow you to display it on your website, I'm using just the free version of WP and it's a fantastic plugin that covers everything you could want but if you want more there are options for that so we'll just go through she is ready.

I'm going to try to go fast and there are some things I'm going to skip or ignore because I don't think they're relevant or they're not that important, so I was sick, what's the most important thing? relevant if you need a detailed guide on every feature, amp setup options literally goes through everything step by step, so that's a start, go to the general and this is extracting the logo from my website. Normally, you can change the logo size if By clicking on this, you can basically change to display your logo at a certain percentage of its original size, so the recommended size for amp is 190 by 36, but depending on the type of logo whatever you have, you can have a logo that is wider or wider. more square, so you can basically set it to display in different sizes by clicking this, but it will automatically resize so it scales, so make sure that if you're not using a PNG file for your logo, make sure you do. with a transparent background so it scales without distorting like a JPEG image would, so these are the settings to enable or disable the magnifier on certain pages of your website.

On my website I have it enabled for posts and pages because I have a static home page if it has one. If you don't have a static home page and you are basically your blog archive page or your blog feed is your home page, then you can choose home page support, so this basically turns your blog page start on your blog page, so it will only have one list. of all your blog posts, you can choose to have a custom home page and then basically just select the home page of all your pages from this dropdown menu.

I don't have that enabled on my website, so I basically don't know. I like what this removes from your homepage design. I know my own page is responsive, so I don't include my own page. I only use PAMP on my posts and pages and you can choose to have the page title displayed on your home page. turning it off automatically closes the others and you can turn it on for your archives and category pages or categories and tags, and you can set the amplifier for custom post types, which is like you can view items from your portfolio and convert the amplifier to WP basically. convert your like, take your amp pages and Nan amp pages and like makes a uniform layout out of the two and then only shows one page to visitors, so basically you like to only have one amp version of your site website, but it's basically how I think. looks like your original theme, alternatively there is an amp takeover which basically removes, not removes, but will only serve amp pages so basically just amp takes over your website so I have it disabled because I want my desktop to have the desktop version. on my website to make it look like the desktop version of my website, the teaser is the page builders, as you can see they support multiple page builders.

I'm not using the page builder at the moment, but there is documentation on how to implement it alongside your page builder. It also allows you to display ads and there is an improved version which I'm not sure doesn't use ads or display ads on my site so I haven't done that but again there is documentation on implementing ads so I think the goal is description is SEO. This basically just pulls the meta description of each page, so the way Amp works is that if I'm on my phone and I Google SEO services in Phoenix, the search results will be or display a bit Like a lightning bolt, they will display this type of logo. next to my website snippet in the results and I believe this simply pulls your meta description from your post or page and uses it as a meta description for amp and can integrate with several different SEO plugins depending on what you are using. using Yoast, you could also use Genesis, but I'm using Yoast, so this is just asking me if I want to extract the meta tags, description from Yoast into ld+ json, trigger that and then canonical from Yoast, so basically that's a good point to explain .

Canonical URLs A canonical URL basically helps you avoid duplicate content on your website, so the amplifier could be a problem because the way the amplifier works with your website it basically makes a copy of each page, as you can see in my blog page, it's creative. digital Mediacom/blog/amp that is the expanded version of my blog page, while this is the normal version, so there is no amp at the end of the URL, so a canonical URL basically says this is the original version of this page. the page you should index as the original version of the content because you have an amp and non-amp URL both pages are identical except for some similar styling options that you don't see in amp, so your canonical basically Yoast automatically adds a canonical URL for each page and when you set Yoast canonical, it basically identifies your desktop version or identifies the original version of that piece of content so that you don't get or have any duplicate content issues. on your website, the URL inspection compatibility tool basically allows you to not index certain pages on your site, so you can basically tell Google whether or not to index all these different pages, so if you have this set, it automatically all of these will appear. set to index, so I'll leave it to you about what you do and I shouldn't mention this before, but every time you make changes, make sure to hit Save Changes at the bottom so the performance improvement minimizes, it's basically like getting rid of like there are lines between empty lines in your code, like you get rid of empty lines, basically you like to compress everything or combine your different code into a single file instead of having to serve as multiple files for different areas. so speed up your site a little bit so leave it or set it up and do analytics you can set up Google Analytics you just need your tracking code or you can use it if you are using Google tag manager you can set up a container. in google tag manager, for data structuring or schema markup, you can set it for your posts and pages, so a post or blog post should be set as blog post or if it is a news article of some kind, you can set it up as a news article.

If you have a food blog, you can set it up as a recipe and this basically allows search engines to display some information in these search results, so if your blog is a blog, you have a post that is a recipe or your blog It's like a blogrecipes where you can set your posts to have a recipe schema and allow like Yahoo Bing, Google Doc taco, different search engines to show that recipe as a featured snippet in search results, which feature snippets that appear above everything else in the search results and they are a great way to increase clicks to your website and it's like a prime spot on the search engine results page for pages.

I have this two website, but if you like an e-commerce, you can set it up for one product. You can set a default structured logo or use the same logo that you use for the schema or structured data you have on the desktop version of your website, and just like the header, you can customize the size of the default post image of your logo. is when there is no featured image set for a post, by default any image you set here will be used. If you are in Europe, you can turn on notifications. This is a cookie consent bar, so it's like when you go to a website and you see a bar pop up at the bottom or sometimes at the top that says basically like we would like to allow us to basically ask If you can track people's use of your website and compliance with the GDPR, this is the one that works for similar things.

Push notifications in Europe, this is what you have to use, I think a signal and push notifications, like when you go to someone's site and here on the top left something pops up and says: allow so-and-so to send you notifications or something, contact him, Amplifier for WP supports contact form 7, gravity forms and ninja forms, it does not support happy forms that said "me". I'm using happy forms and was about to switch when I remembered a great setting: This plugin has the only page on my site that I'm not using amp is my home page and my Contact Us page and it's enabled in settings. on my contact page, but on each page you have these options in the document settings on the right side of the WordPress editor and that appears on your posts and pages, except on this contact page because the contact form is not displayed. in amp, so basically I turned off amp for my contact page here, just choose to hide it and disable mobile redirection to contact us and it just shows the normal version of my webpage instead of the amp version of my webpage. so there is no extended version of my contact page, but if you are using one of these then it supports it and will display it.

You can choose to allow comments on posts or pages. I don't need people to comment on my pages but blog posts, I sure would love to get comments, go to my blog and comment right now and you can change your comments to like them, use Facebook comments or if you are using discus or your Koller voice or vuco vuco, point out I'm so I just wanted in my posts and these hide the bulk tools so you can basically turn off the amp for entire categories on your site as well as the Hyde amp bulk tools , what this basically means is see what it's like to hide amp, this is what it's referring to. is a way to hide a group of pages or posts instead of doing it individually on each page or post, you can do it on entire categories, so to select categories you have to basically enter as whatever your categories are, so if you wanted to exclude all my posts about SEO.

I can exclude all posts from SEO. I'm not going to do that, but this is how you would do it and you can disable that feature, which means if I don't want this to appear in my editor in the backend right here, I can disable it right here and just say hide by default in the Advanced settings and some of these are very good so mobile redirect turns that on and I have it turned on for both mobile and tablets and this is a pretty cool feature changing internal links to amp basically what this does is here I'm on a desktop version of my website, so this is an internal link to my about us page, as you can see at the bottom left, where a preview of the URL is shown. mediacom digital creative slash about us and this created Mediacom slash benefits of local SEO, so they are links to other internal pages on my website and their desktop versions of those pages or posts, while in the amp version that same SEO expert link is automatically changed to an amp version of that page because if someone is viewing amp if they are on their phone, they have been automatically redirected to the amp version of this web page, so if you go to another page that follows a non amp link it automatically redirects you to an amp page because they are on their phones so it takes a little longer to load if it has to redirect but if the link is just a direct link then there is no redirect, so it automatically changes links to links from amp to amp. pages, it doesn't do it on non-amp pages, as you can see here.

I am e-commerce. I don't have e-commerce, but it does support WooCommerce and if you're giving away, e-book downloads or something like that. Even if you sell products that can be downloaded, this is where you would enable the translation panel that doesn't hit Save Changes. This is basically like the breadcrumbs home page title. It's like changing this would change the name of your home page in your break rooms. these are the breadcrumbs that are here, so this is the home page. You can change it to whatever you want, but I think the home page makes sense because it is the home page.

You can choose from a few different amp themes. I'm using the Swift theme, but there are other options, this is a layout, obviously designed so I'm not quite sure what the sequence of events is that led to naming them, but I know the layout makes more sense, but it's just me, so that maybe they got a new person who made that name. Their themes also basically depend on what their website is like. If I had a digital marketing agency, if I were to buy a theme, I would look at it, but I don't because I think this theme is right.

Here it really isn't, it's not that bad. One thing I want to point out is that in the header you can add an alternative header or an alternative menu. This is the alternative menu you're referring to so you can click on the hamburger icon and you have the sliding menu and you can have your pages listed right here and this slides horizontally so you can scroll and see basically any page you want to have here. I have it disabled, but if you have a like ecommerce store and you want to set it up basically like different categories, then you can set it right here or different products or you could say that, which basically means that someone doesn't have to click on the hamburger to navigate to a different page in global you can change the color basically like these are the links within your content and this is the color of the link when you hover over a link it just doesn't make sense to me because on mobile you can't hover the cursor over something because there is no mouse pointer, but I digress, you can choose whether or not you want to have an I bar.

I have this disabled and infinite scrolling, this is basically like instead of having similar pagination in your blog posts, like you go into your blog archive and say you have 200 blog posts instead of just ten that are displayed on one page and then you have to press the "Next" button to review or, no matter how many are displayed on your blog page file, infinite scroll basically sets it to display three pages. of posts all on one page instead of just ten at a time, so it won't show 200 of them, but it will show 30 if you have it set to ten by default and you can change the icons it's using or will be displayed.

I use font awesome in my likes in Gutenberg and the WordPress editor, so you can also add custom CSS. If you know how to do CSS, you can customize your theme, the appearance of your theme right there. If you want to be able to change the font on your amp pages, you need to obtain a Google Fonts API key. I didn't do this. The font they provide is or is simply used by default. Alright. I think it's set up by Genesis. anyway or just use whatever Genesis is using so the header can choose between three different headers you only get one option as far as the menu and four headers its up to you I like this one in the middle with the call button action. on the right but on my site I use this one because it's the only one that has a hamburger on the right and most people are right handed and hold their phones in their right hand so to navigate and get to the site with one hand it is easier. if the hamburgers on the right side can turn the menu on or off, search, a search icon, she would do it right here, which is this, she can turn it on or off and then the menu is copyrighted when the menu appears, everyone rights reserved. there's a copyright notice, the alternative fallback menu is what I just showed, it's basically a bar that appears down here that has a sticky menu that just stays with the header that you put like your services pages or whatever you want there , you can receive a call.

Now, just enter your phone number and then it will basically automatically call you when someone clicks on it. The no amp link in the header is basically I don't have this on my site, yeah I basically don't. It provides an option for if someone wants to view the page in a no-amp version, the no-amp link will enable it and then you can turn sticky header on or off and there is an advanced header layout. This is optional, you can change the width and height. different margin, you can play with the padding margin if you want, I have it disabled and you can change the background color of your header by default it's white but you can change it to whatever you want and then when you try to set a color make sure that after choosing a color press choose or click choose; otherwise it will just keep going back and forth trying to do it, it won't select the color if you don't press choose so it can change the menu background color.

As you can see, by default it's like black with maybe 90% transparency. I only have one solid system color, but you can set it however you want. I have a set of the same color as my header and then the header elements. It's basically like clicking to call a number like this or your hamburger or the search icon, so if you have a dark menu background you want your header elements to be a light color. I have them set to white and the color of the menu I think is this The text in your menu again I said it is white and you can choose which side of the screen you want your menu to appear on and what part of the screen you want it to occupy when it appears and make sure to save the changes.

This is what it means with that lower percentage, there is still a percentage of screen time available. Very important note about headers and menus. Your amp header doesn't have a menu assigned to it, so you'll like how all the pages are displayed and such. it won't be there so you need to go to appearance and then menus and whatever you're using is your main menu. A new option will appear at the bottom and you can assign it to your amp header otherwise you will have nothing appear here and it will be really frustrating because it was for me because I didn't figure it out at first and no tutorial tells you to do that so that only menus and then appearance or not.

Sorry, appearance and then. menus and this is my main menu and as you can see right here it is already set in amp menu and you can also set it as footer menu, my header is sticky so I don't see any reason to have it in footer as well , but just choose amp or you can create another menu and show it and then just hit save. Once you have the menu set up again in amp settings, you can choose how you want the individual posts to display, so I have the sidebar. disabled but I choose this.

I use the right option because if you use this option it makes the featured image look huge and I just didn't think it looked very good and you can choose for your breadcrumbs, which you should use breadcrumbs, it's important. for SEO and makes your site a little more user-friendly. I haven't set a category for it, you can set the tags, but set it to category and you can have it pull the breadcrumbs from Yoast and these are basically individual items. Do you want similar metadata to be displayed in your post, so I don't care about categories, but I don't want tags?

So this is basically:Do you want the individual categories and tags to be links to that particular category or tag page and? The sticky social icons that I have on and these are essentially these social icons at the bottom, they just stay there so they're sticky and the next above is basically like at the bottom of your post, breeder can press like next post . and it will take you to the next post in its archive and then you can choose to display the author name in the bio post pagination. I have this set to next previous and you can choose to show related posts or not and the different aspects you want are different, like the features you want to show in the related posts section so you can show as an excerpt of your content a link to the version without amplifier.

If you want, you can sort the related posts randomly and choose how many related posts you want. you want it to show up and you can do it in content related posts and I think this basically just inserts yeah basically you can like halfway through your content or after a certain number of paragraphs you can have it show a number of related posts. I have it disabled because If someone is reading one of my blog posts, I don't want them, even if they are still on my website. I wouldn't want them to leave to go to a different blog post and galleries so I have an image I can show. like a carousel that will just make an arrow appear on the sides to scroll left or right or paginate and you can use a carousel with a thumbnail so it has a big image and then at the bottom it will have little thumbnail images of each image in that gallery so they can jump from the first image to the fifth instead of having to keep pressing the button to go to the next or you can display your images as a grid and then have them appear in a lightbox which is basically like when you press the image it appears in a larger size, like basically when you hover over the content you can assign a custom element but you can set a footer and then add widgets to it so you have to do it in the appearance and then the widgets, by simply dragging them to the Amp footer and then customizing them accordingly, you can choose to show a menu in the footer which is this one here and then a link to non-Amp pages, which is see the non-Amp version.

Here and then there is a link to go back to the beginning. I showed you before that it's a little icon that floats to the bottom right of the screen and you can further customize your footer, basically changing the colors the same way you did with the header and individual. pages depending on the type of theme you're using, you can play with these settings, social media, so the social sharing buttons, those are the buttons that I showed you that are stuck at the bottom of the post, for so you can continue reading my posts and wishes. to share it on Facebook because if they just click on that button and it will bring them to light, it will automatically redirect to Facebook's allow sharing feature or whatever, it will allow you to easily share posts on Facebook with a few taps of your thumb and there's many social sites and links in the header menu, you can add the URL to your individual social profiles and then they will appear in your menu like I showed you above and you can choose how you want the date to be displayed in your blog archive Like or blog posts individually.

I will say as published on, but you can change the way it is displayed, like showing how many days ago it was published or just showing the traditional view, you can choose to show subcategories, as I mentioned at the beginning, there are many plugins like page builder support It will cost you 90 dollars which is crazy, there are many extensions you can add, that's it for adding accelerated mobile pages to your website. I'm sorry if this went on a little longer and I had to anticipate it, but it's just It's so fascinating that I couldn't help myself and I wanted to make a video that covers everything, so if you're trying to do this and you're feeling frustrated, lost, confused and annoying, now you have a step by step guide to set it up. accelerated mobile pages on your website thanks for watching I hope you enjoyed the video, if you did please give me a thumbs up and subscribe to the channel.

I'm going to try to make a video a day for 90 days, it's a content challenge. See how I do it, but again thanks for watching and have a great day.