How I Used Google AMP For My Small Business Mobile Website

My AMP Page

If you'd like to skip the article and see what an AMP page looks like click here, www.cleanpaw.com/home.htm. That AMP page was built with content from my home page and was meant to replicate it. For the sake of comparison you can see the original, non-AMP page here, www.cleanpaw.com/index.htm. AMP is designed for mobile phones. If you are on a desktop or other wide screen device you may want to narrow your browser down to 800 pixels or less to see a more accurate comparison of both pages. A speed comparison and a quick summary are at the bottom of this page.

Background Story

Since 2005 I’ve been the owner of Clean Paw, a pet waste removal company in Phoenix, Arizona. Before that I was a web developer. Back when I worked online I began to wonder if a simple website would be able to deliver enough sales to support a small business. The type of business didn’t matter but I had little money and needed an idea that required almost no startup investment. After a few months I decided to launch a pooper scooper service. I built the website and did some other advertising and before long I had over a dozen customers. I worked at Clean Paw on the weekends and in approximately three months I quit my job as a web developer. Today I have two employees that do most of the work and a large route of customers across the valley.

Search Rank Was Key

It was essential that my website looked professional but over time I realized that it was even more important for it to rank well on the first page of search results. Month after month search engines delivered most of my customers. It wasn’t that other marketing strategies were ineffective but search engines were the strongest producers. Over ten years have passed since I started and that is still true. The math is simple. The higher I rank on the first page the more times my phone will ring. Investment in my website continues to be worth it.

AMP Enters The Scene

If you don't know what AMP is you can learn the basics at the official website, AMP Project and the AMP YouTube channel. At its simplest AMP can be thought of as three separate tools that work together to create fast mobile websites.

1) AMP is web code included in an HTML document.
2) AMP is a collection of programming requirements that are validated by Google.
3) AMP is a CDN or content delivery network. If you’d like to learn more about this kind of technology please read Content delivery network on Wikipedia.

On a practical level AMP is also potentially higher search placement on mobile devices. Over the past year AMP powered news articles have ranked highly on Google mobile search. On my phone they swamp traditionally delivered news stories. Below is a screenshot of the Google AMP news carousel featuring the results for the term 'dog news'. The lightning bolt ⚡ below each headline signifies AMP content.

Although AMP news content is currently dominant on Google mobile search it remains to be seen if this will become true for other types of content like small business websites. Fortunately this technology is easy to implement for someone that knows HTML and CSS. In my opinion the speed increase on mobile makes it worth the effort. Please keep in mind that AMP enabled sites work on many different devices including desktops and tablets but as of now Google search only serves up AMP pages on mobile phones.

What My AMP Page Needed

Although AMP news stories rank well my site doesn’t offer news or have blog posts. cleanpaw.com is a billboard for my company and it rarely changes. My primary concern was building the fastest site possible and potentially getting some benefit in search results. A single AMP page that loaded fast, included my company branding and replicated the information from my home page would get the job done. If AMP continued to grow in importance I could always add more later.

Getting started with AMP

AMP enabled documents are standard HTML files that follow specific rules and include the AMP boilerplate code and tags. AMP code is checked and validated by Google. In this section I'll go over the code I used to build my company's site.

All AMP pages start with the standard boilerplate code shown below. The source of this code can be found here, Create your AMP HTML page.

Default AMP boilerplate code.

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Page Title Goes Here</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
<meta id="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg":
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<!-- website layout goes here -->
</body>
</html>

Include all of the boilerplate code with the possible exception of the portion that relates to Schema. If you aren't using Schema on your AMP page you won't need to include the lines that reference it. I used Schema on the contact page of my traditional, non-AMP site. However it only needs to be used once per site so in my case I didn't include Schema on my AMP page.

Don't include this if you aren't using Schema on your AMP page.

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg":
]
}
</script>

Set Up Your Pointers

The first piece of code you'll need to customize is the URL on line seven of the standard boilerplate code. This URL references the original HTML page that your new AMP page was derived from. It informs search engines that duplicate content exists and where to find it. My AMP page contained all of the content from my original, default home page so I used this line to point at it. In the example below the AMP page will be named amp.htm and the original page will be named original.htm.

Default code

Example: this line located in amp.htm points at original.htm

This line must be included even if your AMP page is stand-alone and there isn't a non-AMP page to point at. In that circumstance the URL references itself.

Example: this line located in amp.htm references itself.

The next piece of code goes inside the <head> section of the original HTML document that your AMP page was derived from. This line tells search engines that an AMP version of a page exists and where to find it. On my site I included this in the original, default home page and pointed it at the AMP version. If your AMP page is unique and not built from a non-AMP page you won't need this line and can skip it.

Default code

Example: this line located in original.htm points back at amp.htm

Turn On Google Analytics

Like many small business owners I use Google Analytics to measure traffic. If your site uses Analytics include this library call in the <head> of your document. Place it above the default AMP library script. For more details please visit Adding Analytics to your AMP pages.

Default AMP Analytics code

Example: Place the analytics script above the required boilerplate AMP script.

You'll also need to include the following code inside the <body> of your page. Change the red, hilighted text to your website's Analytics Tracking ID. Your unique ID can be found in the admin section of your Analytics control panel. You can also find this ID in the original, tracking code snippet located in your non-AMP site. On my page I placed these lines of code at the very top of the body.

Default code

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

Google provides many ways to track how users interact with your website. For additional information please read Supported user interactions for Google Analytics. The generic implementation shown above provided all the data I needed for my company.

AMP Restrictions

