In modern day SEO warfare getting ranked highly within Google search results should be one of the key aims of your organisation. Getting ranked highly takes more than adding some basic content. How Google rank and update their spidering algorithium is usually based on how people use the internet.
Currently, the number of people who browse from their mobile/tablet is, unsurprisingly, increasing year-on-year. Google has recognised this trend and in an attempt to make the web a better browsing experience for mobile users, they have created a new framework in association with Twitter that websites can adopt that will create a better mobile experience, this framework is called Accelerate Mobile Pages Project (AMP templates).
In today's tutorial, I'm going to hopefully explain in simple terms what an AMP template is and how it differs from a normal webpage.
An AMP Template Example
If you use Google, then you will be familiar with AMP styles pages even if you may not realize it:
When you browse Google with your phone, you will often see a number of news articles linked to at the top of your browser with the word 'AMP' next to it. These as you can probably guess, are web pages that have an AMP-compatible template and as you will know, these results are presented before not AMP templates.
AMP templates DO NOT replace your existing templates. Instead, AMP templates can be thought of as a different view for your web page that Google will use. If you look at the source code for an AMP-compatible page, you should see a link to an additional AMP version of the page:
Should I Use AMP Templates?
The main reason why you will want to use AMP is SPEED! An AMP-compatible page forces you to design your page so that it will load quickly on a mobile device.
As AMP replaces so many restrictions on how your webpage, a number of people feel a bit disgruntled about integrating it. having limited ads, not having a sign-up form displayed on your AMP version may break your sales funnel.
To have AMP-compatible pages on your website, will require custom developer work. The AMP template specification defines some new HTML tags which are a lot more strict than HTML. This stripped-down set of HTML tags mean that AMP-compatible pages will load quicker. You can think of an AMP template as a diet version of your normal web page. So there will be a cost to creating an AMP-compatible page.
For website owners who take on this extra development work of creating AMP friendly alternative versions of their webpages, Google will reward you in terms of ranking. AMP templates will be ranked higher on mobile browsers than normal desktop web pages, so spending the time making your web pages AMP-compatible may mean you start to rank higher than your competitors who don't make use of AMP.
Admittedly, all this talk of different templates, different HTML and compatibility is confusing. I can hold my hands up and admit that I was more than a little confused when I first read about it.
The Technical Stuff
As I've mentioned AMP templates are more strict and place a lot more restictions on what HTML is allowed on an AMP template. This means:
- AMP pages can't include any client-side scripts, like JQuery
- CSS must be render winline. CSS is limited to 50 kilobytes
- AMP uses AMP-HTML which means certain HTML tags can't be used, like embed or frame
- AMP templates must include certain things
- Links to media need to use https
- Images tags must use width & height properties
Tips And Advice
How you style your AMP tempaltes will obviously be up to you and it will vary from company to company. There are some pre-built AMP html templates available for free/purchase, although not many yet. Dedicated. I used amptemplates.com for inspiration. AmpTempaltes contain a number of free and paid for templates that you can use as a foundation to create your own one.
Head on over to the AMP project website to find out more infomration and examples about AMP HTML.