Get a FREE Quote - We'll contact you right back!

Get Your Website AMP'ed Up

Posted on May 15, 2016

Update (August 2016): Google have said that they are going to start rolling out AMP results in their normal organic rankings.

From the top...

AMP stands for 'Accelerated Mobile Pages'. On a very basic level, it is just a few conventions to follow to get your website to load faster on mobile devices. Designed especially for super fresh content such as breaking news.

The AMP project is an open-source design that is currently backed by Google.

The purpose of AMP is not dissimilar to Facebook's Instant Articles, or Apple's News, however, it is not built for a single end-client (e.g. Facebook or iOS). It is an open standard that can be adopted by every device.

amp-og.jpg?mtime=20160722164032#asset:42

How do I use it?

Firstly, you need to mark up your document with the lightning emoji. Yes, emoji. I'm still not sure how I feel about this.

Here is a basic starter template with all of the required fields:

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
     />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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>Hello World!</body>
</html>

What can't I use?

JavaScript, Flash (yay!) and frames are the main items on the ban list. Forms are also currently, although that might change. 

Fancy fonts can be used, but the only providers currently white-listed are https://fast.fonts.net and https://fonts.googleapis.com.

How does this affect my SEO?

Google has confirmed that AMP is not a direct ranking signal. Yet.

But knowing anything that Google throws itself behind (mobile-responsive, HTTPS, etc.), it will become a lot more important in the near future.

What do I need to be careful of? 

Now that you have 2 versions of your content (normal and AMP), make sure you have your canonical tags set correctly otherwise you risk duplicate content issues.

On your AMP version, you want to set your canonical tag back to the normal version. 

And on your normal version, you want to set your AMP version like so: 

<link rel="amphtml" href="[[ URL to AMP version]]">

Testing

AMP has a neat little testing utility built right into their JavaScript library. Simply add "#development=1" to the end of the respective AMP URL and any errors will be logged to your browser's console!

How can I see some example AMP results?

On your mobile device, go to g.co/ampdemo and then search for something timely such as "news" or "olympics".

Our Recommendation

If your current website includes a form of latest industry news, and you can easily add an AMP output to your current website, you should do so. If it requires a lot of effort or recoding, then put it on the nice to have features list for your next website revamp.

And of course, you can view the AMP version of this very blog post at: https://www.optimising.com.au/blog/get-your-website-amped-up/amp.

About the Author

Daniel Zuccon

Operations Director

Daniel Zuccon made his first website in 1998 for a friend in exchange for a skateboard. (Don't worry, his programming skills are far better than his short-lived skating career!).

Since then, he has run several online businesses including boutique eCommerce stores and large online communities, so he understands the issues Australian businesses face every day.

Google Partner badges

We're real people! Meet the Optimising team!

Optimising team photo

Optimising Logo

Optimising are more than an Digital Agency. We're a team of brilliant digital minds who aim to transform the business of our clients through clever, outside of the box solutions.

The Optimising team are a highly experienced, dynamic group of professionals specialising in generating websites primed for success, ensuring a positive return from clients online presence.

+ Click here for more!

 

Get In Touch

Optimising Melbourne
1/345 Punt Road
Richmond VIC 3121

Optimising Gold Coast
Suite 511, 15 Albert Ave
Broadbeach QLD 4218

Optimising Sydney
Suite 64, 246 Pacific Highway
Crows Nest NSW 2065