Get AMP’ed for AMP!
Download as PPTX, PDF1 like4,302 views
The document discusses Accelerated Mobile Pages (AMP), an open-source initiative by Google and Twitter aimed at enhancing mobile web performance. It outlines the attributes of AMP HTML, its impact on site speed, and its benefits for publishers, while also detailing limitations and providing guidance for usage. Additionally, it notes collaborations with various platforms and mentions support for advertisements within AMP content.
Get AMP’ed for AMP!
- 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 Mobile Pages - Ant 7. Become the chAMPion of AMP - Jake
- 3. Table of contents 1. What is AMP 2. Where AMP came from 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
- 4. 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_titlecar ds_v4_464x826.mp4
- 5. In other words… AMP is a light, fast and simple web page. Using Google’s CDN it will “prefetch” the site so the page loads instantly on users’ mobile devices.
- 6. Origins of AMP Mobile devices have revolutionized the way the majority of users access the web. Publishers worldwide use the mobile web to deliver content to these users but the experience is less than optimal. This is due to multiple issues (like site speed) that impact how long users stay on the page. On Oct 7th, Google announced the open source initiative called Accelerated Mobile Pages. Its main goal, to improve the mobile web experience. They want webpages with rich content like video, animations and graphics to work alongside smart ads, and to load instantaneously. There are collaborations with Twitter, Pinterest, WordPress.com, Chartbeat, Parse.ly, Adobe Analytics and LinkedIn.
- 7. AMP HTML <!doctype html> <html ⚡> <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.
- 8. Site speed comparison Non AMP AMP
- 9. 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 auto-”magically” load AMP pages when available. Desktop AMP Extension
- 10. 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.
- 11. 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
- 13. Current Limitations Dec 2015 AMP is not here to replace mobile friendly sites, nor is it a way to entirely beat site speed issues. There are limitations (examples listed below): 1. Conditional HTML comments are not allowed. 2. All attributes starting with ‘on’ are disallowed. 3. ‘Javascript:’ schema is disallowed. 4. Style rules must be below 50KB 5. All styles must be inline 6. No developer-written or third party JavaScript 7. No input elements of any kind, including standard input and text area 8. No external style sheets and only one style tag in the document head 9. Keywords should not include ‘unsafe-inline’ and ‘unsafe-eval’