SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Get AMP’ed for AMP!
AMPlify your clients!
Other AMP puns!
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
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
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
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 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
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.
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
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’
Live Demo
https://www.theguardian.com/world/2015/dec/28/iraq-
declares-ramadi-liberated-from-islamic-state/amp

Weitere ähnliche Inhalte

Was ist angesagt?

Madkudu - Product Led Summit - Product Led Onboarding
Madkudu - Product Led Summit - Product Led OnboardingMadkudu - Product Led Summit - Product Led Onboarding
Madkudu - Product Led Summit - Product Led OnboardingFrancis Brero
 
Organizing Your First Website Usability Test - WordCamp Lancaster 2016
Organizing Your First Website Usability Test - WordCamp Lancaster 2016Organizing Your First Website Usability Test - WordCamp Lancaster 2016
Organizing Your First Website Usability Test - WordCamp Lancaster 2016Anthony D. Paul
 
Use Product Debt to Maximize Business Value by Devbridge Directors
Use Product Debt to Maximize Business Value by Devbridge DirectorsUse Product Debt to Maximize Business Value by Devbridge Directors
Use Product Debt to Maximize Business Value by Devbridge DirectorsProduct School
 
Outperform Webinar Series: How to Capture Your Customers at the Top of the Fu...
Outperform Webinar Series: How to Capture Your Customers at the Top of the Fu...Outperform Webinar Series: How to Capture Your Customers at the Top of the Fu...
Outperform Webinar Series: How to Capture Your Customers at the Top of the Fu...Optimizely
 
Full Stack Experimentation
Full Stack ExperimentationFull Stack Experimentation
Full Stack ExperimentationOptimizely
 
How Product Frameworks Help PM's by Amazon Web Services Sr PM
How Product Frameworks Help PM's by Amazon Web Services Sr PMHow Product Frameworks Help PM's by Amazon Web Services Sr PM
How Product Frameworks Help PM's by Amazon Web Services Sr PMProduct School
 
Starting Your E-Commerce Platform
Starting Your E-Commerce PlatformStarting Your E-Commerce Platform
Starting Your E-Commerce PlatformBolakale Salau
 
How to Identify Relevant Product KPIs by Roomgo Head of Product
How to Identify Relevant Product KPIs by Roomgo Head of ProductHow to Identify Relevant Product KPIs by Roomgo Head of Product
How to Identify Relevant Product KPIs by Roomgo Head of ProductProduct School
 
How to Reduce Churn with Better Product Adoption
How to Reduce Churn with Better Product AdoptionHow to Reduce Churn with Better Product Adoption
How to Reduce Churn with Better Product AdoptionAmity
 
How to Use Quant and Qual Feedback to Rapidly Improve Your Product
How to Use Quant and Qual Feedback to Rapidly Improve Your ProductHow to Use Quant and Qual Feedback to Rapidly Improve Your Product
How to Use Quant and Qual Feedback to Rapidly Improve Your ProductOptimizely
 
Failure is an Option: Scaling Resilient Feature Delivery
Failure is an Option: Scaling Resilient Feature DeliveryFailure is an Option: Scaling Resilient Feature Delivery
Failure is an Option: Scaling Resilient Feature DeliveryOptimizely
 
How FOX Tests Everything from Mobile, Web, to Living Room Devices
How FOX Tests Everything from Mobile, Web, to Living Room DevicesHow FOX Tests Everything from Mobile, Web, to Living Room Devices
How FOX Tests Everything from Mobile, Web, to Living Room DevicesOptimizely
 
Product Thinking – The key to Digital Product Innovation and Management
Product Thinking – The key to Digital Product Innovation and ManagementProduct Thinking – The key to Digital Product Innovation and Management
Product Thinking – The key to Digital Product Innovation and ManagementNUS-ISS
 
Whole Product Roadmap Case Study
Whole Product Roadmap Case StudyWhole Product Roadmap Case Study
Whole Product Roadmap Case StudyBruce Pharr
 
Product Led Growth Strategy
Product Led Growth StrategyProduct Led Growth Strategy
Product Led Growth StrategyMickey Alon
 
Delivering a Strategic and Delightful User Experience
Delivering a Strategic and Delightful User ExperienceDelivering a Strategic and Delightful User Experience
Delivering a Strategic and Delightful User ExperienceWilliam Newman
 
[Webinar] Innovate Faster by Adopting The Modern Growth Stack
[Webinar] Innovate Faster by Adopting The Modern Growth Stack[Webinar] Innovate Faster by Adopting The Modern Growth Stack
[Webinar] Innovate Faster by Adopting The Modern Growth StackOptimizely
 
