Get your website AMP'ed up
Daniel Zuccon
Co-Founder & Operations
Posted: 24 Mar 2020
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.
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.
Daniel Zuccon
Co-Founder & Operations
With over 20 years experience in the industry, Daniel has produced an extensive number of web projects for some of Australia’s largest brands. His passion and interest for web development originated from building his first website in 1998 (in exchange for a skateboard, no less!) to running many successful boutique eCommerce stores and large online communities.
Since then, Daniel has made the leap of co-founding Optimising, the specialist SEO Agency that we know today. From its humble beginnings, the team has grown from a two-man enterprise to a large core team, growing into a highly respected digital agency.
We value purpose over profit and take action.
Our values and beliefs have always set the tone and approach to our business. It's not just enough to grow as a company and produce profits, we have a global responsibility to make our economy more inclusive and sustainable. As both a B Corp and a member of 1% for the planet, we have further cemented this purpose within our organisation.
However, our work isn't done quite yet. For Optimising, this is simple the start of our journey towards building a better business and world!
Partner with
the real deal
Chat with us today and we’ll get you the results you deserve.
We acknowledge the Wurundjeri Woi Wurrung people as the Traditional Owners of the land now known as Richmond. We pay our respects to Elders from all nations - and to their Elders past, present and future.
Optimising is committed to cultivating and preserving a culture of inclusion and connectedness. We are able to grow and learn better together with a diverse team of employees.
