Creating Google AMP Pages


Presentation Description

How to create an AMP page in Google


Presentation Transcript

Creating Google AMP Pages:

Creating Google AMP Pages Here There And Everywhere

Target audience:

Target audience If you maintain a website Skills required HTML Some CSS Some Javascript


References Technology moves quickly, this was written October 2016. Latest on AMP is available at Notes Slides/notes and opinions are our own only and may not be correct, ensure you do your own research.


Why? Currently (Oct 2016) one reason; Facilitates fast page loading so; better user experience for users, for example, people on slow mobiles/desktops may not have been able to load your pages in a sensible time (if your existing pages were bloated or not written for speed).

How does it work, maybe:

How does it work, maybe Original non-amp page Create an AMP page Your development Users search/Display to user Page available in cache Present user with cache if possible or AMP page Validate and load cache Validate and load cache from AMP page or next user N Y Valid Present AMP page N Y


Results If done correctly the results from search will show an AMP option, clicking that AMP option will take the user to the fast cached page. speed).

When not to use?:

When not to use? If your pages are highly optimised anyway?. If there is any kind of complexity to your pages and therefore you require forms/ Javascript /heaps of css . Etc. If your target audience all own highly specified mobile devices or desktops with heaps of bandwidth and you think they are happy for you to use bandwidth for your site?. If you don’t have plenty of time or budget to rewrite or potentially double up on your pages. If you are a “wait and see what others do” type, or if you only implement with “mature” technology?. If you have limited “crawl budget” for your site as Googlebot likes to come and get fresh copies quite often.

Ideally suited to:

Ideally suited to For the moment (October 2016); Static content like; News articles Blog pages Recipes

Find an existing page:

Find an existing page


Mark-up Copy the HTML Remove any Java script Ensure CSS is limited Remodel any forms Code up the surrounding AMP scripting Create a new URL for your AMP page

Mark-up Key points:

Mark-up Key points Original page needs to say where the AMP page lives;

Mark-up Key points:

Mark-up Key points AMP Page needs to say where the original lives;

Mark-up Key Points:

Mark-up Key Points Boilerplate need to be last two items of the <HEAD>

Check your new AMP page is showing:

Check your new AMP page is showing

Validate It:

Validate It Either use the chrome add-in; Will show green if valid code

Validate it:

Validate it And/or use the validator at; You are looking for a status of pass

Validate it:

Validate it And/or use the developer tools; You are looking for no errors here

Validate it:

Validate it Then check the google cache is also serving your page; E.g.

Validate it:

Validate it Install node.js Install the validator tool npm install -g amphtml -validator Run validator e.g. amphtml -validator E.g. C:\Users\{youruser}\Documents\Visual Studio 2015\Projects\ htaequ \ htaequ \static\ js > amphtml -validator -- validator_js validator.js

The Need For Speed:

The Need For Speed Original page: 1.72 Seconds to load DOM AMP Marked Up Version: 1.35 Seconds to load DOM Cache version should it be presented to user; 645 Milliseconds to load DOM Note: overall speed variable due to this page containing ads which are loaded when able and at their own pace

Handy Items :

Handy Items Clear cache

authorStream Live Help