google amp - #semrushlive
TRANSCRIPT
@badams #SEMrushlive
Google AMP
Barry Adams
15 December 2016
@badams #SEMrushlive
Barry Adams
• Doing SEO since 1998
• Founder of Polemic Digital
• Co-Chief at State of Digital
@badams #SEMrushlive
What is AMP?
@badams #SEMrushlive
Accelerated Mobile Pages
• Alternative versions of your web pages;
Built specifically for speed & mobile
• Mobile first;
Mobile only!
• New standard;
Severely restrictive
• All or nothing;
It either validates or it doesn’t
@badams #SEMrushlive
Why AMP?
Top 1000 mobile apps vs Top 1000 mobile web
@badams #SEMrushlive
App = Engagement / Web = Discovery
@badams #SEMrushlive
AMP aims to change that
@badams #SEMrushlive
Anatomy of an Accelerated Mobile Page
@badams #SEMrushlive
HTML AMP declaration
@badams #SEMrushlive
Integrated structured data
@badams #SEMrushlive
In-line CSS
@badams #SEMrushlive
AMP-specific JavaScript files
@badams #SEMrushlive
AMP-analytics
@badams #SEMrushlive
Key elements of AMP
• Uses standard HTML5
Will render in most browsers
• Limited external dependencies
Inline CSS, limited async JS
• Integrated Structured Data
@badams #SEMrushlive
Google AMP Cache
Web server
Edge server
Edge server
Edge server
Edge server
Edge server
Edge server
Edge server
@badams #SEMrushlive
https://developers.google.com/amp/cache/
@badams #SEMrushlive
Caching & Pre-rendering
Website A.. …. …. …. .. …. …. …. ..
Website B.. …. …. …. .. …. …. …. ..
Website C.. …. …. …. .. …. …. …. ..
Google AMP Cache
Pre-render
@badams #SEMrushlive
Caching & Pre-rendering
Website A.. …. …. …. .. …. …. …. ..
Website B.. …. …. …. .. …. …. …. ..
Website C.. …. …. …. .. …. …. …. ..
Google AMP Cache
Pre-render
Defeats Ad Blockers!
@badams #SEMrushlive
AMP in SERPs
@badams #SEMrushlive
AMP vs Mobile Web
@badams #SEMrushlive
AMP Education
@badams #SEMrushlive
“Expanded Exposure”
“Later this year, all types of sites that create AMP pages will
have expanded exposure across the entire Google Mobile
Search results page, like e-commerce, entertainment,
travel, recipe sites and many more. ”
Source: https://webmasters.googleblog.com/2016/09/what-is-amp.html
@badams #SEMrushlive
Implementing AMP
• WordPress;
AMP & PageFrog plugins
• Other platforms:
Forthcoming plugins/extensions
Manual effort
@badams #SEMrushlive
@badams #SEMrushlive
AMP Validator
https://validator.ampproject.org
@badams #SEMrushlive
AMP Validator Plugin
http://bada.ms/ampvalidatorchrome
@badams #SEMrushlive
What works in AMP now:
• Analytics
• Ads (limited)
• Videos
• GIF & WebP animations
• Carousels
• Social Sharing
• Basic Forms
• Basic paywalls
• iframes
• Sidebar
• Notifications
• Live updates
• A/B Testing
@badams #SEMrushlive
What doesn’t work (yet)
• Full end-to-end ecommerce
• Most JS-based interactivity
@badams #SEMrushlive
What’s Coming
AMP + Progressive Web Apps
@badams #SEMrushlive
Further Reading…
• https://www.ampproject.org/
• https://twitter.com/amphtml
• https://ampbyexample.com/
• https://developers.google.com/amp/cache/
• https://github.com/ampproject/amphtml
• https://groups.google.com/forum/#!forum/amphtml-discuss
• https://stackoverflow.com/questions/tagged/amp-html
@badams #SEMrushlive
Thank You
Follow me on Twitter:
@badams
Email me your questions: