Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à AMP K.S.
Similaire à AMP K.S. (20)
AMP K.S.
- 1. Get AMP’ed for AMP! AMPlify your clients! Other AMP puns!
- 2. AMP puns 1. AMPlify your clients 2. Get AMP’ed for AMP 3. TrAMPle your mobile competition 4. SAMPle AMPle AMP - Jon 5. rAMPing up: Getting Ready for Amplified Mobile Pages - Ant 6. clAMPing Down on Amplified Mobiel Pages - Ant (misspelling included & trademarked) 7. Become the chAMPion of AMP - Jake
- 3. Thank you
- 4. Table of contents 1. What is AMP 2. AMP Origins 3. Intro to AMP HTML 4. Site speed comparison 5. Impact on SERP 6. When & where our clients can use it 7. Advertisements 8. Limitations 9. Live Demo 10.Questions
- 5. ampproject.org The AMP Project is an initiative started by Google & Twitter to improve the mobile web and enhance the distribution ecosystem. AMP HTML embraces the open web, so you can be sure that your content appears correctly across all modern browsers and apps. Pages are published normally to your site, using standard tools, and are accelerated via caches created by Google and others. AMP utilizes its own proxy based CDN to deliver content to users with very little delay. Quick Demo Video https://www.ampproject.org/static/video/with_titlecards_v4 _464x826.mp4
- 6. Still not following? Ok let me give you my elevator pitch for AMP. “AMP is a light, fast and simple web page. Using Google’s CDN it will prefetch the site so to users, the page loads instantly on their mobile devices.”
- 7. Origins of AMP ● Oct 7th, Google announced the open source initiative called Accelerated Mobile Pages ● AMPs purpose is to deliver webpages with rich content like video, animations and graphics to work alongside smart ads, and to load instantaneously ● Twitter,Pinterest, WordPress.com, Chartbeat, Parse.ly, Adobe Analytics and LinkedIn are the first group that plan to integrate AMPs
- 8. AMP HTML <!doctype html> <html (AMP)⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum- scale=1,initial-scale=1"> <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello, has anyone seen Keith’s mustache?</body> </html> These AMPs will need to be written in AMP HTML. This subset of HTML is very lean, some tags are not supported and some tags are changed to AMP-specific tags. For example the <img> tag is changed to <amp-img> which provides full srcset support even in browsers that down support it yet.
- 10. MEME DELETED
- 11. Site speed comparison Non AMP AMP
- 12. SERP Impact There is still very little information about how this will impact the SERPs once it is live but what we can tell from the demo is: ● AMPs appear above organic pages in a carousel.(Allegedly) ● This should only impact mobile SERPs. Although AMP is made for mobile you can experience these pages on desktop. There is a desktop extension for chrome that will automagically load AMP pages when available. Desktop AMP Extension
- 13. Client Usage Clients using Wordpress will be able to easily migrate current pages to AMP with the help of this plugin. For clients not on wordpress currently there is no easy transition for them. AMP pages should only be used for articles or blog posts. WARNING: This plugin is still in early development and should be tested multiple times to ensure the AMPs are formatted correctly.
- 14. Advertisements Some clients keep the lights on and food in the fridge from ad revenue. Since a lot of ad placement providers rely on JavaScript this can be troublesome. Currently, there are a handful of providers that are being supported: ● A9 ● AdReactor ● AdSense ● AdTech ● Doubleclick
- 16. Limitations Yes this sounds like a great idea but this is not the purpose of AMP. It is not here to replace a mobile friendly sites nor is it a way to beat site speed issues. It is meant for blog or article content and below I have listed the 9 commandments of AMP: 1. Conditional HTML comments are not allowed. 2. All attributes starting with ‘on’ are disallowed. 3. ‘Javascript:’ schema is disallowed. 4. All styles must be inline 5. Only one style tag in the document head 6. Style rules must be below 50KB 7. No developer-written or third party JavaScript 8. No input elements of any kind, including standard input and text area 9. Keywords should not include ‘unsafe-inline’ and ‘unsafe-eval’
- 18. Questions?