Max Prin, Head of Technical SEO, Merkle
@maxxeight
Accelerated Mobile Pages & E-Commerce
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX2
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX
over 60%
of the clicks to AMP in Google search go to non-news sites
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX
over 30%
of the traffic to online stores is from organic search
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX5
Source: Soasta
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX6
Source: Soasta
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX7
Source: Soasta
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX8
Images:
41%
The Total Economic Impact™ of AMP
across publishers and e-commerce
20%
Conversion
10%
Traffic
60%
Pages/visit
AMP for E-commerce
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX11
AgendaCategory Page
<amp-sidebar>
- Navigation
<amp-carousel>
<amp-list>
- Product organization
<amp-form>
- Searching
<amp-bind>
- Filtering and sorting
<amp-access>
- Logged in/out
AgendaProduct Page
<amp-video>
<amp-accordion>
- Product images/details
<amp-form>
<amp-carousel>
- Comments/reviews
<amp-selector>
- Tabs/Thumbnails
<amp-bind>
- Color/size selection
<amp-state>
- Add to cart
AgendaCheckout
Payment Requests API
- Chrome only
<amp-form>
- Checkout within AMP
<amp-install-serviceworker>
- Fast transition to HTML
AgendaDevelopment
Tracking
<amp-analytics>
- Google Analytics, Adobe, etc.
<amp-experiments>
- A/B testing
Compatible to structured data (Schema.org)
Custom JavaScript (coming soon)
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX
Progressive Web AMPs
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX18
Progressive Web AMPs
- AMP pages with PWA features
- AMP as entry point into your PWA
- AMP as data source for your PWA
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX19
AMP as entry point into your PWA
<amp-install-serviceworker>
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX20
AMP as entry point into your PWA
1) User gets the AMP from the SERP
2) Service worker is installed on device
• Once activated, SW caches the
“app shell” and initial data
3) User clicks on a (internal) link
4) Pre-cached PWA loads instantly
“Start fast, stay fast” – Alex Rusell
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX21
AMP as entry point into your PWA
1) User gets the AMP from the SERP
2) Service worker is installed on device
• Once activated, SW caches the
“app shell” and initial data
3) User clicks on a (internal) link
4) SW hijacks the click
5) Pre-cached PWA loads instantly
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX22
The Service-Worker Hijacks The Click
if (request = navigate) {
if (requested page is cached) {serve cached
version}
else {fetch, serve and cache PWA version}
} else {
if (requested URL is cached) {serve cached
version}
else {fetch, serve and cache asset}
}
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX23
PWA + AMP = PWAMP
The AMP framework is
not compatible with
JavaScript frameworks
(e.g. pushState)
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX
What about “SEO”?
AMP is not a ranking factor
A “really fast” site doesn’t rank better than a “fast site”
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX25
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX
What about “SEO”?
AMP is not a ranking factor
A “really fast” site doesn’t rank better than a “fast site”
Faster is better (+ AMP cache/pre-loading)
AMP = mobile-friendly
SERP visibility
Tools & Resources
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX28
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX29
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX30
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX31
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX32
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX33
Max Prin @maxxeight | Engage Conference 2018 #EngagePDX34
Thank you!

