google amp pages

3. 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.

4. 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).

5. 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

6. 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).

7. 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.

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

9. Find an existing page

10. 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

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

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

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

14. Check your new AMP page is showing

15. Validate It • Either use the chrome add-in; • https://chrome.google.com/webstore/detail/amp- validator/nmoffdblmcmgeicmolmhobpoocbbmknc Will show green if valid code

16. Validate it • And/or use the validator at; https://validator.ampproject.org/ You are looking for a status of pass

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

18. 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/

19. 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

20. Handy Items • Clear cache • https://cdn.ampproject.org/update-ping/c/s/www.htae.net

google amp pages

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (7)

Semelhante a google amp pages

Semelhante a google amp pages (20)

Último

Último (20)

google amp pages