get amp’ed for amp!
Post on 14-Apr-2017
3.767 Views
Preview:
TRANSCRIPT
Get AMP’ed for AMP!AMPlify your clients!
Other AMP puns!
AMP puns1. 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
Table of contents1. 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
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
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.
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.
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.
Site speed comparison
Non AMP AMP
SERP ImpactThere 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
Client UsageClients 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.
AdvertisementsSome 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
Current LimitationsDec 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 50KB5. All styles must be inline6. No developer-written or third party JavaScript7. No input elements of any kind, including standard input and text area8. No external style sheets and only one style tag in the document head9. Keywords should not include ‘unsafe-inline’ and ‘unsafe-eval’
Live Demo
https://www.theguardian.com/world/2015/dec/28/iraq-declares-ramadi-liberated-from-islamic-state/amp
top related