Lister les innovations "mobile" en lien avec le SEO.

1. Nicolas Vidal
Innovations “Mobile”
12 Janvier 2018

2. 1. Rappel du contexte
2. Mobile Index First
3. PWA
4. Pages AMP
5. Quelle stratégie mobile ?
Sommaire

3. Rappel du
contexte

4. Rappel du contexte
● Première Question : Au-delà des innovations, quelle est ma stratégie mobile ?
● A chaque support, une utilisation bien précise.
 Le support utilisé doit servir la stratégie mobile et non la définir.
● Bien connaître les personas et répondre efficacement à leurs besoins.
● Confirmer chaque thèse par l'analyse de trafic et la réalisation de tests utilisateurs.
 Prise de décision par la data.
 Nous ne sommes pas l'utilisateur.

5. Mobile Index
First

6. Mobile Index First : Le bouleversement
● Google se met à indexer la version mobile d'un site.
 Considérer la version mobile comme vraiment stratégique.
 Navigation mobile différente de la navigation desktop.
 Version RWD pas suffisante :
 Besoin de corriger les erreurs d'affichage mobile (ascenseur lattéral, taille des
lettres et des espaces, taille des boutons, superposition des éléments etc).
 Offrir au mobinaute une navigation mobile optimale.
 Offrir au mobinaute une expérience utilisateur mobile optimale.

7. Mobile Index First : Cas des sites en RWD
● Le design de la page s'adapte à la largeur de l'écran.
● Pas de détection du type de device nécessaire
(pas de changement de code).
● Google recommande l'utilisation du RWD.
● Pas de changement d'url.
● Compatible avec tous les navigateurs.
● Malus : Non accessible en mode hors connexion.
Ne peut accéder aux fonctions natives du mobile
(appareil photo par exemple).

8. Mobile Index First : Cas des sites en Dynamic Serving
● Même fonctionnement qu'avec le RWD.
● L’url reste identique, mais le code HTML diffère suivant le support utilisé par l’internaute.
● Le serveur web détecte (via l'entête “vary”) le device utilisé afin d'afficher le contenu adapté au
device.
● Quand l'utiliser ? Quand le RWD n'est pas possible.

9. Mobile Index First : Cas de la version mobile dédiée
● Si la version mobile est moins riche que la version desktop, moins travaillée ou moins mise à
jour, il y a de fortes pertes à prévoir.
● Prévoir dans ce cas de passer à la version RWD pour ne plus avoir ce problème de contenu
non mis à jour.
Mobile > Desktop >

10. Mobile Index First : Cas des sites sans version mobile
● Prévoir une version mobile, très vite.
● Penser Mobile First :
Temps de chargement.
Expérience utilisateur.
Richesse des contenus.

11. PWA

12. Qu'est ce que le Progressive Web App?
● Format en RWD alliant technologies web et fonctionnalités des applications mobiles (Site web
offrant des fonctionnalités d'applications).
● Objectif : Améliorer l'expérience utilisateur en réduisant le temps de chargement des pages sur
mobile.
● Pas d’installation particulière car accessible depuis un navigateur.
● Coût plus faible qu'une application.
● Icône accessible depuis l'écran d'accueil du mobile. Réception de push et alertes comme une
application.
● Accessible hors connexion.
● Autant d'interactions que sur une application.
● Gain de référencement.
Attention : Voir l'évolution des usages sur le PWA.

13. Pages AMP

14. Qu'est-ce que l'AMP?
● Elles sont chargées à partir du cache Google > Donc temps de chargement très réduit.
● Toutes les fonctionnalités ralentissant le chargement sont supprimées, les pages sont moins
riches que leur version canonique.
 Amp est plutôt recommandé pour les articles, les blogs et pages de contenus, pas pour
les sites e-commerce.
● Les pages AMP ne sont pas un nouveau support comme le PWA.
● On ne voit pas d'amélioration directe sur le positionnement dans les listes Google.
 Constat : 2 ans après leur sortie, le résultat global en terme de gain de trafic est plutôt
faible.
 Constat 2 : Intéressant pour les sites dont le temps de chargement ne parvient pas à
baisser.

15. En bref
● Mobile Index First : Nécessité absolue de se préparer à cette bascule.
● AMP : Intéressant mais plus si prioritaire.
● Application : Valable pour un service précis avec un usage récurrent et un budget important.
● PWA : Démarche mobile first et UX efficace, tout en conservant le référencement.
Intéressant à tester. A confirmer selon les besoins des personas.

16. Quelle stratégie
mobile ?

17. Zoom sur l'application
● Visible sur smartphone ou tablette. Non accessible depuis un ordinateur.
● Nécessite une installation sur device.
 Téléchargée depuis Google Play ou Apple Store.
 Doit être conforme aux règles du store.
● S'utilise également hors connexion.
● Nombreuses interactions possibles avec l'utilisateur (alertes, push, fonctions mobiles).
● Coût élevés à prévoir (développements propres à chaque plateforme).
● Valable : Pour un service précis avec un usage récurrent et un budget important.

18. Zoom sur le site mobile
● Efficace pour le référencement.
● Coût plus faible que pour une application.
● Volume d'interactions plus faible que pour une application.
● Utilisable par n'importe qui, n'importe où.
● Pas de mises à jour à installer.
● Expérience utilisateur mobile plus ou moins approfondie selon les développements.
● Valable : pour des services étendus, amenés à évoluer, utilisés ponctuellement, contenus déjà
disponibles en desktop mais avec une expérience utilisateur propre au mobile.

19. Quelle stratégie mobile?
● Concernant l’utilisation d’un site mobile, d’une application ou d’une PWA, il n’y a pas de bonne
réponse (chacune ayant ses avantages et ses inconvénients), mais le but reste d’accéder à un
outil adapté aux besoins de ses personnas.
 Ma cible est-elle mobile?
 Comment est équipée ma cible?
 Quel budget de développement allouer à mon support?
 De quelles fonctionnalités a besoin ma cible?
 Quel est mon objectif en développant une PWA / appli ?
 La PWA / appli correspond-elle aux besoins de ma cible?
 Aurai-je de la valeur ajoutée en créant une application en plus de mon site web?

20. Outils

21. Outils
• Test d'optimisation mobile :
https://search.google.com/test/mobile-friendly?hl=fr
• Documentation officielle AMP :
https://support.google.com/webmasters/answer/6340290?hl=fr
• Guide de création de page AMP :
https://www.ampproject.org/fr/docs/tutorials/create
• Guide technique AMP :
https://www.ampproject.org/docs/guides/responsive_amp.html
• Test de validation des pages AMP :
https://search.google.com/test/amp
https://validator.ampproject.org/

22. MERCI