Créer une experience robot autant optimisée que celle des utilisateurs. Comment intégrer les Progressive Web Apps (PWA) avec le format AMP (Accelerated Mobile Pages) afin de créer une expérience utilisateur optimale, depuis les moteurs de recherche jusqu’à la conversion? Durant cette session, nous nous concentrerons sur les avantages, les limitations mais également sur l’implémentation technique des deux technologies sur les mêmes URLs. 
Le but ultime étant d’optimiser l’experience des robots (exploration, indexation) autant que l’experience utilisateur à travers un chargement rapide et des fonctionnalités avancées.

1. @maxxeight#SearchY2020
7 Février 2020 | Paris - Bercy
L’Événement Search Marketing
PARIS 2020

2. @maxxeight#SearchY2020
PWA + AMP
Créer une experience robot autant
optimisée que celle des utilisateurs

3. @maxxeight#SearchY2020
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Max Prin",
"url": "https://maxprin.com",
"jobTitle": "Head of Technical SEO",
"worksFor": "Merkle",
"sameAs": [
"https://twitter.com/maxxeight",
"https://www.linkedin.com/in/maxprin"
]
}
</script>

4. @maxxeight#SearchY2020
Une experience utilisateur… que Google peut comprendre.
• Pertinent
• Mobile-Friendly
• Rapide
• Securisé
• Populaire
Un bon référencement naturel est basé sur:
• Contenu
• Web Design
• Vitesse du site
• SSL/HTTPS
• Liens

5. @maxxeight#SearchY2020
Une experience utilisateur… que Google peut comprendre.
• Pertinent
• Mobile-Friendly
• Rapide
• Securisé
• Populaire
Un bon référencement naturel est basé sur:
• Contenu
• Web Design
• Vitesse du site
• SSL/HTTPS
• Liens

6. @maxxeight#SearchY2020

7. @maxxeight#SearchY2020

8. @maxxeight#SearchY2020

9. @maxxeight#SearchY2020

10. @maxxeight#SearchY2020
Contenu “caché” <picture> and srcset
Onglets
Accordéons
“Lire la suite”
Quand chargé automatiquement
(vs. clic de l’utilisateur)
Design adapté optimisé pour mobiles
<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png" alt="large PNG image...">
</picture>
<img srcset="example-320w.jpg 320w,
example-480w.jpg 480w,
example-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="example-800w.jpg" alt="responsive web!">

11. @maxxeight#SearchY2020
Native apps
Web apps

12. @maxxeight#SearchY2020
Fiable et rapide Engageant
• Mobile-Friendly
• Rapide*
• Securisé (HTTPS)
Progressive Web Apps
• Icône (home)
• Notifications (push)

13. @maxxeight#SearchY2020
Exploration et rendu
• Googlebot “à la page”
• Lazy Loading
• Contenu “onclick”
• + liens (mega menu, etc.)
Progressive Web Apps

14. @maxxeight#SearchY2020
Lazy Loading (Images)

15. @maxxeight#SearchY2020
Testing the IntersectionObserver

16. @maxxeight#SearchY2020
Testing the IntersectionObserver

17. @maxxeight#SearchY2020
Accelerated Mobile Pages
AMP HTML+JS AMP Cache (CDN) Pre-loading

18. @maxxeight#SearchY2020
L’URL AMP ”Réelle” avec les Échanges Signés

19. @maxxeight#SearchY2020
Javascript Personnalisé dans AMP avec <amp-script>
Restrictions
• 10 000 octets maximum par <amp-script>
• 150 000 octets maximum pour le total des
<amp-script> dans la page

20. @maxxeight#SearchY2020
AMP pour le E-Commerce
<amp-sidebar>
- Navigation
<amp-carousel>
<amp-list>
- Organisation des produits
<amp-form>
- Recherche
<amp-bind>
- Filtrage et tri
<amp-access>
- Connection
<amp-accordion>
- Images/details
<amp-form>
<amp-carousel>
- Commentaires/avis
<amp-selector>
- Onglets/Vignettes
<amp-bind>
- Selection couleur/taille
<amp-state>
- Ajouter au panier

