5. Max Prin @maxxeight5 #
AMP
English
m.
English
m.
French
Desktop
English
Desktop
French
rel="amphtml"
rel="amphtml"
rel="amphtml"
rel="canonical"
rel="amphtml"
rel="canonical"
rel="canonical"
rel="alternate"
rel="canonical"
rel="alternate"
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
AMP
French
6. 6 Max Prin @maxxeight #
0.0
0.5
1.0
1.5
2.0
2.5
3.0
2010 2011 2012 2013 2014 2015 2016 2017 2018
Billions
Western Europe
North America
Middle East & Africa
Latin America
Central & Eastern Europe
Asia-Pacific
Source: Mobile Internet Users, eMarketer, January 2018
Worldwide Mobile Internet Users
7. 7 Max Prin @maxxeight #
However, mobile phones…
…have smaller screens
(less space for content)
…are slower
(less processing power, memory)
…can have weak connections
(3G, 4G < Cable, Fiber)
12. Max Prin @maxxeight12 #
AMP
English
m.
English
m.
French
Desktop
English
Desktop
French
rel="amphtml"
rel="amphtml"
rel="amphtml"
rel="canonical"
rel="amphtml"
rel="canonical"
rel="canonical"
rel="alternate"
rel="canonical"
rel="alternate"
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
AMP
French
13. Max Prin @maxxeight13 #
Website
English
Website
French
rel="alternate" hreflang="en"
rel="alternate" hreflang="fr"
15. 15 Max Prin @maxxeight #
Why are AMPs so fast? (in a nutshell)
AMP HTML+JS AMP Cache (CDN) Prerendering
16. Max Prin @maxxeight | #brightonSEO
over 60%
of the clicks to AMP in Google search go to non-news sites
17. 17 Max Prin @maxxeight #
89%
6%
5%
Websites without AMP
Websites with AMP errors
Websites without AMP errors
Out of ~1000 online stores (picked globally, by traffic)
18. Max Prin @maxxeight | #brightonSEO
Agenda
Max Prin @maxxeight | #brightonSEO
Category page
<amp-sidebar>
- Navigation
<amp-carousel>
<amp-list>
- Product organization
<amp-form>
- Searching
<amp-bind>
- Filtering and sorting
<amp-access>
- Logged in/out
19. Max Prin @maxxeight | #brightonSEO
Agenda
Max Prin @maxxeight | #brightonSEO
Product 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
20. Max Prin @maxxeight | #brightonSEO
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
21. 21 Max Prin @maxxeight #
AMP documentation
https://www.ampproject.org/docs/reference/components https://www.ampbyexample.com
22. 22 Max Prin @maxxeight #
AMP tools
https://search.google.com/test/amp https://technicalseo.com/seo-tools/amp/
24. Max Prin @maxxeight | #brightonSEO
Agenda
Max Prin @maxxeight | #brightonSEO
Checkout
Payment Requests API
- Chrome only
<amp-form>
- Checkout within AMP?
29. Max Prin @maxxeight | #brightonSEO
Progressive Web Apps AMPs
(the ultimate configuration)
30. 30 Max Prin @maxxeight #
AMP as entry point into your PWA
<amp-install-serviceworker>
31. 31 Max Prin @maxxeight #
AMP as entry point into your PWA
32. 32 Max Prin @maxxeight #
The service worker “hijacks” the click – The server handles the rest of the magic
if (event.request.mode === 'navigate') {
event.respondWith(
fetch(event.request.url + '?pwa=true')
);
}
RewriteEngine on
RewriteCond %{QUERY_STRING} pwa=true
RewriteRule (.*) /pwa.php [L]
34. Max Prin @maxxeight | #brightonSEO
What about “SEO”?
Bots only crawl/index the AMP version of your pages
No waste of resources crawling multiple URLs for the same content
Clear signaling (i.e. don’t worry about your canonical tags)
Pages are fast and preloaded in the SERP (AMP viewer)
Pages are mobile-friendly
35. 35 Max Prin @maxxeight #
PWAMP examples and resources
https://pwamp.shop https://www.howpwampworks.com (by @aleyda)
How can Progressive Web Apps (PWA) and Accelerated Mobile Pages (AMP) work together to create an optimal user experience, from search to conversion? The idea behind this potential strategy (PWA + AMP) is based on the recent enhancements of the AMP framework for retail websites with new features allowing purchasing, related-products widgets, product and category pages etc. “PWAMP” might be the future of e-commerce by leveraging AMP for search visibility and CTR and PWA for user experience and conversion.
John Audette, Adam Audette, Jeremy Sanchez, Marshall Simmonds, Derek Wheeler, Bill Hunt
Page > Internet > Directory > Index > Rank (before scaled crawl)
https://ampbyexample.com/introduction/internationalization/
Moving with the changes, be where the users and customers are: on their phones.
3 Billion = 40% world population
Smartphones are cheaper, portable (convenient)
Some country are mobile-only.
This, on top of websites not well optimized for speed, leads to.. Higher bounce rates and lower conversion rates.
About 30% in the UK, making Amazon the 5th larger retailer.
Let’s talk about competing with Amazon, in the Search results!
2 birds one stone! Guess what? Search engines reward websites providing a good user experience! As long they can understand it!
Its not just about the mobile, or speed, or UX, or just about the user for that matter
- The user experience starts in search – ~30% of traffic to online retailers come from Organic search!
It’s also about the bots: Search Experience Optimization: making sure bot understand the experience.
=> Creating a fast and reliable experience, from search results to conversion, that search engines can understand.
One fast (+ great UX) website, one set of URLs for EVERYTHING (except language/country variations): Desktop, mobile, tablet, AMP, iOS and Android. AND FOR BOTS TO CRAWL/INDEX/RANK
https://www.ampproject.org/learn/about-how/
https://medium.com/@cramforce/why-amp-is-fast-7d2ff1f48597
Lazy loading
Extensive use of preconnect
Prefetching of lazy loaded resources
All async JavaScript
Inline style sheets
Zero HTTP requests block font downloads.
Instant loading through prerendering
Prerendering only downloads resources above the fold
Prerendering does not render things that might be expensive in terms of CPU
Intelligent resource prioritization
Uncoupling of document layout from resource downloads
Maximum size for style sheet
FastDOM-style DOM change batching
Optimized for low count of style recalculations and layout
Mitigations for third party JS worst-practices such as document.write
Runtime cost of analytics instrumentation is independent of number of used analytics providers
Extensions don’t block page layout
CDN delivery available to all AMP documents
All resources and the document are loaded from the same origin through the same HTTP 2.0 tunnel
Animations can be GPU accelerated
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…
<amp-list> for related products
<amp-social-share>
Find out if the necessary features on your pages can be implemented with AMP components
AMP by itself is not the solution:
Still hard to built a full ecom site with AMP: custom JS, checkout, etc. AMP can’t be the full solution for conversions
Why is the reach of web apps higher? Search engines (vs. app stores).
Supported by all major browsers
Low cost of acquisition
Why is the reach of web apps higher?
Search engines (vs. app stores) – low cost of acquisition
Supported by all major browsers
Capabilities
Reliable and Fast
App shell cached locally (on 1st load): Fast loading when offline or with slow connection (on subsequent loads)
Mobile-friendly (responsive)
Secure (HTTPS)
Engaging
App icon on device’s home screen
Push notifications
No need to be indexed
https://www.ampproject.org/docs/integration/pwa-amp
https://www.ampproject.org/docs/integration/pwa-amp/amp-to-pwa
- AMP for initial user acquisition
AMP is an ideal solution for so-called leaf pages, content pages that your users discover organically through a search engine, a shared link by a friend or through a link on another site. Because of AMP's specialized pre-rendering, AMP pages load extremely fast, which in return means much less drop off (the latest DoubleClick study shows that more than 53% of all users will drop off after 3 seconds).
- PWA for rich interactivity and engagement
Progressive Web Apps, on the other hand, allow for much greater interactivity and engagement, but do not have the instant first-load characteristics of an AMP page. At their core is a technology called Service Worker, a client-side proxy that allows you to cache all sorts of assets for your pages, but said Service Worker only activates after the first load.
As an entry point because you don’t need amp outside of search results: yes they’re fast but your site can be as fast (+ CDN + caching) and subsequent visited pages, even if AMP, won’t be pre-rendered/pre-loaded in the browser like they are in Google search (in the AMP viewer)
https://www.ampproject.org/docs/integration/pwa-amp
User gets the AMP from the SERP
Service worker is installed on device
Once activated, SW caches the “app shell” and initial data - Appl shell: web app – js framework, pushstate, etc..
User clicks on a (internal) link
Service worker “hijacks” the click
Pre-cached PWA loads instantly