A Guide to Basic Wordpress AMP (Accelerated Mobile Page)

Google recently rolled out mobile-first index. What it implies is that Google will now prefer the mobile version of a website/page and will rank its search even for desktop users based on mobile experience/performance of your website. It is said that nearly 50% of the web users abandon a site that takes 3 second or more to load. There are many ways to increase your site speed which include optimization of images using lesser CSS and Js or combining multiple CSS and Js. Then there are server side techniques like enabling browser caching and compression.

However even doing this doesn’t help as much as switching to the accelerated mobile page (AMP). AMP is an open source initiative to make web working lightning fast by taking advantage of various technical approaches. That is how Google wants the web to work.

If you work on a large website or use a CMS other than WordPress, you will need a developer to implement it as it requires a lot of coding. I have implemented AMP on several large websites that I work with, it’s a tedious process and on top of it you need to have a secure domain i.e. SSL certified site. Before implementing AMP I also had to do the https migration of some sites.

However if you use WordPress, like I do for my personal block, implementing AMP is as easy as pie. All you need to do is download the AMP plugin by Automatic. Yoast offer yet another popular plugin for AMP in WordPress but I had trouble using it especially the Analytics part.

Accelerated Mobile Page (AMP) for WordPress

Do I need to implement AMP for my WordPress site?

There are a few questions you should ask yourself and depending upon their answer you’ll know if you need AMP or not.

1. My site is mobile friendly and attracts good amount of traffic and I have also monetized my site

If yes then you should go for AMP

2. I am a news/blog site with loads of mobile friendly pages and I have monetized my site

Yes, you do need AMP

3. I am a very big publisher but my site is not mobile friendly

You need to get your site mobile friendly first. It’s easy on WordPress as you have a wide variety of responsive themes available in different categories.

So how do you implement AMP for WordPress?

Step 1. Simple, log in to your site, click on add new plugin and search for AMP. You will most probably find AMP plugin by Automatic on top of search results.

Step 2. Click on install and then activate.

It should be working now. You can check so by opening any URL of your site except for the homepage and then appending the URL with /amp/

If it is not so then click on view source (Keyboard shortcut for the same is CTRL+U). There perform a search to look for: amphtml. It should guide you to your AMP URL.

Now comes the validation part to check if it is working correctly or not. You can do so using Chrome Browser Console or the easier way to do it is to visit this link: https://validator.ampproject.org/

Remember you need to paste the AMP version of your URL.

Also Note: Don’t forget to compare your webpage performance before and after implementing AMP using either Google Pagespeed Insights, GTmetrix or Pingdom to get a picture of where your site stand post-AMP.

Now that easy is done, comes the fun part.

Now you gotta play with a little of coding. Hey wait. No need to get scared. As I said earlier, it is as easy as pie.

First and foremost of all, you need access to your website’s FTP.

AMP plugin doesn’t give you option to do any setting or editing through WordPress.

If you don’t have it talk to your developer/server/hosting guy. You need just your server path, username and a password along with port number to make it work. Download free software like Filezilla or AceFTP and install it and configure your site’s FTP.

Now once you have logged into your FTP server, you need to be very cautious for any change can make or break your site. Never use Overwrite command to upload file at the first instance, use Rename command. And for any further changes that day only use overwrite command and not the rename command. Or better still take a backup of the files you would be making changes in.

For our task at hand, we require only three and thankfully they belong to plugin folder so no harm done anyways.

Now here are the things we will do to make the stale AMP version a bit lively. Three basic things that you will need for our WordPress AMP.

1. Google Analytics


2. Social Sharing


3. A Cute Header Menu with Sitelinks

Let’s start with Google Analytics which I believe is the most important tweaking to be made. You don’t want to lose out on Analytics data which will further offer valuable insight into user behavior and your site performance.

Here are the steps to install Google Analytics for WordPress AMP

1. Create a new property by logging into Analytics. I believe you are familiar with it; if not here’s how to do it.


2. 

>> Log into Google Analytics

>> Click on Admin and you will see three heads namely Account, Properties and Views

>> Click on Property dropdown and click on Create New Property

>> Name Your Site e.g. Example AMP and enter your URL, select industry and time zone and click on Get Tracking ID

>> Copy the UA-XXXXXXX-X part which we will need later.

2. Connect your FTP server and then navigate to public_html, then wp-content folder, then plugins folder, then amp folder, then templates and download single.php


3. Open single.php and just after the <head> tag paste:

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

4. Search for </body> and just before it paste:

<amp-analytics type=”googleanalytics” id=”analytics1″>

                                <script type=”application/json”>

                                               

                                                                “vars”:

                                                                                “account”: “UA-XXXXXXXX-X”

                                                                ,

                                                                “triggers”:

                                                                                “trackPageview”:

                                                                                                “on”: “visible”,

                                                                                                “request”: “pageview”

                                                                               

                                                               

                                               

                                </script>

                </amp-analytics>

5. Replace UA-XXXXXXXX-X part with the code that you generated in last part of Step 1


6. Save the file and upload it and lo and behold you have your analytics part done.

To check it open a page of your site and then go to the Reporting tab in your Google Analytics, navigate to Real Time Overview and you should be seeing 1 visitor. It’s the confirmation that your code is working.

Integrating Social Sharing Buttons on WordPress AMP

You want your visitors to share the great content that you are publishing. Right?

