Creating Google AMP Pages

Views:
 
     
 

Presentation Description

How to create an AMP page in Google

Comments

Presentation Transcript

Creating Google AMP Pages:

Creating Google AMP Pages Here There And Everywhere https://www.htae.net

Target audience:

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

References:

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

Why?:

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

Slide6:

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:

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; https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc Will show green if valid code

Validate it:

Validate it And/or use the validator at; https://validator.ampproject.org/ 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. https://cdn.ampproject.org/c/s/www.htae.net/checklist/amp/english-madeleines/67/

Validate it:

Validate it Install node.js https://nodejs.org/en/ Install the validator tool npm install -g amphtml -validator Run validator e.g. amphtml -validator https://www.ampproject.org/ E.g. C:\Users\{youruser}\Documents\Visual Studio 2015\Projects\ htaequ \ htaequ \static\ js > amphtml -validator -- validator_js validator.js http://127.0.0.1:8080/checklist/amp/a-project-to-test-standard-amp/1008/

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 https://cdn.ampproject.org/update-ping/c/s/www.htae.net

authorStream Live Help