Before you begin coding your page you need to know a few rules. The first important restriction on AMP pages is that they cannot use external CSS files. All CSS must be included in the <head> of the document inside of an <style amp-custom> </style> section.

The second restriction involves limitations on some CSS properties plus the html <form> and other tags. For example !important is disallowed and transition is limited. To see the complete list visit AMP: Supported CSS. The HTML <form> tag is replaced by <amp-form>. For additional information and examples please visit AMP by Example: amp-form.

The third important restriction is that AMP pages cannot include custom Javascript. To overcome this limitation AMP offers special tags that provide the features that were traditionally delivered by Javascript. For example,

<amp-sidebar> provides clickable sidebar navigation.
amp-sidebar example and code.
<amp-image-lightbox> creates an interactive photo lightbox.
amp-lightbox example and code.
<amp-social-share> allows the placement of social share buttons on your page.
amp-social-share example and code.

If your site needs extra functionality please visit AMP By Example: Components to see a list of AMP tags that may be helpful. Like many small business sites mine was a simple billboard. The only Javascript I used on my original site was for dropdown navigation. My single AMP page didn't require any special functionality beyond what HTML and CSS provided.

The New Tags I Used

Before I started working with AMP I imagined that I was about to learn a new programming language that replaced HTML. I was wrong. AMP pages hardly differ from traditional HTML documents. The page I built used two new tags for layout. <amp-img></amp-img> replaced <img> and <style amp-custom> replaced <style>.

1) All <amp-img>tags must be closed with an </amp-img> tag.
2) You must include width and height in every <amp-img> tag.
3) Although all images must have a width and height you can make an image responsive by including layout="responsive".

Example: amp-img tag I used in the header of my website.

<amp-img src="images/amp-row-3.jpg" width="800" height="280" alt="Clean Paw dog and sign" layout="responsive"></amp-img>

If you'd like to read more about <amp-img> and see examples please visit AMP by Example: amp-img.

Besides the use of those two tags everything else was laid out with standard HTML and CSS. If you know how to build a traditional website you can easily build a site that is AMP enabled. Starting from scratch and knowing nothing it took me two days to rebuild my home page using AMP standards. If you don't know how to build a website a great place to start is w3schools.

Validate Your AMP Page

Once your page is built you'll need to check and debug your AMP code. Open your document in Chrome and add #development=1 to the end of the URL. For example, www.yoursite.com/amp.htm#development=1. Click F12 to open DevTools and select the Console tab. All AMP validation errors will be listed with a description of each error. For more detailed instructions please visit AMP: Validate AMP pages.

Google will validate your AMP page before it lists it as AMP ready in mobile search results. Make sure any errors have been fixed before you notify Google about your new page.

Notify Google That Your AMP Page Exists

I used two methods to let Google know that I created a new AMP document.

The first thing I did was add the new AMP page to my sitemap.xml file. After it was saved and uploaded to the server I logged into Google Webmaster Tools and refreshed my sitemap with the ADD/TEST SITEMAP button.

The second thing I did was visit the Google AMP Test site. I ran the test and in the results section I clicked the SUBMIT TO GOOGLE button seen in the screenshot below.

It took Google a little over 48 hours to crawl my page and list it as AMP ready in mobile search results.

Your AMP Page Will Be Delivered By A Content Delivery Network

After Google crawls your page it will transfer a copy to its content delivery network. The AMP page you uploaded still sits on your server and operates normally. However in Google search results when people click your AMP enabled page they will be served the version from the CDN. You can see this by looking at the address bar. For example my AMP page sits at www.google.com/amp/s/www.cleanpaw.com/home.htm.

The copy of your AMP page that is served through the CDN has a grey bar at the top. The X on the left shuts the page and the link icon on the right connects users to your main website.

In addition to the link icon on the right I added two additional links that connect to my non-AMP site. Over the years I've learned that people instinctively click the Clean Paw logo to return to the front page. I linked the logos in my header and footer to my non-AMP company home page.

Speed Comparison

AMP may not currently be a ranking signal but page speed is. I used PageSpeed Insights to compare my AMP enabled page with my traditional home page.

My non-AMP page scored a 73 on mobile. Not terrible but not great either.

My AMP page scored 100 on mobile. That's the first 100 I've ever recieved and although I can't know for sure I imagine that's a positive ranking signal.

The next thing I did was compare load times for my AMP and non-Amp pages.

Methods:

I used DevTools in Chrome Version 60.
I selected Device Mode to emulate a cell phone. I would have preferred to use a real phone but mine couldn't be detected possibly due to an old USB cable. Instead I used a PC with Windows 10 installed.
Cache was disabled.
Throttling was used to compare speeds at Fast 3G and Slow 3G.
I ran each simulation 10 times and averaged the results.
One thing that surprised me was the similarity in size between my stripped down AMP page and my non-AMP page. DevTools recorded that my AMP page transferred 445K and my non-AMP page transferred 452K. Both pages were almost the same size after all resources were included.

Results:

Fast 3G

Average Load Time

Traditional Page: 5.218 seconds.

AMP Page: 4.044 seconds.

Result: 23.79% reduction in Load time.

Slow 3G

Average Load Time

Traditional Page: 18.272 seconds.

AMP Page: 13.925 seconds.

Result: 22.5% reduction in Load time.

Load time indicates the time it takes for all page resources to load which includes external CSS, images and fonts. Screen rendering begins before loading is complete.

Summary

If you have experience in web development AMP is fairly easy to implement. This is particularly true for a straightforward site like mine. It significantly improved my score on PageSpeed Insights and reduced Load speed. Both of those may be positive ranking signals in mobile search results. Any meaningful improvement in speed and search rank should generate increased sales for a business.