Après des années de conflits et de divergence d’intérêt, UX Designer et SEO s’allient aujourd’hui pour poursuivre un but commun : la satisfaction de l’internaute, le fameux « Think User »
L’objectif commun est de trouver un équilibre entre une bonne stratégie SEO et une expérience de marque.
2. @Adele_delourme @GuilhemChauvin
Mais t’es qui toi ?
Nice to meet you !
2
Adèle Delourme
Chef de projet SEO
@Adele_delourme
Guilhem Chauvin
Chef de projet SEO
@GuilhemChauvin
4. @Adele_delourme @GuilhemChauvin
Pour commencer…
4
Deux visions opposées?
# UX # SEO
Faut que ça soit
beau et à la
pointe de
l’innovation !
Faut que ça
rank et que ça
génère de la
perf’
Développement du site
Optimisation SEO
7. @Adele_delourme @GuilhemChauvin
1- L’écoute utilisateur
Que recherchent vraiment vos utilisateurs ?
# S’affranchir de ses aprioris : ne
soyez pas des sachants !
# Des cibles différentes
# Un vocabulaire différent
7
Demandez leur directement !
14. @Adele_delourme @GuilhemChauvin
1- L’écoute utilisateur
Quel métier exerce ce charmant jeune homme ?
14
Pisciniste ?
Vendeur de piscine ?
Fabricant de
piscine ?
Constructeur
de piscine ?
15. @Adele_delourme @GuilhemChauvin
1- L’écoute utilisateur
Quel métier exerce ce charmant jeune homme ?
15
Pisciniste ?
Vendeur de piscine ?
Fabricant de
piscine ?
Constructeur
de piscine ?
Piscinier ?
17. @Adele_delourme @GuilhemChauvin
1- L’écoute utilisateur
Comment vous perçoivent-ils ?
# Internet fait tomber les barrières et
permet une amplification du bouche à
oreille
# L’internaute s’exprime tout le temps
et partout
# Du bruit négatif qui prend de plus en
plus de place dans les résultats
naturels
17
Surveillez votre E-réputation !
20. @Adele_delourme @GuilhemChauvin
2 – L’architecture du site & la conception
20
# La conception, c’est plus efficace à deux (ou plus..) !
L’union fait la force !
22. @Adele_delourme @GuilhemChauvin
2 – L’architecture du site & la conception
22
# Chacun sa route, chacun son chemin !
A chaque page son mot clé !
23. @Adele_delourme @GuilhemChauvin
2 – L’architecture du site & la conception
23
# Ne choisissez pas forcement le CMS à la mode !
Le choix du socle technique
25. @Adele_delourme @GuilhemChauvin
3- La navigation : s’aimer jusqu’à l’impossible !
25
# Proposer une vision d’ensemble du contenu à l’internaute
# Valoriser la navigation en silo & faciliter le crawl et l’indexation pour les robots
L’avènement du méga-menu : une aubaine pour le SEO…
26. @Adele_delourme @GuilhemChauvin
3- La navigation : s’aimer jusqu’à l’impossible !
Moteurs de recherche interne & navigation à facette : de la data pour le SEO…
# Récupérer de la data concernant les
recherches des internautes
# Exploiter ces données pour créer de
nouvelles pages dédiées
# Exploiter ces données pour
envisager de nouvelles offres !
26
Le petit + : les microdonnées !
27. @Adele_delourme @GuilhemChauvin
3- La navigation : s’aimer jusqu’à l’impossible !
Moteurs de recherche interne & navigation à facette : de la data pour le SEO…
27
28. @Adele_delourme @GuilhemChauvin
3- La navigation : s’aimer jusqu’à l’impossible !
Moteurs de recherche interne & navigation à facette : de la data pour le SEO…
28
29. @Adele_delourme @GuilhemChauvin
3- La navigation : s’aimer jusqu’à l’impossible !
29
# Croiser vos données : proposer les bons produits aux bons endroits, les bons
conseils aux bons moments !
Cross selling & contenu affinitaire : des mots, toujours des mots…
30. @Adele_delourme @GuilhemChauvin
3- La navigation : s’aimer jusqu’à l’impossible !
30
# Croiser vos données : proposer les bons produits aux bons endroits, les bons
conseils aux bons moments !
Cross selling & contenu affinitaire : des mots, toujours des mots…
31. @Adele_delourme @GuilhemChauvin
3- La navigation : ne vous laissez pas avoir par les sentiments !
Moteurs de recherche interne & navigation à facette : de la data pour le SEO…
# Opter pour l’infinite scroll pour faire
plaisir à l’utilisateur ? Ok ! Mais qu’en
est-il d’un point de vue SEO ?
# Intégrer un système de pagination
avec URL unique : ajouter les balises
rel=prev et rel=next dans le <head> de
chacune des pages
31
La démo qui va bien :
http://scrollsample.appspot.com/items
32. @Adele_delourme @GuilhemChauvin
3- La navigation : ne vous laissez pas avoir par les sentiments !
Contenu caché : pas vu, pas pris ?
# Opter pour un système de contenu à
onglet ou de contenu déroulant user-
friendly ? Yes ! Mais qu’en pense
vraiment Google ?
32
33. @Adele_delourme @GuilhemChauvin
3- La navigation : ne vous laissez pas avoir par les sentiments !
Contenu caché : pas vu, pas pris ?
# Opter pour un système de contenu à
onglet ou de contenu déroulant user-
friendly ? Yes ! Mais qu’en pense
vraiment Google ?
# « Les contenus accessibles après un
clic supplémentaire au sein d’une
même page ne seraient
potentiellement plus indexés par les
robots de Google » J.M. 2014
33
Qu’en est-il vraiment ? Qu’est-
ce que je fais quoi ?
37. @Adele_delourme @GuilhemChauvin
4 – Le temps de chargement et le mobile
37
# Capter l’intérêt du visiteur et améliorer sa perception de la vitesse
# Diminuer au maximum le temps de réponse du serveur pour faciliter l’indexation
Faire monter la température pour atteindre le sommet !
38. @Adele_delourme @GuilhemChauvin
4 – Le temps de chargement et le mobile
3 étapes de chargement, 3 moyens d’être plus performant !
38
# Time to First Byte (TTFB)
Chargement du 1er octet
200 millisecondes
39. @Adele_delourme @GuilhemChauvin
4 – Le temps de chargement et le mobile
3 étapes de chargement, 3 moyens d’être plus performant !
39
# Time to First Byte (TTFB)
Chargement du 1er octet
200 millisecondes
# Start Render
Affichage du 1er élément
1 seconde
40. @Adele_delourme @GuilhemChauvin
4 – Le temps de chargement et le mobile
3 étapes de chargement, 3 moyens d’être plus performant !
40
# Time to First Byte (TTFB)
Chargement du 1er octet
200 millisecondes
# Start Render
Affichage du 1er élément
1 seconde
# Visually Complete
Chargement terminé
3 secondes
41. @Adele_delourme @GuilhemChauvin
4 – Le temps de chargement et le mobile
Se donner les moyens d’atteindre les sommets !
# Prioriser l’affichage du contenu
# Garder un style commun au dessus
de la ligne de flottaison
# Utiliser des CDN
# Compresser les ressources
41
« DareBoost, un outil breton
qu’on aime bien se servir »
F.Ribéry
42. @Adele_delourme @GuilhemChauvin
4 – Le temps de chargement et le mobile
Etre performant sur tous les terrains !
# Avril 2015 : la compatibilité mobile,
critère de positionnement sur les
résultats mobiles
# Février et Juin 2015 : les mentions
« slow » en test dans les SERP
mobiles
# Octobre 2015 : Accelerated Mobile
Pages (AMP), solution open source
permettant l’accélération de l’affichage
sur mobile.
42
Index & critères exclusifs pour
mobile ?
44. @Adele_delourme @GuilhemChauvin
5- Rich content & medias : joindre l’utile à l’agréable
Ce que veulent les internautes…
# De l’info fraiche
# Des réponses pertinentes et rapides
# De l’images, des schémas, des
infographies
# De la vidéo
44
Et des chatons !
48. @Adele_delourme @GuilhemChauvin
5- Rich content & medias : joindre l’utile à l’agréable
… Ce que propose Google
48
Réponse rapide
Images
Vidéo
Réponse
pertinente
49. @Adele_delourme @GuilhemChauvin
5- Rich content & medias : joindre l’utile à l’agréable
… Ce que propose Google
49
Réponse rapide
Images
Vidéo
Réponse
pertinente
Actus
50. @Adele_delourme @GuilhemChauvin
5- Rich content & medias : joindre l’utile à l’agréable
50
# Qui a dit qu’on ne pouvait pas plaire à tout le monde ?
… Ce que votre site doit proposer !
51. @Adele_delourme @GuilhemChauvin
5- Rich content & medias : joindre l’utile à l’agréable
… Ce que votre site doit proposer !
# Galerie d’images
# Caractéristiques
# Aperçu sonore
# Vidéos de mise en situation
# Représentation graphique /
schématique
# Artistes utilisant le produit
# Comparatif produits
51
Seymourduncan.com
52. @Adele_delourme @GuilhemChauvin
5- Rich content & medias : joindre l’utile à l’agréable
… et n’oubliez pas les microdonnées !
52
# Renvoyer les bons signaux aux
moteurs de recherche à propos de
votre entreprise et de votre contenu
# Accroitre votre visibilité en Rich
Snippet et/ou Knowledge Graph
# S’appuyer sur la notice schema.org
pour utiliser les microdonnées qui vont
bien.
Faites-vous remarquer !
54. @Adele_delourme @GuilhemChauvin
6 – Le Store Locator et le SEO Local
Toujours plus haut, toujours plus fort !
54
# 2010 : Personnalisation progressive
des résultats de recherche
# Juin 2015 : lancement de Google
Pigeon, impactant les résultats GMaps
et les résultats de Google.
# Août 2015 : baisse du nombre de
résultats du « pack local » dans les
SERP. Disparition du lien vers la fiche
Google +.
Mais finalement, c’est qui le
pigeon ?
55. @Adele_delourme @GuilhemChauvin
6 – Le Store Locator et le SEO Local
Développer votre store locator
55
#Un annuaire de vos
établissements SEO & mobile
friendly
#Avec des pages dédiées par
régions/villes ciblées
#Et des fiches établissements optimisées
56. @Adele_delourme @GuilhemChauvin
6 – Le Store Locator et le SEO Local
Et devenez une star locale !
56
# Utiliser Google My Business pour
chaque implantation
# Alimenter vos fiches Google My
Business
# Développer votre maillage local
# S’inscrire sur des annuaires et sites
d’avis (re)connus : Pages Jaunes, Yelp
etc.
58. @Adele_delourme @GuilhemChauvin
7 – La mesure de l’UX
58
# A votre avis, quel site obtient les meilleurs statistiques « d’engagements » ?
Un engagement qui reflète la satisfaction de l’utilisateur ?
# Voyages SNCF # Capitain Train
59. @Adele_delourme @GuilhemChauvin
7 – La mesure de l’UX
59
# Force est de constater qu’un site qui performe présente quelques fois des indicateurs
« d’engagement non prioritaires » à la baisse !
Sortez des sentiers battus !
# Voyages SNCF # Capitain Train
60. @Adele_delourme @GuilhemChauvin
7 – La mesure de l’UX
60
# Avez-vous identifié un objectif prioritaire à votre site Web ? Est-ce le temps d’exposition à
la marque ? Les interactions ? Le recrutement Web Social ? La génération de leads
commerciaux ?
Concentrez-vous sur les KPIs qui vous concernent !
# Voyages SNCF
61. @Adele_delourme @GuilhemChauvin
7 – La mesure de l’UX
61
# Qui êtes-vous ? D’où venez-vous ?
Que cherchez-vous ? L’avez-vous trouvé facilement ?
Pourquoi ne pas poser la question à vos visiteurs?
# Voyages SNCF
64. @Adele_delourme @GuilhemChauvin
Pour finir …
Pas encore prêt pour le mariage ?
64
# Certaines pratiques UX posent
quelques problèmes de SEO (Ajax,
lazy loading…)
# Certaines pratiques SEO posent des
problèmes à l’UX (contenu trop dense,
page pensée pour « ranker »…)
Suis moi je te fuis, fuis moi je
te suis !
On a souhaitez mettre en avant 7 points où SEO & UX peuvent travailler ensemble ou du moins où les 2 disciplines se rejoignent !
Si on fait un rapide état des lieux sur ce que sont ces deux disciplines et la vision qu’on en a historiquement
Discipline historiquement opposés
Conflits et divergence d’intérêts
Vision encore rependue d’un projet web : UX, Créa, puis SEO
Aujourd’hui, UX & SEO tendent vers un but commun : la satisfaction de l’internaute
Think user : plaire à Google, qui veut lui même plaire aux internautes
Le SEO est de + en + intégré au cœur d’un projet web : en amont, pendant le dév et après (suivi)
Si on rentre dans le vif du sujet, la première étape où SEO et UX doivent travailler ensemble selon nous, c’est l’écoute utilisateur
# Des cibles différentes : clients finaux, commerciaux, services techniques…
# Un vocabulaire différents selon les origines géographiques, l’âge de la cible, sa maturité dans le secteur d’activité concerné…
Allez écoutez votre utilisateur, c’est sur ces bases que ce fondra votre site !
Si on prend un exemple produit
Ok, l’exemple crayon de bois il est facile, mais si on prend un vrai cas concret métier / expertise
Certainement aucun de tout ça ! Maitre nageur à la rigueur !
# Outils : Google adwords keyword planner, Uber suggest, yooda insght, myposeo, semrush, search console
#Interview des différentes parties prenantes du projet
#observer l’utlisateur sur le site existant : combien de requêtes pour arriver sur le site, quelles requêtes ?
# amplification du bouche à oreille > Besoin de rassurance sur les marques et enseignes
# L’internaute s’exprime tout le temps et partout : avis, commentaires, blogs perso, Twitter…
# Du bruit négatif qui prend de plus en plus de place dans les résultats naturels : Google Actus, sites de presse, forum, site d’avis…
Comme quoi il est primordial de connaître non seulement les requêtes stratégiques qui peuvent permettre d’arriver sur votre site mais aussi savoir tout le bruit qu’il peut y avoir autour de votre marque !
Après la phase d’écoute, on ne fonce pas tête baisser. Une bonne conception se fait là encore conjointement avec les UX… et avec le client !
Ne pas foncer tête baissée !
Si pas de temps : questionnaire marketing, pour cerner le projet, ses enjeux et l’attente du client
Si temps : atelier de co-conception (workshop, war room…)
Penser à échanger avec vos collègues / clients pour alimenter votre réflexion !
Une fois la recherche de mots clés effectué…
Faire l’exercice d’attribution / ventilation des mots clés sur chaque page / rubrique
Est ce que tous mes mots clés ont une page dédiée? Manque t’il des pages? Les rubriques sont elles bien nommées?
La encore, ne pas foncer tête baissée et se poser les bonnes questions.. En s’entourant des bonnes personnes
Quels fonctionnalité? Quelle souplesse d’admin / MaJ? Quels évolutions?
Https? Multilingues? E-commerce? Multi sites / domaines?
Donc entourez-vous des bonnes personnes pour prendre les bonnes décisions et anticiper aux maximums les évolutions !
Maintenant qu’on a déterminé l’arborescence il va falloir se pencher sur l’utilisation du site même et donc la navigation au sein du site
Faciliter l’accès aux pages profondes pour les internautes et pour les robots d’indexation
Et bien sûre développer le maillage interne !
Exploiter ces données pour créer de nouvelles pages dédiées et cibler, entre autre, la longue traîne !
Les Ménuires propose un module de recherche affinitaire avec la fréquence de venue, le profil de l’internaute, ect
Ouest France propose un moteur de recherche multi critère tout ce qu’il y a de plus classique
Mais traite très bien les pages de réponses en page dédiée avec H1 et Title personnalisés
Permet d’intégrer des liens internes contextuels qui auront toute légitimité pour l’internaute et qui porteront votre référencement !
Sephora propose du conseil en affinité avec la catégorie de produit sur laquelle on se situe
Et sur les fiches conseils, il nous propose le produit qui va bien !
# L’infinite scroll est un système de navigation très plébiscité par les ux depuis quelque temps
# Intégrer un système de pagination avec URL même invisible pour indexer chaque page et faciliter le crawl des robots
# Gagner en temps de chargement avec le lazy loading pour ses images est-il vraiment SEO Friendly ?
De la même manière, les UX sont plutôt partisans de ne pas proposer tout le contenu dès le premier affichagem ais de plutot de l’organiser en onglet ou contenu déroulllant
D’après Google, les contenus non visible au premier affichage (sans clic supplémentaire) ne serait pas indexé.
Ah oui vraiment ?!
On a fait le test sur du contenu à onglet et c’est parfaitement indexé !
Maintenant si je veux vraiment avoir les fesses propres et montrer patte blanche :
soit j’affiche tout et j’opte pour l’infinite scroll (mais c’est pas non plus ce que préfère Google !)
Soit je privilégie mon contenu stratégique en premier plan (sans clic supplémentaire) et le contenu secondaire dans les onglets et contenu déroulant (ex : des fiches produits avec onglet pour livraison..)
Mais encore une fois, pas d’inquiètude, google lit bien et indexe le contenu déroulant ! Testé et approuvé avec Interflora
Faciliter la navigation de l’internaute, c’est facilité le crawl des robots de Google !
Maintenant si je veux vraiment montrer patte blanche à Google :
soit j’affiche tout et j’opte pour l’infinite scroll (mais c’est pas non plus ce que préfère Google !)
Soit je privilégie mon contenu stratégique en premier plan (sans clic supplémentaire) et le contenu secondaire dans les onglets et contenu déroulant (ex : des fiches produits avec onglet pour livraison..)
Au dela travailler la navigation en tant que telle sur le site, il est important de veiller au confort de l’internaute et à la fluidité du site via notamment l’optimisation du temps de chargement
L’objectif est double :
capter l’utilisateur ou du moins l’empécher de fuir avec un affichage trop long
Faciliter l’indexation du site avec un site léger
Le chargement du 1er octet qui correspond au temps de réponse du serveur
L’affichage du premier élément : premier pixel, affichage du logo… premier signe de vie de votre site aux yeux de l’internaute ! Hyper important !
> Définir les éléments qui doivent s’afficher en priorité. Faire en sorte que l’internaute ait l’impression que le site charge rapidement
Chargement complet du site idéalement 3 secondes, dépend du type de page, de l’utilisation du lazy loading…
Prioriser les éléments à afficher au dessus de la ligne de flottaison avec css commune
Content Delivery Network : utiliser un réseau de serveurs pour gagner en rapidité de temps de réponse ! Surtout pour les sites internationaux !
Compresser au maximum les r’essources JS, css, html avec module Gzip, Deflate…
Surveiller régulièrement avec les bons outils : Google Page Speed, DareBoost, Gtmetrix..;
En responsive ou avec un site mobile, l’expérience utilisateur doit répondre aux critères de Google sur la taille des contenus, l’écart entre les boutons, ectSur les sites mobiles, prévoir des redirections vers des pages appropriées (et non pas vers la home, très mauvais pour l’UX, perte de qualité en SEO)
AMP désormais intégré à la search console
Un site rapide aussi bien pour l’utilisateur que pour Google, aussi bien sur Desktop que sur Mobile !
Maintenant qu’on a le contenant et des bases saines, on va s’interresser au contenu, critère important tant pour l’ux que le seo
Une réponse à leur requêtes
Avec un contenu agréable, ludique & complet (bien rédigé, illustré)
Exactement ce que veulent les internautes !
Google a été fondé POUR les internautes, pas pour les éditeurs de sites
Idéalement, tout ce que l’on a vu précédemment !
Chaque page doit répondre à la requête principale qu’elle cible
Des images / vidéos doivent illustrer ou permettre de mieux comprendre le contenu (ludique)
Intégrer des liens internes contextuels qui auront toute légitimité pour l’internaute et qui porteront votre référencement !
Données structurées ou microdonnées c’est un moyen de renseigner Google sur le type de données que propose votre site et donc l’aider à les indexer mais c’est aussi un moyen de proposer des informations de manière valorisée à l’internaute et donc se faire remarquer par les utilisateurs !!
On ne va pas trop s’attardé car il y a une conférence cet après-midi dessus !
Toutefois un point intéressant dans la recherche universelle tant pour l’ux que pour le seo, c’est le SEO Local
Baisse de 7 à 3 résultats
Objectif : monétiser les places sur le pack local ?
Une étude de 2015 réalisée par Moz sur les critères de Ranking montre que les plus importants sont les critères on-page, fiche my business et le maillage
Encore plus dur d’être visible pour les petits acteurs?
Un annuaire complet de vos établissements mobile friendly, facilement accessible sur le site
# Des mots-clés avec la localisation dans les URLs, le fil d’Ariane, les titles, les méta-descriptions et les contenus
# Un maillage interne performant
# Des microdonnées sur les informations de contact
Google My Business : les infos des fiches sont structurées avec des microdonnées
Si vous optimisez correctement votre référencement local c’est d’autant plus de chance d’occuper la place dans les SERP !
Maintenant qu’on a un site optimisé à la fois pour le SEO et pour l’ux, comment je vais mesurer tout ça !
Deux sites qui vendent exactement la même chose
Lequel des deux à le « meilleurs » engagement (taux de rebond bas, temps passé haut, nombre de page vue haut)
Certainement « Voyage Sncf » !
Et pourtant, le réel avantage concurrentiel de Capitain Train est son interface UX friendly…
> Les critères « d’engagement » classique ne sont pas forcément adapté à votre site & vos enjeux sur le web !
4Q Survey
AB Testing
Mouse / eye tracking
Un bon SEO fait aussi de l’UX…
V a t’on vers une fusion des deux disciplines?
Certaines limites demeurent
Certaines bonnes pratique UX ne colles pas avec le SEO, et inversement
Pour autant, SEO & UX ont tout intérêt à travailler ensemble, et non plus en silo indépendant, car il poursuive le même but :
But des deux : un site qui performe (KPI), en plaisant aux internautes & à Google
Notre conviction : ca reste 2 disciplines à part entière, mais qui ne peuvent pas travailler l’un sans l’autre et qui poursuivent un objectif commun : le fameux Think User proné par Google lui-même !