How To Add Google AMP To A Website

by | Dec 10, 2017 | Blog, How To

What is AMP and how does it works?

First to make it clear the AMP Project is not a Google project but it has been accepted and pushed by Google trying to make it standard throughout the web by favorising the websites that implement AMP for searches from mobile devices. AMP stands for Accelerated Mobile Pages and it is a open source project with a goal to make web pages load instantly on mobile.

The web loads slow for many people. In many areas of the world fast internet is considered a luxury. And most of the traffic on the internet comes from mobile devices. To make the web pages on mobile load instantly and consume very little data AMP restricts what you can and cannot do when it comes to the development of the pages. No more fancy design features to slow down the loading but users still get most of the functionality. Even though Accelerated Mobile Pages are very stripped down to the core regular web pages they still contain all the important content.

What do you need to implement AMP on your WordPress website?

The implementation of AMP in WordPress is very simple. Only installing a couple of plugins transform your blog posts and pages to Accelerated Mobile Pages and once Google indexes your new pages that implement AMP, your website will get the AMP symbol when searched from a mobile device and will get ahead of your competitors that rank for the same keyword but haven’t implemented AMP on their website or blog.

 

The plugins you will need to implement AMP on your WordPress website:

  • AMP by Automattic
  • AMP Author Box by Nick van de Veerdonk
  • AMP footer widgets by Nick van de Veerdonk
  • AMP HTML Sitemap by Nick van de Veerdonk
  • AMP Related Posts by Nick van de Veerdonk
  • AMP Social Share by Nick van de Veerdonk
  • Glue for Yoast SEO & AMP By Joost de Valk
  • Yoast SEO, if you don’t already have it

What do I need to configure to make it work?

  1. For the AMP by Automattic plugin you don’t really have to do much to make it work. It converts every post to a accelerated mobile page. The only thing you need to do is to configure the design of the pages created by the AMP plugin. You can do that by accessing the options inside the wordpress dashboard. Follow this path Appearance > AMP. There you can change the design by changing couple of options. You have a choice to change the theme to light and dark, to edit header background color and link color as well as the color of the text in the header.
  2. Next would be configuration of the AMP Related Posts by Nick van de Veerdonk plugin. You can access the option from the wordpress dashboard by clicking on AMP Related Posts button in the menu inside the dashboard. There you will see couple of options for you to set. The most important thing there is to check the box with description “This will implement the related posts without the use of shortcode”. After that all the options should be set by preference.
  3. The next plugin that is important to mention is the AMP footer widgets plugin and its configuration. This plugin will give you a unique AMP footer which you can fully set from this plugin’s options located in the left menu inside the wordpress dashboard. First is the checkbox that activates all settings that the plugin provides. Changing these settings will actively change the footer on your accelerated mobile pages. The rest of the settings are self explanatory. There is credits settings and author settings for to customize your footer.
  4. The AMP Author Box and AMP Social share have very simple obvious options to set after you have enabled them from the options that are accessible by clicking on their names in the wordpress dashboard menu.

How can I see what your AMP looks like?

You can either use your browser and visit a post and add /amp at the end of the link you can find in the address bar that leads to your blog post (Example: http://example.com/your-post-link/amp), or you can use a extension for your browser (Example: AMP Validator extension for Chrome). You can also check the look of one page in your wordpress dashboard by clicking Appearance > AMP as we know from earlier the place where you make design changes of your accelerated mobile pages.

 

When will I see the AMP symbol in Google search results?

Well this is hard one to answer. Google uses a “crawler” to go and index pages throughout the world wide web. Now this is how Google discovers the pages and haven’t been indexed or have new changes. By multiple factors the algorithm used by Google then ranks these pages in their search results for certain keywords. Now the best way is to give Google some time to index these pages, if these are pages that other websites link to, the indexing will go a lot faster since the crawler will crawl the pages a lot sooner. Once they have been indexed you will be able to see the AMP logo on google search results when you search for your posts. Now your pages load instantly on mobile devices that visit them through Google search. Well done.

 

What will I need to do to setup Google Analytics tracking for AMP?

This is the final thing you can do after you set up your AMP of your website. First thing you need to know is that the Google Analytics code you use for your regular pages won’t work for Accelerated Mobile Pages. You will need to first create new property and get the tracking id from that property.

 

Admin’ > ‘Property’ > ‘Property Settings’.


It will look something like:
UA-11111111-7

After you get the tracking id you are ready to edit the tracking code to enable AMP tracking.
In the Glue for Yoast SEO & AMP By Joost de Valk you can add the custom code by visiting the settings of the plugin and clicking on the analytics tab where this code needs to be added.

<amp-analytics type=”googleanalytics”>

<script type=”application/json”>

{

“vars”: {

“account”: “UA-XXXXX-Y” – Replace this with your tracking code

},

“triggers”: {

“trackPageview”: {

“on”: “visible”,

“request”: “pageview”

 }

}

}

</script>

</amp-analytics>

 

After this you are all set to track visitors on your Accelerated Mobile Pages. Just give it 24 hours for Google Analytics to gather all the data for the day.

Next
The explosive adoption of mobile phones, online shopping, and social…