Implement Accelerated Mobile Pages (AMP) and Optimize the Website to Next Level

The majority of the people now uses the smartphone for their any query and the traffic observed on sites are mostly from mobile users. So, for the best user experience, Google (NASDAQ:GOOGL) has introduced Accelerated Mobile Pages Project to Google Search Console. The number of webmasters have already integrated AMP project to their websites to optimize smartphones and tablets loading speed and have taken the mobile user experience to the next level.

Accelerated Mobile Pages
Accelerated Mobile Pages

What is Accelerated Mobile Pages (AMP)?

Accelerated Mobile Page is the co-initiative from Google and Twitter (NYSE:TWTR) to make mobile pages faster. Accelerated Mobile Pages are very neat and contains basic code on the HTML page. In general, you can say that AMP is the light-weight page that contains only the main content designed with the help of certain HTML tags, CSS and basic scripts. The purpose of AMP is to get rid of slow loading pages and provide the fast user reading experience. Google hosts AMP and caches all pages on their servers so that user doesn’t need to fetch the content.

Why You Should Integrate Accelerated Mobile Pages (AMP)?

AMP works only in the smartphones and designed for the only blog post but adapting AMP to the sites can increase the ranking of our pages in Google Search. As demo clearly shows that it appears on the top and loads super fast. However, AMP has not been completely rolled out by Google yet, but they have created a demo Google Search (http://g.co/ampdemo) (Remember, this is only for smartphones. So, open it from your mobile.) from where you can understand how it looks. Below image is the demonstration of how it will appear. You can also check AMP Version of this page.

Accelerated Mobile Pages Demo
Accelerated Mobile Pages Demo

How to Integrate your site with Accelerated Mobile Pages (AMP)?

To set up AMP pages for your website on WordPress platform you have to install AMP plugin. For this go to WordPress plugin for adding AMP and download the zip file.

Download AMP Plugin
Download AMP Plugin

Just upload the downloaded plugin in the same manner to upload plugin. When your plugin is activated, your basic AMP Version of the site is created. You can check out your AMP page by adding “/amp/” after your URL. In case you are using not smart permalinks, you can also append to “?amp”. Later, you can also customize your AMP pages of your choice but keep in mind that AMP pages only works with limited tags.

 Google Webmaster AMP
Google Webmaster AMP

Once the AMP pages have been created, Google Webmaster will start showing indexed and error pages in Accelerated Mobile Pages in Search Appearances within 4 days. You can also validate your URL to check for errors, for this hit Ctrl + Shift + I and click on Console. After that add #development=1 after the AMP URL. In case of any errors, Console will notify you. If “AMP validation successful” appears without any red tag, it means your site is ready to go with AMP. We recommend before editing AMP pages either with HTML or CSS or JavaScript you must run AMP validation to look for errors.

AMP Validation
AMP Validation

How to add Logo and Favicon in Accelerated Mobile Pages (AMP)?

To add the logo in your AMP page, Go to Plugins >> Editor and Select AMP plugin. Now open “style.php” file and replace,

nav.amp-wp-title-bar a {
color: #fff;
text-decoration: none;
}

with,

nav.amp-wp-title-bar a {
background-image: url( "https://www.mustips.com/wp-content/uploads/2016/04/22131342CVLNfO1G.png" );
background-repeat: no-repeat;
background-size: inherit;
display: inherit;
height: 50px;
width: 160px;
margin: 0 auto;
text-indent: -9999px;
}

To add favicon image to your AMP site, Open “single.php” file and add this code. Make sure to change your image URL.

<link rel="icon" type="image/png" href="https://www.mustips.com/wp-content/uploads/2015/02/efHzoyzEwe0C.png">

How to add Google Analytics in Accelerated Mobile Pages (AMP)?

To track the visitors on AMP pages it is necessary to add Google Analytics code. Google Analytics code is specially modified to integrate with AMP pages. Normal Google Analytics code will return with errors in Google Developer Tool. To add Google Analytics code, open “single.php” file and locate below code. If this code exist omit this step otherwise, add it before </head>.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Now in the same file before </body> add Google Analytics Code.

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXXX-X"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>

You just need to replace highlighted account id with your Google Analytics account id.

How to add Google Adsense in Accelerated Mobile Pages (AMP)?

Like Google Analytics, Google Adsense codes are specially designed for AMP pages. With the help of below code you can add Google Adsense on AMP wherever you want.

<amp-ad width=300 height=200
type="adsense"
data-ad-client="ca-pub-XXXXXXXXXXXX"
data-ad-slot="XXXXX">
</amp-ad>

You need to add this mandatory script too. You can place it in above </head> of AMP plugin.

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Currently supported Advertisement Platforms with AMP are;

  • A9
  • Adform
  • AdReactor
  • AdSense
  • AdTech
  • Dot and Media
  • Doubleclick
  • Flite
  • plista
  • Smart AdServer
  • Yieldmo
  • Revcontent

You can refer to AMP ads to set up with other advertisement platforms.

How to resolve Google Structured Data Testing Tool in Accelerated Mobile Pages (AMP)?

While validating and checking the AMP pages with Google Structured Data Testing Tool error occurred and logo was missing.

Structured Data Tool Error
Structured Data Tool Error

To resolve Structured Data Testing Tool Error go back to Plugins >> Editor >> Select AMP. Click and edit “class-amp-post-template.php” and replace,

if ( $site_icon_url ) {
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => $site_icon_url,
'height' => self::SITE_ICON_SIZE,
'width' => self::SITE_ICON_SIZE,
);
}

with

$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => 'https://www.mustips.com/wp-content/uploads/2016/02/mus-logo.png',
'height' => 48,
'width' => 127,
);

You can alter the width and height of the image. But make sure the height must not exceed 60px. Validate again with Structured Data Testing Tool and the problem is resolved.

Structured Data Tool Error Resolved
Structured Data Tool Error Resolved

Conclusion

Now you have successfully created Accelerated Mobile Pages for your site. Now its the time to make you page discoverable. Add this final code in your templates “single.php” file. Note that this file doesn’t belong to AMP. This file is related to your site template. You can find this file in Appearance >> Editor and Search “single.php”, select and edit it and paste the code on the top of the php code.

<link rel="amphtml" href="/amp/"/>

The href URL depends upon your permalink. It depends on you either to append “/amp/” or “?amp”.

Follow these simple easy steps and still if you have any confusion I will be responding to your queries.

Usman
Usmanhttp://www.muhammadusmansiddiqui.com/
Muhammad Usman Siddiqui is a young entrepreneur from Pakistan. His studies (Petroleum Engineering) has no relation to innovation and future technologies but the passion keeps him in this field.

5 COMMENTS

  1. Thank you Usman. Do you have also some tips to insert the new adsense “page level ads” tha don’t have a slot number in AMP?

LEAVE A REPLY

Please enter your comment!
Please enter your name here