21. @maxxeight#SearchY2020
Achat/Paiements dans AMP
PaymentRequest API
- Seulement avec Chrome
<amp-form>
- Information (nom, addresse, etc.) mais
pas de paiement
Rediriger les visiteurs vers le site…

22. @maxxeight#SearchY2020
AMP
Français
m.
Français
m.
Anglais
Desktop
Français
Desktop
Anglais
rel="amphtml"
rel="amphtml"
rel="amphtml"
rel="canonical"
rel="amphtml"
rel="canonical"
rel="canonical"
rel="alternate"
rel="canonical"
rel="alternate"
rel="alternate" hreflang=”fr"
rel="alternate" hreflang="en"
rel="alternate" hreflang=”fr"
rel="alternate" hreflang="en"
rel="alternate" hreflang=”fr"
rel="alternate" hreflang="en"
AMP
Anglais

23. @maxxeight#SearchY2020
Desktop
Français
Desktop
Anglais
rel="alternate" hreflang=”fr"
rel="alternate" hreflang="en"

24. @maxxeight#SearchY2020
AMP: Acquisition Initiale PWA: Interactivité/Engagement
• SERP
• Chargement instantané
• Fonctionnalités limitées
Comment obtenir le meilleur des deux?
• Fonctionnalités avancées
• Dynamique
• Lent la 1ere visite

25. @maxxeight#SearchY2020
Combiner AMP et PWA
AMP comme
point d'entrée
dans la PWA
AMP comme
source de
données pour
la PWA
AMP avec des
fonctionnalités
PWA

26. @maxxeight#SearchY2020
AMP comme point d'entrée dans la PWA
<amp-install-serviceworker>

27. @maxxeight#SearchY2020

28. @maxxeight#SearchY2020
AMP et PWA avec les même URLs?

29. @maxxeight#SearchY2020
AMP
Français
m.
Français
m.
Anglais
rel="amphtml"
rel="amphtml"
rel="amphtml"
rel="canonical"
rel="amphtml"
rel="canonical"
rel="canonical"
rel="alternate"
rel="canonical"
rel="alternate"
rel="alternate" hreflang=”fr"
rel="alternate" hreflang="en"
rel="alternate" hreflang=”fr"
rel="alternate" hreflang="en"
AMP
Anglais
Desktop
Français
Desktop
Anglais
rel="alternate" hreflang=”fr"
rel="alternate" hreflang="en"

30. @maxxeight#SearchY2020
self.addEventListener('fetch', event => {
if (event.request.mode === 'navigate') {
event.respondWith(
fetch(event.request.url + '?pwa=true')
);
} else {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
}
});
service-worker.js

31. @maxxeight#SearchY2020
RewriteEngine on
RewriteCond %{QUERY_STRING} pwa=true [OR]
RewriteCond %{HTTP_REFERER} ^https://pwamp.site/.* [OR]
RewriteCond %{HTTP_REFERER} ^https://pwamp-site.cdn.ampproject.org/.*
RewriteRule (.*) /pwa.php [L]
.htaccess

32. @maxxeight#SearchY2020

33. @maxxeight#SearchY2020
Les page AMP ne sont pas rendues
• Bots voient seulement <amp-img> (vs. <img>)
• Pas d’access à l’URL dans src=“”
•
• Utilisez <noscript>
Les images AMP ne sont pas indexable

34. @maxxeight#SearchY2020
“Et pour le SEO?”
Les robots ne crawlent/indexent que la version AMP
Pas de gaspillage des resources (crawler plusieurs URLs avec le meme contenu)
Signaux clairs (pas de sourcis de balise canonical/alternate)
Les pages rapide et pre-chargées dans la SERP (AMP viewer ou “URL Réelle”)
Les pages sont “adaptées aux mobiles”

35. @maxxeight#SearchY2020
PWAMP - Examples et Resources
https://pwamp.site https://www.howpwampworks.com (by @aleyda)

36. @maxxeight#SearchY2020technicalseo.com/tools/

37. @maxxeight#SearchY2020
Merci!