Ramp up your Mobile Content Slideshow
Download as PPTX, PDF0 likes252 views
This document discusses Google's Accelerated Mobile Pages (AMP) project and provides a roadmap for implementing AMP on a website. It begins with an overview of AMP and its benefits like faster page loads and increased visibility in search results. It then outlines a three step roadmap: 1) building the business case for AMP, 2) setting goals for priorities and analytics, and 3) maintaining AMP page health. Key resources for creating AMP pages like templates, components and validation tools are also reviewed. The presentation concludes by highlighting additional AMP resources and thanking the audience.
Ramp up your Mobile Content Slideshow
- 1. Danni Lapham HOTCOURSES GROUP R-AMP Up Your Mobile Content – The AMP Roadmap @labouchezla http://www.slideshare.net/dannilapham
- 2. 20 weeks of AMP #
- 3. 3 High Level Outputs • Build the Business Case • Getting Started • Tech Requirements • Healthy AMP Pages @LaBouchezla
- 4. “ An open source project for creating super fast web pages. #
- 5. Not Just for Publishers @LaBouchezla
- 8. Google AMP Cache & Pre-Render 8 AMP Cache Pre-Render #
- 10. “How do we serve all these different audiences, on all these different devices and OSs, efficiently? 10 @LaBouchezla
- 11. 11 SWOT: Faster Pages trengths 64% of smartphone users expect pages to load in <4 secs Source: https://searchenginewatch.com
- 12. 12 > Conversion Strengths Source: https://blog.kissmetrics.com/ 1 sec delay means a 7% reduction in conversions
- 13. 80% AMP Publishers Report Higher Visibility 85% AMP Publishers Report Higher CTRs 13 #
- 14. AVG increase in CTR: AMP compared to non- AMP Subject Guides +10.4% Visa Guides +12.5% 14 @LaBouchezla
- 16. 16 SWOT: Artistic Licence No Javascript CSS Inline Only eakness
- 18. Resources 80% of development teams build an AMP landing page < 1 week Source: Google Developer Survey 2017
- 19. L I V I N G @LaBouchezla
- 20. 20 Step Two Set Your Goals
- 21. Prioritise P1s and P2s Maintenance Analytics
- 23. Step 2 P1s and P2s Maintenance Analytics
- 25. Google AMP Cache & Pre-Render 25 AMP Cache Pre-Render
- 26. 26 A small code change is required on both AMP and non-AMP pages to enable it. Instructions for setting up the Google AMP Client ID API can be found here. Google AMP Client ID API
- 27. 27Opt in on your AMP pages: Include the following code in the <head> of your AMP page: <meta name="amp-google-client-id-api" content="googleanalytics">
- 28. 28 Include the following in your Analytics tracking code: ga('create', 'UA-XXXXX-Y', 'auto', {'useAmpClientId': true}); analytics.js
- 29. <link rel="canonical" href="https://www.example.c om/url/to/regular-html- version.html" /> 29AMP Page @LaBouchezla
- 30. <link rel="canonical" href="https://www.example.c om/url/to/amp- document.html" /> 30Non-AMP Page @LaBouchezla
- 31. <link rel="amphtml" href="https://www.example.com /url/to/amp-version.html" /> 31Standalone AMP Page @LaBouchezla
- 32. Easy to Create: Key Resources AMP by Example Understand how components work & fit together, and flexibly copy/paste into a variety of pages @LaBouchezla
- 33. AMP Components AMP HTML AMP JS AMP Cache @LaBouchezla
- 34. Disallowed HTML <iframe> <amp-iframe> 34 <img><amp-img> <video> <amp-video> <audio> <amp-audio>
- 35. 35
- 36. <title> BTECS vs A-Levels </title> <html amp><link rel="canonical" href="https://www.whatuni.com/btecs-vs- a-levels/" /> <meta name="viewport" content="width=device-width,minimum- scale=1,initial-scale=1" /> 36
- 37. <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": “ …..“ } </script> 37
- 38. AMP Boilerplate <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz- animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes - amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}</style> <noscript> <style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms- animation:none;animation:none}</style> </noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> 38
- 39. Easy to Create: Key Resources AMP Start Full system of CSS, whole page templates & components that focus on creating great-looking sites quickly.
- 42. @LaBouchezla
- 45. GWT – AMP Validation Report https://www.google.com/webmasters/tools/home/
- 47. 47 @LaBouchezla
- 48. 48 There is Value in Time Non-AMP Time on Page AMP Time on Page Variance WHATUNI 03:37 06:29 + 80% HOTCOURSES ABROAD 03:37 05:52 + 62% HOTCOURSES 01:52 03.44 + 100% @LaBouchezla
- 49. Additional Resources • AMPProject.org • Google Search Console • Plug-ins for Wordpress • Adsense and AMP advertising 49
- 51. Thank you! HOTCOURSES GROUP R-AMP Up Your Mobile Content – The AMP Roadmap @labouchezla Danielle.Lapham@hotcourses.com http://www.slideshare.net/dannilapham
Editor's Notes
- #52: .