Modern Architectures: Keynote - Using Fabrics to Weave Success in the Cloud
Modern Architectures: Keynote - Using Fabrics to Weave Success in the CloudModern Architectures: Keynote - Using Fabrics to Weave Success in the Cloud
Modern Architectures: Keynote - Using Fabrics to Weave Success in the CloudDreamforce
 
APIs are Products Too by PayPal Product Leader
 APIs are Products Too by PayPal Product Leader APIs are Products Too by PayPal Product Leader
APIs are Products Too by PayPal Product LeaderProduct School
 

Was ist angesagt? (19)

Madkudu - Product Led Summit - Product Led Onboarding
Madkudu - Product Led Summit - Product Led OnboardingMadkudu - Product Led Summit - Product Led Onboarding
Madkudu - Product Led Summit - Product Led Onboarding
 
Organizing Your First Website Usability Test - WordCamp Lancaster 2016
Organizing Your First Website Usability Test - WordCamp Lancaster 2016Organizing Your First Website Usability Test - WordCamp Lancaster 2016
Organizing Your First Website Usability Test - WordCamp Lancaster 2016
 
Use Product Debt to Maximize Business Value by Devbridge Directors
Use Product Debt to Maximize Business Value by Devbridge DirectorsUse Product Debt to Maximize Business Value by Devbridge Directors
Use Product Debt to Maximize Business Value by Devbridge Directors
 
Outperform Webinar Series: How to Capture Your Customers at the Top of the Fu...
Outperform Webinar Series: How to Capture Your Customers at the Top of the Fu...Outperform Webinar Series: How to Capture Your Customers at the Top of the Fu...
Outperform Webinar Series: How to Capture Your Customers at the Top of the Fu...
 
Full Stack Experimentation
Full Stack ExperimentationFull Stack Experimentation
Full Stack Experimentation
 
How Product Frameworks Help PM's by Amazon Web Services Sr PM
How Product Frameworks Help PM's by Amazon Web Services Sr PMHow Product Frameworks Help PM's by Amazon Web Services Sr PM
How Product Frameworks Help PM's by Amazon Web Services Sr PM
 
Starting Your E-Commerce Platform
Starting Your E-Commerce PlatformStarting Your E-Commerce Platform
Starting Your E-Commerce Platform
 
How to Identify Relevant Product KPIs by Roomgo Head of Product
How to Identify Relevant Product KPIs by Roomgo Head of ProductHow to Identify Relevant Product KPIs by Roomgo Head of Product
How to Identify Relevant Product KPIs by Roomgo Head of Product
 
How to Reduce Churn with Better Product Adoption
How to Reduce Churn with Better Product AdoptionHow to Reduce Churn with Better Product Adoption
How to Reduce Churn with Better Product Adoption
 
How to Use Quant and Qual Feedback to Rapidly Improve Your Product
How to Use Quant and Qual Feedback to Rapidly Improve Your ProductHow to Use Quant and Qual Feedback to Rapidly Improve Your Product
How to Use Quant and Qual Feedback to Rapidly Improve Your Product
 
Failure is an Option: Scaling Resilient Feature Delivery
Failure is an Option: Scaling Resilient Feature DeliveryFailure is an Option: Scaling Resilient Feature Delivery
Failure is an Option: Scaling Resilient Feature Delivery
 
How FOX Tests Everything from Mobile, Web, to Living Room Devices
How FOX Tests Everything from Mobile, Web, to Living Room DevicesHow FOX Tests Everything from Mobile, Web, to Living Room Devices
How FOX Tests Everything from Mobile, Web, to Living Room Devices
 
Product Thinking – The key to Digital Product Innovation and Management
Product Thinking – The key to Digital Product Innovation and ManagementProduct Thinking – The key to Digital Product Innovation and Management
Product Thinking – The key to Digital Product Innovation and Management
 
Whole Product Roadmap Case Study
Whole Product Roadmap Case StudyWhole Product Roadmap Case Study
Whole Product Roadmap Case Study
 
Product Led Growth Strategy
Product Led Growth StrategyProduct Led Growth Strategy
Product Led Growth Strategy
 
Delivering a Strategic and Delightful User Experience
Delivering a Strategic and Delightful User ExperienceDelivering a Strategic and Delightful User Experience
Delivering a Strategic and Delightful User Experience
 
[Webinar] Innovate Faster by Adopting The Modern Growth Stack
[Webinar] Innovate Faster by Adopting The Modern Growth Stack[Webinar] Innovate Faster by Adopting The Modern Growth Stack
[Webinar] Innovate Faster by Adopting The Modern Growth Stack
 
Modern Architectures: Keynote - Using Fabrics to Weave Success in the Cloud
Modern Architectures: Keynote - Using Fabrics to Weave Success in the CloudModern Architectures: Keynote - Using Fabrics to Weave Success in the Cloud
Modern Architectures: Keynote - Using Fabrics to Weave Success in the Cloud
 
