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.

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.

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.

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.

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.

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.

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.

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.