How to configure Accelerated mobile pages(AMP)

Since the inception of Smartphones, they have become an integral part of our life. We do most of our web browsing, social media and all activities mostly on our smartphones now a days as its a handy device compared to a Laptop or a computer. So what Accelerated mobile pages (AMP) has to do with it.

When we search for any thing in web we always see mobile version of all the websites. As we know the screen dimension of a smartphone is less compared to laptops and computers so the webpages that are loaded in mobile browsers should be optimised for the same.

Also check Google pixel 5 review

Search engines always prefer pages or websites that load faster in all the environments that they are used. Most common envirointment that we use are

  1. PC or Computer
  2. Laptops
  3. Tablets
  4. Smartphones
  5. Smart TV’s

So a webpage should be responsive enough to load on these environments or adapt to the changes needed for it to load fast in the above mentioned gadgets. These gadgets have different screen resolutions and screen sizes by which content of a page is displayed differently.

Search engines when crawl your website will check the page load times in each envirointments so that they can confirm if the page is optimised . Faster load times are prefered over a slow loading page and they are more easily crawled and indexed.

But you may think here that you have put lot of effects and animation in your website but AMP will remove and show only the basics.

Yes thats true because to reduce the load times you need to reduce the animations and effects and the size of images used in your website.

When we hear about Accelerated mobile pages some things come to our mind.

What is AMP?

AMP as the name suggest are Accelerated mobile pages which help to boost the load times of your pages when they are accessed through your mobile. This is done by reducing the images and its size also removing unwanted animations and only the essentials in the page are shown. This will help to reduce the amount of download needed by the browser to show a page content.

How do AMP pages work?

AMP is an addition to your website that could reduce the load times by lowering the amount of content loaded while a user access your website. Only the important factors are listed in an Accelerated mobile page compare to a normal page.

Also check android tv apps

Most of us be using wordpress to create a website or your blog. You can install an AMP plugin that is available in the plugins section. I have explained things in detail about configuring or doing AMP setup in your website.

Is AMP only for mobile?

AMP is not only for mobiles but also will work in web version as well. There are no sparate options for web and mobile AMP.

Is AMP good for SEO?

SEO( Search engine optimization) is one of the major factor to rank your pages in search. There is a lot of competition and even though your content is good and you have optimised your website for SEO, still it may not rank because of the slower loading times. For a website to rank we need faster loading times and an AMP page will definitely load faster compared to a non AMP page. So here its clear that AMP is good for SEO.

Now after reading till now the main question in your mind will be

How do I make Accelerated Mobile Pages?

So here we need to set it up in our wordpress using a plugin. Lets check out how to do the setup in detail.

Things you need

  1. WordPress website
  2. AMP plugin installed

As simple as that.

Steps:

  • Login to your wordpress website editor section
Accelerated mobile pages
  • Go to Plugin’s page and click on Add New
add new plugin
  • Click on Add new and you will be taken to the plugin search page.
search
  • Enter AMP in the search box and press enter in keyboard.
how to setup Accelerated mobile pages

Here you will find two plugin in same name. I would suggest the one with the Red icon which has worked in a better way.

Click on the “Instal”l button and after installing you will see “Activate” button.

AMP setup

Click on the Activate button and activate the plugin.

Now at this point the Installation of the plugin is over. Now comes the setup. There are lot of steps that you need to do to configure your AMP plugin to setup AMP in your website.

I case you need to download AMP plugin you can use this link

How to configure Accelerated mobile pages plugin?

As we have installed the AMP plugin now lets start configuring it.

If you have installed AMP plugin then you will see a button at the sidebar in your wordpress dashboard. Click on the that button to configure the plugin.

Accelerated mobile pages sidebar

Lets start configuring.

In the home page of AMP plugin you will see some sidebar options and the main page we will have some options.

  1. Setup:

This is the first step to start setting up AMP plugin. Here you will see options that you need to begin with.

  • Website Type:
    • Blog
    • News
    • Local Business
    • Ecommerce
    • Others

So as per your website details you need to select the option accordingly.

I have selected Blog here as my website is a blog.

site type

2. Where do you need AMP?

Here you will be having options to select based on which pages you need AMP for. So as per your need select the checkboxes.

AMP

3. Design and presentation is not a needed thing. Use this only if you want to have a specific design for your AMP page.

4. Analytics tracking:

In case you are tracing your website performance in google analytics, you can select the google analytics ID here and use it. There are other options in this page

analytics

4. Next comes the Advertisement section where you can edit content based on ads that you show and how to use AMP if your website shows ads. In case if your website does not have any ads. Please ignore this setting.

ads
Short Note: After each setting change make sure you have clicked on “Save Changes” button.

5. 3rd Party Compatibility

This you need to setup if you are using any SEO plugin like Yoast SEO. You can select the plug in name from the list shown in right side.

3rd party compatibility

