View
134
Download
1
Category
Preview:
Citation preview
Creating Google AMP Pages
Here There And Everywherehttps://www.htae.net
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 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?• 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
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?• 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• For the moment (October 2016);• Static content like;
• News articles• Blog pages• Recipes
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• Original page needs to say where the AMP page lives;
Mark-up Key points• AMP Page needs to say where the original lives;
Mark-up Key Points• Boilerplate need to be last two items of the <HEAD>
Check your new AMP page is showing
Validate It• Either use the chrome add-in;• https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgei
cmolmhobpoocbbmknc
Will show green if valid code
Validate it• And/or use the validator at;
https://validator.ampproject.org/
You are looking for a status of pass
Validate it• And/or use the developer tools; You are looking for no errors here
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/
The Need For SpeedOriginal page:1.72 Seconds to load DOM
AMP Marked Up Version:1.35 Seconds to load DOM
Cache version should itbe 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• Clear cache• https://cdn.ampproject.org/update-ping/c/s/www.htae.net
Recommended