APIs are Products Too by PayPal Product Leader
 APIs are Products Too by PayPal Product Leader APIs are Products Too by PayPal Product Leader
APIs are Products Too by PayPal Product Leader
 

Andere mochten auch

Visualizing Privacy
Visualizing PrivacyVisualizing Privacy
Visualizing PrivacyLookout
 
20140905 AWS Night in ITHD LT2
20140905 AWS Night in ITHD LT220140905 AWS Night in ITHD LT2
20140905 AWS Night in ITHD LT2Nobuyuki Matsui
 
SuprTEK Continuous Monitoring
SuprTEK Continuous MonitoringSuprTEK Continuous Monitoring
SuprTEK Continuous MonitoringTieu Luu
 
Brecha tecnológica y discapacidad.
Brecha tecnológica y discapacidad.Brecha tecnológica y discapacidad.
Brecha tecnológica y discapacidad.José María
 
3 d pie chart circular puzzle with hole in center process stages 11 style 3 p...
3 d pie chart circular puzzle with hole in center process stages 11 style 3 p...3 d pie chart circular puzzle with hole in center process stages 11 style 3 p...
3 d pie chart circular puzzle with hole in center process stages 11 style 3 p...SlideTeam.net
 
生日快乐
生日快乐生日快乐
生日快乐Paul Ni
 
Event Report - Salesforce Dreamforce 2016 - Einstein is show, platform progre...
Event Report - Salesforce Dreamforce 2016 - Einstein is show, platform progre...Event Report - Salesforce Dreamforce 2016 - Einstein is show, platform progre...
Event Report - Salesforce Dreamforce 2016 - Einstein is show, platform progre...Holger Mueller
 
Mapping Voyager 1's 36-Year Trek Through Space
Mapping Voyager 1's 36-Year Trek Through SpaceMapping Voyager 1's 36-Year Trek Through Space
Mapping Voyager 1's 36-Year Trek Through SpaceMashable
 
Parecer jurídico normativo 36 2011 CFESS
Parecer jurídico normativo 36 2011 CFESSParecer jurídico normativo 36 2011 CFESS
Parecer jurídico normativo 36 2011 CFESSFILIPE NERI
 
Delivering Vertical Social Apps - Dreamforce - 9/18
Delivering Vertical Social Apps - Dreamforce - 9/18Delivering Vertical Social Apps - Dreamforce - 9/18
Delivering Vertical Social Apps - Dreamforce - 9/18Salesforce Partners
 
横手版地方発信のソーシャルメディア
横手版地方発信のソーシャルメディア横手版地方発信のソーシャルメディア
横手版地方発信のソーシャルメディアSkunkWork.Co.,Ltd
 
Import Guide - Cloud for Customer Edge and Starter Edition - Guide v2.6
Import Guide - Cloud for Customer Edge and Starter Edition - Guide v2.6Import Guide - Cloud for Customer Edge and Starter Edition - Guide v2.6
Import Guide - Cloud for Customer Edge and Starter Edition - Guide v2.6Tiziano Menconi
 
いいいいいいい
いいいいいいいいいいいいいい
いいいいいいいjt_test
 
Investing 101: How to Prepare for Retirement
Investing 101: How to Prepare for RetirementInvesting 101: How to Prepare for Retirement
Investing 101: How to Prepare for RetirementExperian_US
 
ноябрь
ноябрьноябрь
ноябрьlesik1990
 
Caption story project
Caption story projectCaption story project
Caption story projectsofiamckentry
 

Andere mochten auch (20)

Visualizing Privacy
Visualizing PrivacyVisualizing Privacy
Visualizing Privacy
 
Glossary
GlossaryGlossary
Glossary
 
20140905 AWS Night in ITHD LT2
20140905 AWS Night in ITHD LT220140905 AWS Night in ITHD LT2
20140905 AWS Night in ITHD LT2
 
SuprTEK Continuous Monitoring
SuprTEK Continuous MonitoringSuprTEK Continuous Monitoring
SuprTEK Continuous Monitoring
 
Brecha tecnológica y discapacidad.
Brecha tecnológica y discapacidad.Brecha tecnológica y discapacidad.
Brecha tecnológica y discapacidad.
 
Comic analysis powerpoint
Comic analysis powerpointComic analysis powerpoint
Comic analysis powerpoint
 
3 d pie chart circular puzzle with hole in center process stages 11 style 3 p...
3 d pie chart circular puzzle with hole in center process stages 11 style 3 p...3 d pie chart circular puzzle with hole in center process stages 11 style 3 p...
3 d pie chart circular puzzle with hole in center process stages 11 style 3 p...
 