Now thats done your setup part is complete.We can move onto the other options in AMP plugin

  1. General: Next option is General which it shows the AMP support option where you can select the content that you need to select AMP for. Select the options according as your need.
best Accelerated mobile pages setup

Next is advertisement which we have seen already that you can setup based on the ads you show on your site.

2. SEO

This is one of the important options that you need to configure for better search results. Doing SEO right should be the first step to rank.

Here you need to select your SEO plugin that we had already selected in setup “Yoast” or any options that you use can be selected here.

Other than that you need to turn on the Meta tags from yoast option and also at the last of the page you will see an option like URL Inspection Tool Compatibility. This option will help search engines to index your page faster.

Click on Save changes after turning On these options.

3. Builder support

You may be using some page builders to setup your page design so here you will have the option to turn on the support for the same. In this page you will see the option AMPforWP PageBuilder. Turn this ON and click Save changes.

Leave other options untouched

4. PWA(Progressive web apps)

This is a feature which will help to load the AMP page design better in mobile as we know the mobile page design gets toned down in AMP. This is not recommended as it will reduce the use of AMP as the page load time may increase.

5. Performance:

This is one of the major part in configuring AMP. You should do it well for your site to load faster in Mobile as well as in web.

Here you can see options like Minifi, Leverage browser caching, Optimise CSS.

Minify: This makes your content minimal and it will help in loading times.

Leverage browser caching: This helps to preload the content of your website so that the pages will load faster.

Optimise CSS: This helps to maintain the design as much as posibled in the lower version of your webpage.

I would suggest you turn on the Minify option and leave others as it is which will help.

performance

6. Analytics:

We had setup this option in the initial steps by providing the google analytics ID. So we don’t have much to do here.

Give the analytics ID here and turn on the IP Anonymization ON.

google analytics for Accelerated mobile pages

7. Structured Data:

This is the option to setup how your data should be visible in AMP page. Here you need to setup Post and Pages option to Blog Posting and webpage respectively. Leave other things as it is and click “Save changes”.

data

8. Notice and GDPR: Leave this option as it is as it does not have much effect on AMP.

9. Push Notification also does not contribute much to AMP performance so that you can leave it as it is.

10. Contact form:

In case you have contact form 7 setup in your website you should use this option else you can leave it as it is.

11. Comments:

These are another important aspects of your posts as they have some impact on SEO. So you can chose here if you want to show comments in your AMP pages as well. Set it up like this and you are good to go.

comments

12. Instant article

This is a facebook feature if you have set it up in facebook then you can enable it and link it with facebook else leave it as it is.

13. Tools

In Tools you will have some options. By default the Show Query Monitor data in AMP is turned ON and others are set off. Leave it like that and lets check the next option.

14. Advanced settings

Here you need to make some important changes to make your AMP work well.

  • Turn On the mobile redirection so that all your links when accessed in mobile goes to Accelerated mobile pages version of that page.
  • Turn the Tablet switch off because this will some time cause the web page to switch to mobile version in laptops as well.
  • Search result page in AMP. This will make AMP pages to appear in search results. Turn it ON.
  • Change internal links to AMP: This will help the internal links inside a post or a page when accessed in mobile redirect to AMP version of that page.
  • Keep Hide AMP version OFF.
  • Category description OFF.
  • Smooth scrolling of links will help for the page to scroll fast in AMP mode.
  • Leave other options unchanged.
advanced settings

14. Ecommerce option can be setup in case you are making an Ecommerce website else leave this option as it is.

15. Same with transition panel.Keep it unchanged as there is no need to change anything here.

16. Design: Based on the requirements there are many themes available here which you are change. It will determine how your page will look in AMP mode. There are 4 free themes to choose from and other are paid. Modify this as per your needs and click Save.

themes for Accelerated mobile pages

17. Plugins

Basically these are more customisation that you can do. You need to install some plugins if you need more changes in AMP. But these all are paid plugins. In case you are interested you can use it.

Now hit save changes and your AMP pages are setup.

There are few more things you need to do. You want to setup the AMP page footer section where you will Know the items you want to display.

For this you need to go to your menu options in wordpress and add a manu for AMP pages to show.

Go to the widgets page of your theme and add the menu options there.

Accelerated mobile pages menu setup

Now your AMP page is completely setup. Now you can check it by accessing your website URL in a mobile browser. You should see the AMP version of the page instead of the full version.

Conclusion on Accelerated mobile pages (AMP) :

Accelerated Mobile pages are really good to speed up your page loading times and they load faster in mobiles due to less page content size. Search engines prefer this type of pages as they can be Indexed easier. Follow the above steps in the same way so that you can setup AMP easily.

Also Check

I am a software engineer crazy about technology and gadget. I like knowing about the latest technologies and the way they work. I created this website to share my knowledge on latest tech and products so that it would help you guys find out what is the best for you and decide for your purchase. We have included products from Amazon and Flipkart in here for you to select.

We will be happy to hear your thoughts

      Leave a reply