Here are the steps to integrate social sharing button for WordPress AMP so that visitors could share your great content.

Step 1. Once again, download your updated single.php or better don’t close it till you are through this post and just before </head> paste this:

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

Step 2.  Then just after </header> paste this:

<div id=”social-sharing-amp”>

    <amp-social-share type=”twitter” layout=”fixed” width=”40″ height=”40″> </amp-social-share>

    <amp-social-share type=”gplus” layout=”fixed” width=”40″ height=”40″></amp-social-share>

    <amp-social-share type=”email” layout=”fixed” width=”40″ height=”40″></amp-social-share>

    <amp-social-share type=”linkedin” layout=”fixed” width=”40″ height=”40″></amp-social-share>

    <amp-social-share type=”facebook” layout=”fixed” width=”40″ height=”40″ data-param-app_id=”1234567890″>   </amp-social-share>

                </div>

Note: Replace app id with your own if you use it or generate one on Facebook.

Step 3. Now search for <footer class=”amp-wp-article-footer”> and just above it paste:

The above code again. Whereas the above code will render at the top of your post, the below code will let the social share button render at the bottom of your post.

Step 4. Now save and upload the file. Refresh any of your post’s amp version and now you will see some cool social buttons through which your visitors could share your great content. Bravo!

Now comes the beautification part of your header which is too bland with just the name of your site. We are now going to add a menu at the top right corner so that visitors get to navigate to our important categories and can also read about me 🙂

Here how it goes.

Step 1: Open updated single.php file and just above or below the social sharing script in the header that you pasted in the header; post the following code:

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

Now save the file, upload it and close it. We are done with single.php

Step 2. Download and open the file named header-bar.php from the templates folder and open it.

Step 3. Just before the </div> which should be above </head> paste this code:

<a on=’tap:sidebar.toggle’ class=”menu-icon”><amp-img src=”http://www.nikhilchandra.in/wp-content/uploads/2016/11/nav-icon.png” width=”44″ height=”34″ class=”img-responsive” alt=””></amp-img></a>

What this code will do is it will add a nice Hamburger Menu image. Replace the http link inside amp-img src with the image of your choice or as a bonus you could use the one I am using by keeping the code intact.

Step 4. Now to render the menu we will have to create a <body> tag and add the links that we want to display in our menu inside it. Just paste the below code after the </header> part at the bottom of the  file:

<amp-sidebar id=’sidebar’ layout=”nodisplay” side=”right”>

             <amp-img class=’amp-close-image’ src=”http://www.nikhilchandra.in/wp-content/uploads/2016/11/close-black.png” width=”20″ height=”20″ alt=”close sidebar” on=”tap:sidebar.close” role=”button” tabindex=”0″></amp-img>

          <ul class=”top-menu”>

                    <li><a href=”http://www.yourdomain.in/”>Home</a></li>

            <li><a href=”http://www.yourdomain.in/category/how-to-guides/”>How to Guides</a></li>

            <li><a href=”http://www.yourdomain.in/category/i-love-my-city-2/”>I Love My City</a></li>

            <li><a href=”http://www.yourdomain.in/category/seo/”>SEO</a></li>

            <li><a href=”http://www.yourdomain.in/category/travel-guide/”>Travel Guides</a></li>

            <li><a href=”http://www.yourdomain.in/category/musings/”>Musings</a></li>

            <li><a href=”http://www.yourdomain.in/category/about-me/”>About</a></li>

             </ul>

    <button class=”-amp-screen-reader” tabindex=”-1″>Close the sidebar</button></amp-sidebar>

Now replace the hyperlinks and names with the hyperlinks that you want to target and you are almost done.

Did you notice that I have used class and id in the code?

Well don’t worry, it’s just some basic CSS.

Just save your header-bar file, upload it and close it.

Now we will do some styling using cascading style sheet. That’s CSS for you.

Step 4. Download style.php and open it and scroll to the bottom. At the very bottom, paste this code:

/* AMP Sidebar */

ul.top-menufont-size:16px;padding:20px 0 0 15px;ul.top-menu lifont-size:16px;color:#333;text-decoration:none;font-size:18px;padding:8px 0 8px 0px;margin:0px; list-style:none;border-bottom:#CCC solid 1px;ul.top-menu li acolor:#333;text-decoration:none;ul.top-menu li a:hovertext-decoration:underline;.amp-close-imagetop:15px;left:225px;cursor:pointer;amp-sidebarwidth:250px;padding-right:10px;.menu-iconfloat:right;cursor:pointer;

Step 5. Save the file, upload it and you are done.

How to show Google AdSense ads in Amp for WordPress

Step 1. Open single.php file and in just before </head> tag paste:

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

Note that amp-ad may still work without this script, but AMP PROJECT highly recommend it for future compatibility

https://www.ampproject.org/docs/reference/components/amp-ad

Step 2: Find <div class=”amp-wp-content”> line. And below the line  paste the the code below

<amp-ad width=350 height=100

type=”adsense”

data-ad-client=”ca-pub-95675557XXXXXXXX”

data-ad-slot=”170XXXXXXX”>

</amp-ad>

Step 3: For ad to be displayed below the post search for do_action( ‘amp_post_template_footer’, $this ); and paste the adsense code before the php starting tag which we used in the previous step.

Save the file, upload and you are done.

 

A Guide to Basic Wordpress AMP (Accelerated Mobile Page)