生日快乐
生日快乐生日快乐
生日快乐
 
Event Report - Salesforce Dreamforce 2016 - Einstein is show, platform progre...
Event Report - Salesforce Dreamforce 2016 - Einstein is show, platform progre...Event Report - Salesforce Dreamforce 2016 - Einstein is show, platform progre...
Event Report - Salesforce Dreamforce 2016 - Einstein is show, platform progre...
 
Mapping Voyager 1's 36-Year Trek Through Space
Mapping Voyager 1's 36-Year Trek Through SpaceMapping Voyager 1's 36-Year Trek Through Space
Mapping Voyager 1's 36-Year Trek Through Space
 
Parecer jurídico normativo 36 2011 CFESS
Parecer jurídico normativo 36 2011 CFESSParecer jurídico normativo 36 2011 CFESS
Parecer jurídico normativo 36 2011 CFESS
 
Delivering Vertical Social Apps - Dreamforce - 9/18
Delivering Vertical Social Apps - Dreamforce - 9/18Delivering Vertical Social Apps - Dreamforce - 9/18
Delivering Vertical Social Apps - Dreamforce - 9/18
 
Logo
LogoLogo
Logo
 
横手版地方発信のソーシャルメディア
横手版地方発信のソーシャルメディア横手版地方発信のソーシャルメディア
横手版地方発信のソーシャルメディア
 
Import Guide - Cloud for Customer Edge and Starter Edition - Guide v2.6
Import Guide - Cloud for Customer Edge and Starter Edition - Guide v2.6Import Guide - Cloud for Customer Edge and Starter Edition - Guide v2.6
Import Guide - Cloud for Customer Edge and Starter Edition - Guide v2.6
 
いいいいいいい
いいいいいいいいいいいいいい
いいいいいいい
 
Investing 101: How to Prepare for Retirement
Investing 101: How to Prepare for RetirementInvesting 101: How to Prepare for Retirement
Investing 101: How to Prepare for Retirement
 
ноябрь
ноябрьноябрь
ноябрь
 
ตารางแนวทางกำหนดการจัดเวทีฯ
ตารางแนวทางกำหนดการจัดเวทีฯตารางแนวทางกำหนดการจัดเวทีฯ
ตารางแนวทางกำหนดการจัดเวทีฯ
 
Caption story project
Caption story projectCaption story project
Caption story project
 

Ähnlich wie Get AMP’ed for AMP!

Accelerated Mobile Pages (AMP) & How it will Impact your Business
Accelerated Mobile Pages (AMP) & How it will Impact your BusinessAccelerated Mobile Pages (AMP) & How it will Impact your Business
Accelerated Mobile Pages (AMP) & How it will Impact your BusinessHarshavardhan MP
 
Amp your site an intro to accelerated mobile pages
Amp your site  an intro to accelerated mobile pagesAmp your site  an intro to accelerated mobile pages
Amp your site an intro to accelerated mobile pagesRobert McFrazier
 
What Are Accelerated Mobile Pages (AMPs)?
What Are Accelerated Mobile Pages (AMPs)?What Are Accelerated Mobile Pages (AMPs)?
What Are Accelerated Mobile Pages (AMPs)?MatchCraft
 
Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP)Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP)ijtsrd
 
Amp up your Site with Accelerated Mobile Pages
Amp up your Site with Accelerated Mobile PagesAmp up your Site with Accelerated Mobile Pages
Amp up your Site with Accelerated Mobile PagesBrian McKeiver
 
Webwing Technologies - Procedure to Implement AMP in your Website
Webwing Technologies - Procedure to Implement AMP in your WebsiteWebwing Technologies - Procedure to Implement AMP in your Website
Webwing Technologies - Procedure to Implement AMP in your WebsiteWebwing Technologies
 
Integrating Accelerated Mobile Pages (AMP) In Drupal Websites
Integrating Accelerated Mobile Pages (AMP) In Drupal WebsitesIntegrating Accelerated Mobile Pages (AMP) In Drupal Websites
Integrating Accelerated Mobile Pages (AMP) In Drupal WebsitesExcellent Webworld
 
Step by-step procedure to implement amp in website
Step by-step procedure to implement amp in websiteStep by-step procedure to implement amp in website
Step by-step procedure to implement amp in websiteWebwing Technologies
 
Google AMP: High-Speed Pages in Higher Ed
Google AMP: High-Speed Pages in Higher EdGoogle AMP: High-Speed Pages in Higher Ed
Google AMP: High-Speed Pages in Higher EdCaroline Roberts
 
Accelerated-Mobile-Pages
Accelerated-Mobile-PagesAccelerated-Mobile-Pages
Accelerated-Mobile-PagesshivantGupta1
 
