Tarun Gupta

Accelerated Mobile Pages Setup Guide For Blogs

Tarun Gupta January 2nd, 2017 Web Development 1 comment.

Accelerated Mobile Pages

When more of your audience uses their mobile device for searching stuff, you can’t afford to have a website that takes centuries to load. People are impatient. They abandon slowly loading websites midway. If you want to sustain the cut throat competition online, your site speed should be at par to your competitors. There are hundred ways to speed up your website, but in this post I would discuss AMP (Accelerated Mobile Pages) technology. AMP is the newest technology that will surely boost your mobile page speed.


Google’s AMP renders lightweight versions of existing mobile pages hosted on Google’s server. This results in visible boost to the loading speed of your mobile version of website. When AMP is implemented for your mobile website, its content pages start loading incredibly fast.


Google AMP Project is an open source initiative started and supported by tech conglomerates Google and Twitter. The project is meant to make web content load faster for mobile users.


In this post, I will discuss AMP in detail and will explain how you can setup it for your blog / news website.


What Is Accelerated Mobile Pages?

A few months back, Facebook launched its ‘Instant Articles’ project that was intended to serve mobile user fast loading content pages while browsing.


1-google-amp-example

AMP renders minimalistic version (Screenshot above) of mobile pages using limited set of HTML, JavaScript, and CSS in place. This prevents loading of certain widgets and features to your mobile AMP website.


The idea was to cut down page elements and render minimalistic version of a website for users. Google’s AMP is quite identical to that project.


Websites with AMP are labeled with an AMP tag in the mobile search results, and on occasions, AMP enabled pages get an opportunity to pop up in a featured carousel.


Impact of AMP on search rankings is still under debate, but its effect on site speed and user experience is unarguably visible.Being a Google initiative, AMP support is limited to Google Analytics only.

  How To Plan An E-Commerce Website

Setting up Accelerated Mobile Pages in WordPress:

When begin with setting up AMP, you need to install and activate the official AMP plugin first. When the plugin is activated, you can navigate through Appearance> AMP page to see how your site’s AMP pages will look like.


main

From plugin’s Setting menu, you can change the header background and text color on this page. Notably, the color you choose for header background will automatically be assigned as the default color for the links on the page.


The plugin will keep your website’s logo and icons as default for the AMP pages, if your current theme supports it. Now click ‘Save’ button to store the changes made.


To check if AMP is functional on your website, visit any of your post and add /amp/ at the end of the post URL. It will show something like this: http://example.com/2016/10/my-blog-post/amp/


Entering this URL will show a trimmed AMP version of the same post.

Want to launch your own WordPress Website with in-built AMP support, our WordPress Web Development will help you out.

2

When you visit the source code of the original post, you can find the following code in the HTML:


link rel="amphtml" href="http://example.com/2016/10/my-blog-post/amp/"


This line of code tells AMP consuming apps and search engines where to find the AMP version of that page.

Troubleshoot 404 Error:

This is very common to see a 404 page when trying to view the AMP version. If this is the case with you, here is what to do.


Visit to the Settings menu and navigate to Permalinks page in your WordPress admin. Now click on the ‘Save Changes’ button.

  How To Secure Your WordPress Site

You needn’t to make any change in your permalink structure. Just press the Save button to refresh it.

Handling AMP in Google Search Console:

Once implemented and done, you may want to know how AMP is doing in Google search. You can check it out through Google Search Console.


Log in to your Search Console Account with valid credentials.

Now visit to dashboard and then click on Search Appearance -> Accelerated Mobile Pages


3

Google may take some time to index your Accelerated Mobile Pages and then display data in Search Console. Therefore, don’t panic if your AMP results are not reflecting right away.

Customizing Your Accelerated Mobile Pages:

The official AMP plugin offers very few customization options. Therefore, you can utilize some other WordPress plugins for further and deeper customization.


Glue for Yoast SEO & AMP Plugin is one such plugin that serves you with better AMP customization options. This is an add-on plugin if you are already using Yoast SEO.


Once activated, you need to visit SEO -> AMP page to configure plugin settings further.

6

Using the plugin, you can enable AMP for other post types as well.


On the ‘Design’ tab, you can customize colors and design options. You can also upload a logo and a default header image from here if your post doesn’t have a default featured image.

7

Likely, you can use Analytics tab to add your Google Analytics ID to AMP.

Once done with the changes, click on Save button to store them permanently.


  • pranita deshpande

    Please explain how can make good revenue from amazon affiliate?

Latest Web Development Articles