Max Prin - Engage 2018 - AMP for E-Commerce

  • 1.
    Max Prin, Headof Technical SEO, Merkle @maxxeight Accelerated Mobile Pages & E-Commerce
  • 2.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX2
  • 3.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX over 60% of the clicks to AMP in Google search go to non-news sites
  • 4.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX over 30% of the traffic to online stores is from organic search
  • 5.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX5 Source: Soasta
  • 6.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX6 Source: Soasta
  • 7.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX7 Source: Soasta
  • 8.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX8 Images: 41%
  • 9.
    The Total EconomicImpact™ of AMP across publishers and e-commerce 20% Conversion 10% Traffic 60% Pages/visit
  • 10.
  • 11.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX11
  • 12.
    AgendaCategory Page <amp-sidebar> - Navigation <amp-carousel> <amp-list> -Product organization <amp-form> - Searching <amp-bind> - Filtering and sorting <amp-access> - Logged in/out
  • 13.
    AgendaProduct Page <amp-video> <amp-accordion> - Productimages/details <amp-form> <amp-carousel> - Comments/reviews <amp-selector> - Tabs/Thumbnails <amp-bind> - Color/size selection <amp-state> - Add to cart
  • 14.
    AgendaCheckout Payment Requests API -Chrome only <amp-form> - Checkout within AMP <amp-install-serviceworker> - Fast transition to HTML
  • 15.
    AgendaDevelopment Tracking <amp-analytics> - Google Analytics,Adobe, etc. <amp-experiments> - A/B testing Compatible to structured data (Schema.org) Custom JavaScript (coming soon)
  • 16.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX
  • 17.
  • 18.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX18 Progressive Web AMPs - AMP pages with PWA features - AMP as entry point into your PWA - AMP as data source for your PWA
  • 19.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX19 AMP as entry point into your PWA <amp-install-serviceworker>
  • 20.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX20 AMP as entry point into your PWA 1) User gets the AMP from the SERP 2) Service worker is installed on device • Once activated, SW caches the “app shell” and initial data 3) User clicks on a (internal) link 4) Pre-cached PWA loads instantly “Start fast, stay fast” – Alex Rusell
  • 21.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX21 AMP as entry point into your PWA 1) User gets the AMP from the SERP 2) Service worker is installed on device • Once activated, SW caches the “app shell” and initial data 3) User clicks on a (internal) link 4) SW hijacks the click 5) Pre-cached PWA loads instantly
  • 22.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX22 The Service-Worker Hijacks The Click if (request = navigate) { if (requested page is cached) {serve cached version} else {fetch, serve and cache PWA version} } else { if (requested URL is cached) {serve cached version} else {fetch, serve and cache asset} }
  • 23.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX23 PWA + AMP = PWAMP The AMP framework is not compatible with JavaScript frameworks (e.g. pushState)
  • 24.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX What about “SEO”? AMP is not a ranking factor A “really fast” site doesn’t rank better than a “fast site”
  • 25.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX25
  • 26.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX What about “SEO”? AMP is not a ranking factor A “really fast” site doesn’t rank better than a “fast site” Faster is better (+ AMP cache/pre-loading) AMP = mobile-friendly SERP visibility
  • 27.
  • 28.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX28
  • 29.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX29
  • 30.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX30
  • 31.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX31
  • 32.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX32
  • 33.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX33
  • 34.
    Max Prin @maxxeight| Engage Conference 2018 #EngagePDX34
  • 35.

Editor's Notes

  • #4 Dave Besbris, VP of Engineering at Google over 31 million domains on the internet publishing AMP and they published over 5 billion pages. recipes, travel, retail, dictionaries, RapGenius…
  • #5 More than 50% of internet traffic (and Google searches) is from mobile devices https://blog.kissmetrics.com/8-important-ecommerce-stats/ : 18,000 plus stores in Yotpo’s database https://www.smartinsights.com/ecommerce/ecommerce-strategy/37-indispensable-ecommerce-stats-to-inform-your-2017-strategy/ 8. Traffic sources. 43% of e-commerce traffic comes from Google search (organic) and 26%  comes from Google Adwords. (Source: Wolfgang digital)
  • #6 https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-load-time/ https://support.google.com/partners/answer/7336278?hl=en https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/ Too fast? error pages AMP is a natural fit for e-commerce because AMP makes web pages fast, and fast pages help with purchase conversions.
  • #7 https://www.soasta.com/blog/spring-2017-online-retail-web-performance/
  • #8 https://www.soasta.com/blog/spring-2017-online-retail-web-performance/
  • #9 http://www.httparchive.org/interesting.php?a=All&l=Feb%2015%202018&s=Top1000 of the top 1M sites Alexa
  • #11 https://amphtml.wordpress.com/2016/08/22/getting-started-with-amp-for-e-commerce/ https://www.ampproject.org/latest/blog/e-commerce-at-the-speed-of-amp/ https://ampbyexample.com/introduction/amp_for_e-commerce_getting_started/ Ebay: http://www.ebaytechblog.com/2016/06/30/browse-ebay-with-style-and-speed/ When the AMP Project first launched, the initial use cases and feature development focused on building AMP to support news and blog content. However, the AMP Project’s ambition has always been making the consumption of any type of mobile content vastly better and faster than we had seen before. Ideally, the format should allow anyone to create high performing websites across many verticals—from news to retail to travel and beyond.
  • #13 https://www.ampproject.org/latest/blog/amp-bind-brings-flexible-interactivity-to-amp-pages/
  • #14 <amp-list> for related products <amp-social-share>
  • #15 <amp-list> for related products <amp-social-share>
  • #17 Still hard to built a full ecom site with AMP: AMP can’t be the full solution for conversions
  • #18 https://www.smashingmagazine.com/2016/12/progressive-web-amps/
  • #19 https://www.ampproject.org/docs/integration/pwa-amp
  • #20 https://www.ampproject.org/docs/integration/pwa-amp
  • #21 https://www.ampproject.org/docs/integration/pwa-amp
  • #22 https://www.ampproject.org/docs/integration/pwa-amp
  • #26 https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
  • #28 https://pwamp.shop
  • #29 https://www.ampproject.org/docs/reference/components
  • #30 https://ampbyexample.com/introduction/amp_for_e-commerce_getting_started/
  • #31 https://validator.ampproject.org/
  • #32 https://technicalseo.com/seo-tools/amp/