AMP in WordPress, the WordPress Way
AMP in WordPress, the WordPress WayAMP in WordPress, the WordPress Way
AMP in WordPress, the WordPress WayAlberto Medina
 
Accelerated Mobile Pages (AMP) The Next Revolution in Mobile Web Development
Accelerated Mobile Pages (AMP) The Next Revolution in Mobile Web DevelopmentAccelerated Mobile Pages (AMP) The Next Revolution in Mobile Web Development
Accelerated Mobile Pages (AMP) The Next Revolution in Mobile Web DevelopmentNotifyVisitors
 
Accelerated Mobile Pages (AMP) in Magento
Accelerated Mobile Pages (AMP) in MagentoAccelerated Mobile Pages (AMP) in Magento
Accelerated Mobile Pages (AMP) in MagentoMagecom UK Limited
 
AMP and the instant web - WebPerformance NYC MeetUp group
AMP and the instant web - WebPerformance NYC MeetUp groupAMP and the instant web - WebPerformance NYC MeetUp group
AMP and the instant web - WebPerformance NYC MeetUp groupMichael Posso
 
Amp your site: An intro to accelerated mobile pages
Amp your site: An intro to accelerated mobile pagesAmp your site: An intro to accelerated mobile pages
Amp your site: An intro to accelerated mobile pagesRobert McFrazier
 
AMP - Accelerated Mobile Pages
AMP - Accelerated Mobile PagesAMP - Accelerated Mobile Pages
AMP - Accelerated Mobile PagesIdo Green
 
What is Amp (Accelerated Mobile Pages)?
What is Amp (Accelerated Mobile Pages)?What is Amp (Accelerated Mobile Pages)?
What is Amp (Accelerated Mobile Pages)?KULZUJESHAI
 
AMP up Your WordPress Site
AMP up Your WordPress SiteAMP up Your WordPress Site
AMP up Your WordPress SitePrem Tiwari
 

Ähnlich wie Get AMP’ed for AMP! (20)

AMP K.S.
AMP K.S.AMP K.S.
AMP K.S.
 
Accelerated Mobile Pages (AMP) & How it will Impact your Business
Accelerated Mobile Pages (AMP) & How it will Impact your BusinessAccelerated Mobile Pages (AMP) & How it will Impact your Business
Accelerated Mobile Pages (AMP) & How it will Impact your Business
 
Amp your site an intro to accelerated mobile pages
Amp your site  an intro to accelerated mobile pagesAmp your site  an intro to accelerated mobile pages
Amp your site an intro to accelerated mobile pages
 
What Are Accelerated Mobile Pages (AMPs)?
What Are Accelerated Mobile Pages (AMPs)?What Are Accelerated Mobile Pages (AMPs)?
What Are Accelerated Mobile Pages (AMPs)?
 
Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP)Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP)
 
Amp up your Site with Accelerated Mobile Pages
Amp up your Site with Accelerated Mobile PagesAmp up your Site with Accelerated Mobile Pages
Amp up your Site with Accelerated Mobile Pages
 
Webwing Technologies - Procedure to Implement AMP in your Website
Webwing Technologies - Procedure to Implement AMP in your WebsiteWebwing Technologies - Procedure to Implement AMP in your Website
Webwing Technologies - Procedure to Implement AMP in your Website
 
Integrating Accelerated Mobile Pages (AMP) In Drupal Websites
Integrating Accelerated Mobile Pages (AMP) In Drupal WebsitesIntegrating Accelerated Mobile Pages (AMP) In Drupal Websites
Integrating Accelerated Mobile Pages (AMP) In Drupal Websites
 
Step by-step procedure to implement amp in website
Step by-step procedure to implement amp in websiteStep by-step procedure to implement amp in website
Step by-step procedure to implement amp in website
 
Google AMP: High-Speed Pages in Higher Ed
Google AMP: High-Speed Pages in Higher EdGoogle AMP: High-Speed Pages in Higher Ed
Google AMP: High-Speed Pages in Higher Ed
 
Accelerated-Mobile-Pages
Accelerated-Mobile-PagesAccelerated-Mobile-Pages
Accelerated-Mobile-Pages
 
AMP in WordPress, the WordPress Way
AMP in WordPress, the WordPress WayAMP in WordPress, the WordPress Way
AMP in WordPress, the WordPress Way
 
Accelerated Mobile Pages (AMP) The Next Revolution in Mobile Web Development
Accelerated Mobile Pages (AMP) The Next Revolution in Mobile Web DevelopmentAccelerated Mobile Pages (AMP) The Next Revolution in Mobile Web Development
Accelerated Mobile Pages (AMP) The Next Revolution in Mobile Web Development
 
Accelerated Mobile Pages (AMP) in Magento
Accelerated Mobile Pages (AMP) in MagentoAccelerated Mobile Pages (AMP) in Magento
Accelerated Mobile Pages (AMP) in Magento
 
AMP and the instant web - WebPerformance NYC MeetUp group
AMP and the instant web - WebPerformance NYC MeetUp groupAMP and the instant web - WebPerformance NYC MeetUp group
AMP and the instant web - WebPerformance NYC MeetUp group
 
Amp your site: An intro to accelerated mobile pages
Amp your site: An intro to accelerated mobile pagesAmp your site: An intro to accelerated mobile pages
Amp your site: An intro to accelerated mobile pages
 
AMP - Accelerated Mobile Pages
AMP - Accelerated Mobile PagesAMP - Accelerated Mobile Pages
AMP - Accelerated Mobile Pages
 
Why AMP for WordPress?
Why AMP for WordPress? Why AMP for WordPress?
Why AMP for WordPress?
 
What is Amp (Accelerated Mobile Pages)?
What is Amp (Accelerated Mobile Pages)?What is Amp (Accelerated Mobile Pages)?
What is Amp (Accelerated Mobile Pages)?
 
AMP up Your WordPress Site
AMP up Your WordPress SiteAMP up Your WordPress Site
AMP up Your WordPress Site
 

Mehr von Greenlane

Pubcon 2021 Web Accessibility by Sean Malseed
Pubcon 2021 Web Accessibility by Sean MalseedPubcon 2021 Web Accessibility by Sean Malseed
Pubcon 2021 Web Accessibility by Sean MalseedGreenlane
 
BrightonSEO 2018 - How to Tighten up Your SEO on Large Websites
BrightonSEO 2018 - How to Tighten up Your SEO on Large WebsitesBrightonSEO 2018 - How to Tighten up Your SEO on Large Websites
BrightonSEO 2018 - How to Tighten up Your SEO on Large WebsitesGreenlane
 
5 Ridiculously Simple Mobile SEO Mistakes (and how you can stop them)
5 Ridiculously Simple Mobile SEO Mistakes (and how you can stop them)5 Ridiculously Simple Mobile SEO Mistakes (and how you can stop them)
5 Ridiculously Simple Mobile SEO Mistakes (and how you can stop them)Greenlane
 
Angular and SEO
Angular and SEOAngular and SEO
Angular and SEOGreenlane
 
How Google is Reading and Indexing Content in 2016
How Google is Reading and Indexing Content in 2016How Google is Reading and Indexing Content in 2016
How Google is Reading and Indexing Content in 2016Greenlane
 
Philly New Technology Meetup #22 - February 2016 - Content is King
Philly New Technology Meetup #22 - February 2016 - Content is KingPhilly New Technology Meetup #22 - February 2016 - Content is King
Philly New Technology Meetup #22 - February 2016 - Content is KingGreenlane
 
SEMrush'in Around - SEMrush Presentation
SEMrush'in Around - SEMrush PresentationSEMrush'in Around - SEMrush Presentation
SEMrush'in Around - SEMrush PresentationGreenlane
 

Mehr von Greenlane (7)

Pubcon 2021 Web Accessibility by Sean Malseed
Pubcon 2021 Web Accessibility by Sean MalseedPubcon 2021 Web Accessibility by Sean Malseed
Pubcon 2021 Web Accessibility by Sean Malseed
 
BrightonSEO 2018 - How to Tighten up Your SEO on Large Websites
BrightonSEO 2018 - How to Tighten up Your SEO on Large WebsitesBrightonSEO 2018 - How to Tighten up Your SEO on Large Websites
BrightonSEO 2018 - How to Tighten up Your SEO on Large Websites
 
5 Ridiculously Simple Mobile SEO Mistakes (and how you can stop them)
5 Ridiculously Simple Mobile SEO Mistakes (and how you can stop them)5 Ridiculously Simple Mobile SEO Mistakes (and how you can stop them)
5 Ridiculously Simple Mobile SEO Mistakes (and how you can stop them)
 
Angular and SEO
Angular and SEOAngular and SEO
Angular and SEO
 
How Google is Reading and Indexing Content in 2016
How Google is Reading and Indexing Content in 2016How Google is Reading and Indexing Content in 2016
How Google is Reading and Indexing Content in 2016
 
Philly New Technology Meetup #22 - February 2016 - Content is King
Philly New Technology Meetup #22 - February 2016 - Content is KingPhilly New Technology Meetup #22 - February 2016 - Content is King
Philly New Technology Meetup #22 - February 2016 - Content is King
 
SEMrush'in Around - SEMrush Presentation
SEMrush'in Around - SEMrush PresentationSEMrush'in Around - SEMrush Presentation
SEMrush'in Around - SEMrush Presentation
 

Kürzlich hochgeladen

Five Essential Tools for International SEO - Natalia Witczyk - SearchNorwich 15
Five Essential Tools for International SEO - Natalia Witczyk - SearchNorwich 15Five Essential Tools for International SEO - Natalia Witczyk - SearchNorwich 15
Five Essential Tools for International SEO - Natalia Witczyk - SearchNorwich 15SearchNorwich
 
BLOOM_April2024. Balmer Lawrie Online Monthly Bulletin
BLOOM_April2024. Balmer Lawrie Online Monthly BulletinBLOOM_April2024. Balmer Lawrie Online Monthly Bulletin
BLOOM_April2024. Balmer Lawrie Online Monthly BulletinBalmerLawrie
 
Netflix Ads The Game Changer in Video Ads – Who Needs YouTube.pptx (Chester Y...
Netflix Ads The Game Changer in Video Ads – Who Needs YouTube.pptx (Chester Y...Netflix Ads The Game Changer in Video Ads – Who Needs YouTube.pptx (Chester Y...
Netflix Ads The Game Changer in Video Ads – Who Needs YouTube.pptx (Chester Y...ChesterYang6
 
Unraveling the Mystery of The Circleville Letters.pptx
Unraveling the Mystery of The Circleville Letters.pptxUnraveling the Mystery of The Circleville Letters.pptx
Unraveling the Mystery of The Circleville Letters.pptxelizabethella096
 
Enjoy Night⚡Call Girls Dlf City Phase 4 Gurgaon >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Dlf City Phase 4 Gurgaon >༒8448380779 Escort ServiceEnjoy Night⚡Call Girls Dlf City Phase 4 Gurgaon >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Dlf City Phase 4 Gurgaon >༒8448380779 Escort ServiceDelhi Call girls
 
Defining Marketing for the 21st Century,kotler
Defining Marketing for the 21st Century,kotlerDefining Marketing for the 21st Century,kotler
Defining Marketing for the 21st Century,kotlerAmirNasiruog
 
Uncover Insightful User Journey Secrets Using GA4 Reports
Uncover Insightful User Journey Secrets Using GA4 ReportsUncover Insightful User Journey Secrets Using GA4 Reports
Uncover Insightful User Journey Secrets Using GA4 ReportsVWO
 
Brand experience Peoria City Soccer Presentation.pdf
Brand experience Peoria City Soccer Presentation.pdfBrand experience Peoria City Soccer Presentation.pdf
Brand experience Peoria City Soccer Presentation.pdftbatkhuu1
 
Call Us ➥9654467111▻Call Girls In Delhi NCR
Call Us ➥9654467111▻Call Girls In Delhi NCRCall Us ➥9654467111▻Call Girls In Delhi NCR
Call Us ➥9654467111▻Call Girls In Delhi NCRSapana Sha
 
personal branding kit for music business
personal branding kit for music businesspersonal branding kit for music business
personal branding kit for music businessbrjohnson6
 
How to utilize calculated properties in your HubSpot setups
How to utilize calculated properties in your HubSpot setupsHow to utilize calculated properties in your HubSpot setups
How to utilize calculated properties in your HubSpot setupsssuser4571da
 
Unraveling the Mystery of the Hinterkaifeck Murders.pptx
Unraveling the Mystery of the Hinterkaifeck Murders.pptxUnraveling the Mystery of the Hinterkaifeck Murders.pptx
Unraveling the Mystery of the Hinterkaifeck Murders.pptxelizabethella096
 
Social Media Marketing PPT-Includes Paid media
Social Media Marketing PPT-Includes Paid mediaSocial Media Marketing PPT-Includes Paid media
Social Media Marketing PPT-Includes Paid mediaadityabelde2
 
CALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service Online
CALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service OnlineCALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service Online
CALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service Onlineanilsa9823
 
Aryabhata I, II of mathematics of both.pptx
Aryabhata I, II of mathematics of both.pptxAryabhata I, II of mathematics of both.pptx
Aryabhata I, II of mathematics of both.pptxtegevi9289
 
Situation Analysis | Management Company.
Situation Analysis | Management Company.Situation Analysis | Management Company.
Situation Analysis | Management Company.DanielaQuiroz63
 

Kürzlich hochgeladen (20)

Five Essential Tools for International SEO - Natalia Witczyk - SearchNorwich 15
Five Essential Tools for International SEO - Natalia Witczyk - SearchNorwich 15Five Essential Tools for International SEO - Natalia Witczyk - SearchNorwich 15
Five Essential Tools for International SEO - Natalia Witczyk - SearchNorwich 15
 
BLOOM_April2024. Balmer Lawrie Online Monthly Bulletin
BLOOM_April2024. Balmer Lawrie Online Monthly BulletinBLOOM_April2024. Balmer Lawrie Online Monthly Bulletin
BLOOM_April2024. Balmer Lawrie Online Monthly Bulletin
 
Netflix Ads The Game Changer in Video Ads – Who Needs YouTube.pptx (Chester Y...
Netflix Ads The Game Changer in Video Ads – Who Needs YouTube.pptx (Chester Y...Netflix Ads The Game Changer in Video Ads – Who Needs YouTube.pptx (Chester Y...
Netflix Ads The Game Changer in Video Ads – Who Needs YouTube.pptx (Chester Y...
 
Foundation First - Why Your Website and Content Matters - David Pisarek
Foundation First - Why Your Website and Content Matters - David PisarekFoundation First - Why Your Website and Content Matters - David Pisarek
Foundation First - Why Your Website and Content Matters - David Pisarek
 
Unraveling the Mystery of The Circleville Letters.pptx
Unraveling the Mystery of The Circleville Letters.pptxUnraveling the Mystery of The Circleville Letters.pptx
Unraveling the Mystery of The Circleville Letters.pptx
 
Enjoy Night⚡Call Girls Dlf City Phase 4 Gurgaon >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Dlf City Phase 4 Gurgaon >༒8448380779 Escort ServiceEnjoy Night⚡Call Girls Dlf City Phase 4 Gurgaon >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Dlf City Phase 4 Gurgaon >༒8448380779 Escort Service
 
Defining Marketing for the 21st Century,kotler
Defining Marketing for the 21st Century,kotlerDefining Marketing for the 21st Century,kotler
Defining Marketing for the 21st Century,kotler
 
Uncover Insightful User Journey Secrets Using GA4 Reports
Uncover Insightful User Journey Secrets Using GA4 ReportsUncover Insightful User Journey Secrets Using GA4 Reports
Uncover Insightful User Journey Secrets Using GA4 Reports
 
Brand experience Peoria City Soccer Presentation.pdf
Brand experience Peoria City Soccer Presentation.pdfBrand experience Peoria City Soccer Presentation.pdf
Brand experience Peoria City Soccer Presentation.pdf
 
Call Us ➥9654467111▻Call Girls In Delhi NCR
Call Us ➥9654467111▻Call Girls In Delhi NCRCall Us ➥9654467111▻Call Girls In Delhi NCR
Call Us ➥9654467111▻Call Girls In Delhi NCR
 
personal branding kit for music business
personal branding kit for music businesspersonal branding kit for music business
personal branding kit for music business
 
How to utilize calculated properties in your HubSpot setups
How to utilize calculated properties in your HubSpot setupsHow to utilize calculated properties in your HubSpot setups
How to utilize calculated properties in your HubSpot setups
 
Unraveling the Mystery of the Hinterkaifeck Murders.pptx
Unraveling the Mystery of the Hinterkaifeck Murders.pptxUnraveling the Mystery of the Hinterkaifeck Murders.pptx
Unraveling the Mystery of the Hinterkaifeck Murders.pptx
 
Social Media Marketing PPT-Includes Paid media
Social Media Marketing PPT-Includes Paid mediaSocial Media Marketing PPT-Includes Paid media
Social Media Marketing PPT-Includes Paid media
 
Generative AI Master Class - Generative AI, Unleash Creative Opportunity - Pe...
Generative AI Master Class - Generative AI, Unleash Creative Opportunity - Pe...Generative AI Master Class - Generative AI, Unleash Creative Opportunity - Pe...
Generative AI Master Class - Generative AI, Unleash Creative Opportunity - Pe...
 
CALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service Online
CALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service OnlineCALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service Online
CALL ON ➥8923113531 🔝Call Girls Hazratganj Lucknow best sexual service Online
 
Aryabhata I, II of mathematics of both.pptx
Aryabhata I, II of mathematics of both.pptxAryabhata I, II of mathematics of both.pptx
Aryabhata I, II of mathematics of both.pptx
 
SEO Master Class - Steve Wiideman, Wiideman Consulting Group
SEO Master Class - Steve Wiideman, Wiideman Consulting GroupSEO Master Class - Steve Wiideman, Wiideman Consulting Group
SEO Master Class - Steve Wiideman, Wiideman Consulting Group
 
Turn Digital Reputation Threats into Offense Tactics - Daniel Lemin
Turn Digital Reputation Threats into Offense Tactics - Daniel LeminTurn Digital Reputation Threats into Offense Tactics - Daniel Lemin
Turn Digital Reputation Threats into Offense Tactics - Daniel Lemin
 
Situation Analysis | Management Company.
Situation Analysis | Management Company.Situation Analysis | Management Company.
Situation Analysis | Management Company.
 

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.
  • 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
  • 12.
  • 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’