SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Downloaden Sie, um offline zu lesen
Comment créer
un site mobile
compatible seo
UN ENJEU MAJEUR
Benoit Chevillot, Divioseo, @beunwa,
info@divioseo.fr
• Content, perf, usability,
linking
• Une annonce google
inhabituelle
• Une deadline qui
approche
Evolution des critères de classement
0
14
28
42
56
70
84
Content Perf Usability Linking
• Les évolutions des critères de classement de
recherche évoluent, après le critère de linking pur, le
contenu (panda) a pris de plus en plus d’importance
• Puis la performance est devenu un critère
primordial, au même titre que la qualité (voir les
guidelines quality raters) et maintenant l’utilisabilité
Content, perf, usability, linking
• Le 27 février 2015 google a annoncé officiellement un
changement majeur dans son algorithme prévue le 21
avril 2015 :
• Apporter des résultats plus adaptés aux utilisateurs mobiles dans le
moteur de recherche
• Google en remet une couche le 17 mars en annonçant une série de
vidéo et webinar destinés à vous aider à passer au mobile :
https://plus.google.com/s/%23MobileMadness
• Généralement google n’annonce pas ses changements,
il faut donc certainement la prendre au sérieux
Une annonce inhabituelle
• + de sites mobile-friendly dans les résultats de
recherche.
• Nous allons étendre notre utilisation du critère de compatibilité mobile
pour en faire l'un des critères de positionnement du moteur. Ce
changement affectera les résultats de recherche mobiles partout dans
le monde et dans toutes les langues, et son impact sera significatif.
• + de contenu issu d'applications dans les résultats de
recherche
• Informations provenant des applications indexées comme critère de
positionnement, pour nos utilisateurs connectés et qui ont déjà installé
les applications en question sur leur appareil mobile
Le 21 avril la donne va changer
• Outils en ligne
• Outils navigateurs
Verifier la compatibilité mobile
• Outil google :
https://www.google.com/webmasters/tools/mobile-friendly/
https://developers.google.com/speed/pagespeed/insights/
• W3C mobile test (outil intégriste) :
http://validator.w3.org/mobile/
• Emulateur online :
http://www.mobilephoneemulator.com/
• Responsive test online :
http://mattkersley.com/responsive/
• Page speed
https://developers.google.com/speed/pagespeed/
http://gtmetrix.com/
• Browserstack et compagnie (saucelabs, browserling, mobiletestme, …)
Outils en ligne
• Chrome dev tools
https://developer.chrome.com/devtools
ctrl + shift + i puis clic sur icone mobile
• Mode responsive de firefox
https://developer.mozilla.org/fr/docs/Outils/Vue_adaptative
ctrl + shift + m
• Emulateur Iphone (xcode)
https://developer.apple.com/library/ios/documentation/IDEs/Conceptu
al/iOS_Simulator_Guide/
Open developper tools -> ios simulator
• Genymotion (emulateur android)
https://www.genymotion.com
Ajouter un terminal virtuel -> lancer
Outils navigateur et OS
• Guidelines
• Quick n Dirty
• Optimisations
• CMS
Améliorer la compatibilité mobile
Si vous avez déjà un site bien optimisé pour le seo vous n’avez que quelques
« détails » à régler :
• Page speed : TTFB
• Les mobiles sont encore plus sensibles aux problématiques de performance et de temps de
chargement à cause de leur hardware et leur connectivité limitée (de moins en moins vrais) :
limitez les appels réseaux et optimisez vos contenus pour les alleger
• Design mobile
• N’utilisez pas FLASH (bien que certain navigateurs mobiles le supporte : firefox par exemple)
• N’utilisez pas les popups (utilisez les popins responsive au besoin)
• Pensez que les utilisateurs ont des gros doigts (mettez de l’air autour de vos zones chaudes)
• Keep it stupid simple
Guidelines
• Optimisez (encore vos titles et meta description)
• L’espace d’affichage restreint des mobiles nécessite de raccourcir
encore vos titles et description tout en restant pertinent.
• Abusez des micro données
• L’espace d’affichage restreint permet de faire sauter aux yeux les
rich snippets, profitez en.
• Choisissez la technologie adequate
• Responsive, dynamic serving, separate url
Guidelines
Si vous n’avez ni temps ni budget voici la solution
magique :
• Utilisez la balise viewport
• <meta name="viewport" content="width=device-
width, initial-scale=1.0">
Evidement cette solution (utilisée seule) ne règle que
les problèmes en apparence mais vous permettra de
passer le 21 avril sereinement (ou pas)
Quick hack
• Utilisez des typos d’icones :
fontawesome, flaticon, icomoon, …
• Transformez vos images en sprites quand cela est
possible :
css.spritegen.com, spritepad, spritizer, …
• Concatenez vos script javascript et vos feuilles de
style
Réduction du nombre de ressources
• Compressez au maximum vos images sans perdre
en qualité visuelle, en utilisant les outils adaptés
vous pourrez gagner en moyenne 25% sur le poids
de vos images :
smush.it (devenu imgopt.com), gtmetrix report, riot
(logiciel desktop), kraken.io (payant)
Optimisation des images
Le but est d’accélérer au maximum l’affichage de la
page (en dehors de la problématique TTFB)
• Evitez l’accumulation de librairies js hétérogènes
• Réduisez la complexité du Document Object Model :
KISS
Simplification du dom
Les media queries sont un mécanisme css permettant
de détecter la configuration d’un terminal et d’adapter
la feuille de style délivrée.
• Utilisez les media queries pour délivrer un contenu
adapté à la taille de l’écran
• En utilisant de manière adéquate les css vous
pourrez également délivrer des images (en
background) adaptées en taille
Media queries
Tous les CMS modernes proposent des thèmes et
templates responsive, vous pouvez en trouver sur tous
les sites ou vous avez l’habitude d’en chercher.
http://themeforest.com
http://www.elegantthemes.com/
http://www.templatemonster.com
Bon courage : la plupart génèrent un code mal
optimisé (plusieurs H1, …)
Themes responsive pour CMS
• Responsive web
design
• Dynamic serving
• Separate mobile site
• Comparaison
• Lequel choisir
Technologies disponibles
• Le même code html est généré et envoyé aux différents terminaux (mobiles,
desktops, tablettes, …)
• Utilisation des médias queries pour adapter le design à la taille de l’écran via les
feuilles de style.
• Gestion du contenu centralisée.
• Indexation simplifiée pour les robots.
• Pas de redirection basée sur la détection de user agent (sujette à erreur).
• https://developers.google.com/webmasters/mobile-sites/mobile-
seo/configurations/responsive-design?hl=fr
• ATTENTION : pensez votre contenu pour le mobile en premier (mobile first), vous
n’aurez ainsi aucun problème pour adapter votre design aux version desktop.
Responsive web design
• Le code html, css et js généré est différent en fonction des
terminaux connectés.
• Les urls restent les mêmes quelque soit le terminal
• La détection du terminal se base sur le user agent, le serveur
DOIT RENVOYER une entête http « vary » qui permet aux
robots d’êtres informés que le contenu varie selon le user agent
et ainsi d’afficher la bonne version de cache par exemple.
• Attention aux erreurs lors de la détection des user agent :
Il ne doit pas rechercher Googlebot de manière spécifique. Tous les user-agents
Googlebot sont considérés comme des appareils mobiles spécifiques. Vous devez
traiter ces user-agents Googlebot de la même manière que ces appareils.
Dynamic serving
• Les terminaux sont redirigés via http vers des urls distinctes en
fonction de leur configuration, un code html spécifique est
généré sur ces urls.
• Utilisation des balise rel=alternate et rel=canonical sur chaque
page et dans le sitemap.
rel=alternate sur la version desktop
rell=canonical sur la version mobile
• Attention aux erreurs lors de la détection des user agent :
Il ne doit pas rechercher Googlebot de manière spécifique. Tous les user-agents
Googlebot sont considérés comme des appareils mobiles spécifiques. Vous
devez traiter ces user-agents Googlebot de la même manière que ces appareils.
• Gestion du contenu complexifiée
Separate mobile website
Comparaison
Configuration Mêmes urls ? Même code HTML
Responsive Web Design
Dynamic serving
Separate mobile website
• A moins que vous n’ayez pas le choix et que vous
héritiez d’une version mobile de votre site avec des
urls distinctes je vous conseille d’opter pour la
version responsive design qui est la plus simple à
gérer et à mettre en place, elle évite également les
erreurs potentielles de redirection et de balise
canonical mal configurés.
• La version Dynamic serving demande un peu plus de
setup mais va permettre de servir une version « sur
mesure » pour les mobiles (javascript et médias
adaptés)
Lequel choisir
• Lisez les guidelines
• Testez
• Faites appel à un pro
• Choisissez la techno adaptée à votre cas de figure
• Venez au TEKNSEO le 13 JUIN à LYON :
http://teknseo.com
Conclusion
oit Chevillot, Divioseo, @beunwa, info@diviose

Weitere ähnliche Inhalte

Andere mochten auch

Réussir son SEO à l’international - iProspect France
Réussir son SEO à l’international - iProspect FranceRéussir son SEO à l’international - iProspect France
Réussir son SEO à l’international - iProspect FranceiProspect France
 
#Seocamp Paris 2015 Google Adwords: Domptez le et vous Convertirez !
#Seocamp Paris 2015 Google Adwords: Domptez le et vous Convertirez ! #Seocamp Paris 2015 Google Adwords: Domptez le et vous Convertirez !
#Seocamp Paris 2015 Google Adwords: Domptez le et vous Convertirez ! Guillaume Eouzan
 
#SeoCamp 2015 Google Adwords: Innovez et Améliorez votre Visibilité
#SeoCamp 2015 Google Adwords: Innovez et Améliorez votre Visibilité#SeoCamp 2015 Google Adwords: Innovez et Améliorez votre Visibilité
#SeoCamp 2015 Google Adwords: Innovez et Améliorez votre VisibilitéGuillaume Eouzan
 
SEO et ecommerce sur Magento: retour d’expérience
SEO et ecommerce sur Magento: retour d’expérienceSEO et ecommerce sur Magento: retour d’expérience
SEO et ecommerce sur Magento: retour d’expérienceAurélien Lavorel
 
SEO : comment obtenir des liens puissants grâce à un contenu décalé
SEO : comment obtenir des liens puissants grâce à un contenu décaléSEO : comment obtenir des liens puissants grâce à un contenu décalé
SEO : comment obtenir des liens puissants grâce à un contenu décaléLaurent Peyrat
 
Designing Creative Content: How visualising data helps us see
Designing Creative Content: How visualising data helps us seeDesigning Creative Content: How visualising data helps us see
Designing Creative Content: How visualising data helps us seeVicke Cheung
 
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Olivier Andrieu
 
Analyse de logs - Études de cas et best practices - SEO Campus 2017
Analyse de logs - Études de cas et best practices - SEO Campus 2017Analyse de logs - Études de cas et best practices - SEO Campus 2017
Analyse de logs - Études de cas et best practices - SEO Campus 2017iProspect France
 
HTTPS The Road To A More Secure Web / SEOCamp Paris
HTTPS The Road To A More Secure Web / SEOCamp ParisHTTPS The Road To A More Secure Web / SEOCamp Paris
HTTPS The Road To A More Secure Web / SEOCamp ParisAysun Akarsu
 
Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Virginie Clève - largow ☕️
 
Les défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEOLes défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEODaniel Roch - SeoMix
 
Measuring Content Marketing
Measuring Content MarketingMeasuring Content Marketing
Measuring Content MarketingDavid Iwanow
 
Organiser un projet à l’international : un Pari Fou
Organiser un projet à l’international : un Pari FouOrganiser un projet à l’international : un Pari Fou
Organiser un projet à l’international : un Pari FouOpen-linking
 
Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)
Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)
Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)Thomas BART
 
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017Peak Ace
 

Andere mochten auch (17)

2015 seo-campus-mobile1
2015 seo-campus-mobile12015 seo-campus-mobile1
2015 seo-campus-mobile1
 
Réussir son SEO à l’international - iProspect France
Réussir son SEO à l’international - iProspect FranceRéussir son SEO à l’international - iProspect France
Réussir son SEO à l’international - iProspect France
 
#Seocamp Paris 2015 Google Adwords: Domptez le et vous Convertirez !
#Seocamp Paris 2015 Google Adwords: Domptez le et vous Convertirez ! #Seocamp Paris 2015 Google Adwords: Domptez le et vous Convertirez !
#Seocamp Paris 2015 Google Adwords: Domptez le et vous Convertirez !
 
#SeoCamp 2015 Google Adwords: Innovez et Améliorez votre Visibilité
#SeoCamp 2015 Google Adwords: Innovez et Améliorez votre Visibilité#SeoCamp 2015 Google Adwords: Innovez et Améliorez votre Visibilité
#SeoCamp 2015 Google Adwords: Innovez et Améliorez votre Visibilité
 
SEO et ecommerce sur Magento: retour d’expérience
SEO et ecommerce sur Magento: retour d’expérienceSEO et ecommerce sur Magento: retour d’expérience
SEO et ecommerce sur Magento: retour d’expérience
 
SEO : comment obtenir des liens puissants grâce à un contenu décalé
SEO : comment obtenir des liens puissants grâce à un contenu décaléSEO : comment obtenir des liens puissants grâce à un contenu décalé
SEO : comment obtenir des liens puissants grâce à un contenu décalé
 
Designing Creative Content: How visualising data helps us see
Designing Creative Content: How visualising data helps us seeDesigning Creative Content: How visualising data helps us see
Designing Creative Content: How visualising data helps us see
 
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
 
Analyse de logs - Études de cas et best practices - SEO Campus 2017
Analyse de logs - Études de cas et best practices - SEO Campus 2017Analyse de logs - Études de cas et best practices - SEO Campus 2017
Analyse de logs - Études de cas et best practices - SEO Campus 2017
 
HTTPS The Road To A More Secure Web / SEOCamp Paris
HTTPS The Road To A More Secure Web / SEOCamp ParisHTTPS The Road To A More Secure Web / SEOCamp Paris
HTTPS The Road To A More Secure Web / SEOCamp Paris
 
Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?
 
Les défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEOLes défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEO
 
Measuring Content Marketing
Measuring Content MarketingMeasuring Content Marketing
Measuring Content Marketing
 
Organiser un projet à l’international : un Pari Fou
Organiser un projet à l’international : un Pari FouOrganiser un projet à l’international : un Pari Fou
Organiser un projet à l’international : un Pari Fou
 
Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)
Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)
Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)
 
Mots-clés, au delà du volume de recherche
Mots-clés, au delà du volume de rechercheMots-clés, au delà du volume de recherche
Mots-clés, au delà du volume de recherche
 
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
 

Kürzlich hochgeladen

B1. Valoriser et s'appuyer sur le sport en com interne
B1. Valoriser et s'appuyer sur le sport en com interneB1. Valoriser et s'appuyer sur le sport en com interne
B1. Valoriser et s'appuyer sur le sport en com interneCap'Com
 
A1. S'adresser aux nouvelles générations
A1. S'adresser aux nouvelles générationsA1. S'adresser aux nouvelles générations
A1. S'adresser aux nouvelles générationsCap'Com
 
A2. Réinventer son dispositif de recrutement au travers de l'ingénierie conve...
A2. Réinventer son dispositif de recrutement au travers de l'ingénierie conve...A2. Réinventer son dispositif de recrutement au travers de l'ingénierie conve...
A2. Réinventer son dispositif de recrutement au travers de l'ingénierie conve...Cap'Com
 
D1. Application intranet mobile : peser le pour et le contre
D1. Application intranet mobile : peser le pour et le contreD1. Application intranet mobile : peser le pour et le contre
D1. Application intranet mobile : peser le pour et le contreCap'Com
 
D2. Impliquer les agents dans les événements internes
D2. Impliquer les agents dans les événements internesD2. Impliquer les agents dans les événements internes
D2. Impliquer les agents dans les événements internesCap'Com
 
B2. Travailler sa communication managériale
B2. Travailler sa communication managérialeB2. Travailler sa communication managériale
B2. Travailler sa communication managérialeCap'Com
 
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024Timothy Duquesne
 
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024Timothy Duquesne
 
Conférence HOP | Renforcer la proximité : la com interne sur le terrain
Conférence HOP | Renforcer la proximité : la com interne sur le terrainConférence HOP | Renforcer la proximité : la com interne sur le terrain
Conférence HOP | Renforcer la proximité : la com interne sur le terrainCap'Com
 
Dynamiser ses voeux et événements protocolaires : décryptage du Grand Prix 20...
Dynamiser ses voeux et événements protocolaires : décryptage du Grand Prix 20...Dynamiser ses voeux et événements protocolaires : décryptage du Grand Prix 20...
Dynamiser ses voeux et événements protocolaires : décryptage du Grand Prix 20...Cap'Com
 
C1. Créer et accompagner un réseau d'ambassadeurs sur Linkedin
C1. Créer et accompagner un réseau d'ambassadeurs sur LinkedinC1. Créer et accompagner un réseau d'ambassadeurs sur Linkedin
C1. Créer et accompagner un réseau d'ambassadeurs sur LinkedinCap'Com
 
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024Timothy Duquesne
 
C2. Miser sur la sobriété éditoriale pour des contenus accessibles
C2. Miser sur la sobriété éditoriale pour des contenus accessiblesC2. Miser sur la sobriété éditoriale pour des contenus accessibles
C2. Miser sur la sobriété éditoriale pour des contenus accessiblesCap'Com
 
Créer une web radio : décryptage du dispositif mis en place à l'agglomération...
Créer une web radio : décryptage du dispositif mis en place à l'agglomération...Créer une web radio : décryptage du dispositif mis en place à l'agglomération...
Créer une web radio : décryptage du dispositif mis en place à l'agglomération...Cap'Com
 
E1.Évaluer sa communication interne .
E1.Évaluer sa communication interne     .E1.Évaluer sa communication interne     .
E1.Évaluer sa communication interne .Cap'Com
 
Plénière de clôture | S'appuyer sur les sciences comportementales pour accomp...
Plénière de clôture | S'appuyer sur les sciences comportementales pour accomp...Plénière de clôture | S'appuyer sur les sciences comportementales pour accomp...
Plénière de clôture | S'appuyer sur les sciences comportementales pour accomp...Cap'Com
 

Kürzlich hochgeladen (16)

B1. Valoriser et s'appuyer sur le sport en com interne
B1. Valoriser et s'appuyer sur le sport en com interneB1. Valoriser et s'appuyer sur le sport en com interne
B1. Valoriser et s'appuyer sur le sport en com interne
 
A1. S'adresser aux nouvelles générations
A1. S'adresser aux nouvelles générationsA1. S'adresser aux nouvelles générations
A1. S'adresser aux nouvelles générations
 
A2. Réinventer son dispositif de recrutement au travers de l'ingénierie conve...
A2. Réinventer son dispositif de recrutement au travers de l'ingénierie conve...A2. Réinventer son dispositif de recrutement au travers de l'ingénierie conve...
A2. Réinventer son dispositif de recrutement au travers de l'ingénierie conve...
 
D1. Application intranet mobile : peser le pour et le contre
D1. Application intranet mobile : peser le pour et le contreD1. Application intranet mobile : peser le pour et le contre
D1. Application intranet mobile : peser le pour et le contre
 
D2. Impliquer les agents dans les événements internes
D2. Impliquer les agents dans les événements internesD2. Impliquer les agents dans les événements internes
D2. Impliquer les agents dans les événements internes
 
B2. Travailler sa communication managériale
B2. Travailler sa communication managérialeB2. Travailler sa communication managériale
B2. Travailler sa communication managériale
 
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
 
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
 
Conférence HOP | Renforcer la proximité : la com interne sur le terrain
Conférence HOP | Renforcer la proximité : la com interne sur le terrainConférence HOP | Renforcer la proximité : la com interne sur le terrain
Conférence HOP | Renforcer la proximité : la com interne sur le terrain
 
Dynamiser ses voeux et événements protocolaires : décryptage du Grand Prix 20...
Dynamiser ses voeux et événements protocolaires : décryptage du Grand Prix 20...Dynamiser ses voeux et événements protocolaires : décryptage du Grand Prix 20...
Dynamiser ses voeux et événements protocolaires : décryptage du Grand Prix 20...
 
C1. Créer et accompagner un réseau d'ambassadeurs sur Linkedin
C1. Créer et accompagner un réseau d'ambassadeurs sur LinkedinC1. Créer et accompagner un réseau d'ambassadeurs sur Linkedin
C1. Créer et accompagner un réseau d'ambassadeurs sur Linkedin
 
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
Présentation EMIsphère Saison 3 pour les Assises du Journalisme 2024
 
C2. Miser sur la sobriété éditoriale pour des contenus accessibles
C2. Miser sur la sobriété éditoriale pour des contenus accessiblesC2. Miser sur la sobriété éditoriale pour des contenus accessibles
C2. Miser sur la sobriété éditoriale pour des contenus accessibles
 
Créer une web radio : décryptage du dispositif mis en place à l'agglomération...
Créer une web radio : décryptage du dispositif mis en place à l'agglomération...Créer une web radio : décryptage du dispositif mis en place à l'agglomération...
Créer une web radio : décryptage du dispositif mis en place à l'agglomération...
 
E1.Évaluer sa communication interne .
E1.Évaluer sa communication interne     .E1.Évaluer sa communication interne     .
E1.Évaluer sa communication interne .
 
Plénière de clôture | S'appuyer sur les sciences comportementales pour accomp...
Plénière de clôture | S'appuyer sur les sciences comportementales pour accomp...Plénière de clôture | S'appuyer sur les sciences comportementales pour accomp...
Plénière de clôture | S'appuyer sur les sciences comportementales pour accomp...
 

Comment créer un site mobile compatible seo ? conférence Seocampus

  • 1. Comment créer un site mobile compatible seo UN ENJEU MAJEUR Benoit Chevillot, Divioseo, @beunwa, info@divioseo.fr
  • 2. • Content, perf, usability, linking • Une annonce google inhabituelle • Une deadline qui approche Evolution des critères de classement 0 14 28 42 56 70 84 Content Perf Usability Linking
  • 3. • Les évolutions des critères de classement de recherche évoluent, après le critère de linking pur, le contenu (panda) a pris de plus en plus d’importance • Puis la performance est devenu un critère primordial, au même titre que la qualité (voir les guidelines quality raters) et maintenant l’utilisabilité Content, perf, usability, linking
  • 4. • Le 27 février 2015 google a annoncé officiellement un changement majeur dans son algorithme prévue le 21 avril 2015 : • Apporter des résultats plus adaptés aux utilisateurs mobiles dans le moteur de recherche • Google en remet une couche le 17 mars en annonçant une série de vidéo et webinar destinés à vous aider à passer au mobile : https://plus.google.com/s/%23MobileMadness • Généralement google n’annonce pas ses changements, il faut donc certainement la prendre au sérieux Une annonce inhabituelle
  • 5. • + de sites mobile-friendly dans les résultats de recherche. • Nous allons étendre notre utilisation du critère de compatibilité mobile pour en faire l'un des critères de positionnement du moteur. Ce changement affectera les résultats de recherche mobiles partout dans le monde et dans toutes les langues, et son impact sera significatif. • + de contenu issu d'applications dans les résultats de recherche • Informations provenant des applications indexées comme critère de positionnement, pour nos utilisateurs connectés et qui ont déjà installé les applications en question sur leur appareil mobile Le 21 avril la donne va changer
  • 6. • Outils en ligne • Outils navigateurs Verifier la compatibilité mobile
  • 7. • Outil google : https://www.google.com/webmasters/tools/mobile-friendly/ https://developers.google.com/speed/pagespeed/insights/ • W3C mobile test (outil intégriste) : http://validator.w3.org/mobile/ • Emulateur online : http://www.mobilephoneemulator.com/ • Responsive test online : http://mattkersley.com/responsive/ • Page speed https://developers.google.com/speed/pagespeed/ http://gtmetrix.com/ • Browserstack et compagnie (saucelabs, browserling, mobiletestme, …) Outils en ligne
  • 8. • Chrome dev tools https://developer.chrome.com/devtools ctrl + shift + i puis clic sur icone mobile • Mode responsive de firefox https://developer.mozilla.org/fr/docs/Outils/Vue_adaptative ctrl + shift + m • Emulateur Iphone (xcode) https://developer.apple.com/library/ios/documentation/IDEs/Conceptu al/iOS_Simulator_Guide/ Open developper tools -> ios simulator • Genymotion (emulateur android) https://www.genymotion.com Ajouter un terminal virtuel -> lancer Outils navigateur et OS
  • 9. • Guidelines • Quick n Dirty • Optimisations • CMS Améliorer la compatibilité mobile
  • 10. Si vous avez déjà un site bien optimisé pour le seo vous n’avez que quelques « détails » à régler : • Page speed : TTFB • Les mobiles sont encore plus sensibles aux problématiques de performance et de temps de chargement à cause de leur hardware et leur connectivité limitée (de moins en moins vrais) : limitez les appels réseaux et optimisez vos contenus pour les alleger • Design mobile • N’utilisez pas FLASH (bien que certain navigateurs mobiles le supporte : firefox par exemple) • N’utilisez pas les popups (utilisez les popins responsive au besoin) • Pensez que les utilisateurs ont des gros doigts (mettez de l’air autour de vos zones chaudes) • Keep it stupid simple Guidelines
  • 11. • Optimisez (encore vos titles et meta description) • L’espace d’affichage restreint des mobiles nécessite de raccourcir encore vos titles et description tout en restant pertinent. • Abusez des micro données • L’espace d’affichage restreint permet de faire sauter aux yeux les rich snippets, profitez en. • Choisissez la technologie adequate • Responsive, dynamic serving, separate url Guidelines
  • 12. Si vous n’avez ni temps ni budget voici la solution magique : • Utilisez la balise viewport • <meta name="viewport" content="width=device- width, initial-scale=1.0"> Evidement cette solution (utilisée seule) ne règle que les problèmes en apparence mais vous permettra de passer le 21 avril sereinement (ou pas) Quick hack
  • 13. • Utilisez des typos d’icones : fontawesome, flaticon, icomoon, … • Transformez vos images en sprites quand cela est possible : css.spritegen.com, spritepad, spritizer, … • Concatenez vos script javascript et vos feuilles de style Réduction du nombre de ressources
  • 14. • Compressez au maximum vos images sans perdre en qualité visuelle, en utilisant les outils adaptés vous pourrez gagner en moyenne 25% sur le poids de vos images : smush.it (devenu imgopt.com), gtmetrix report, riot (logiciel desktop), kraken.io (payant) Optimisation des images
  • 15. Le but est d’accélérer au maximum l’affichage de la page (en dehors de la problématique TTFB) • Evitez l’accumulation de librairies js hétérogènes • Réduisez la complexité du Document Object Model : KISS Simplification du dom
  • 16. Les media queries sont un mécanisme css permettant de détecter la configuration d’un terminal et d’adapter la feuille de style délivrée. • Utilisez les media queries pour délivrer un contenu adapté à la taille de l’écran • En utilisant de manière adéquate les css vous pourrez également délivrer des images (en background) adaptées en taille Media queries
  • 17. Tous les CMS modernes proposent des thèmes et templates responsive, vous pouvez en trouver sur tous les sites ou vous avez l’habitude d’en chercher. http://themeforest.com http://www.elegantthemes.com/ http://www.templatemonster.com Bon courage : la plupart génèrent un code mal optimisé (plusieurs H1, …) Themes responsive pour CMS
  • 18. • Responsive web design • Dynamic serving • Separate mobile site • Comparaison • Lequel choisir Technologies disponibles
  • 19. • Le même code html est généré et envoyé aux différents terminaux (mobiles, desktops, tablettes, …) • Utilisation des médias queries pour adapter le design à la taille de l’écran via les feuilles de style. • Gestion du contenu centralisée. • Indexation simplifiée pour les robots. • Pas de redirection basée sur la détection de user agent (sujette à erreur). • https://developers.google.com/webmasters/mobile-sites/mobile- seo/configurations/responsive-design?hl=fr • ATTENTION : pensez votre contenu pour le mobile en premier (mobile first), vous n’aurez ainsi aucun problème pour adapter votre design aux version desktop. Responsive web design
  • 20. • Le code html, css et js généré est différent en fonction des terminaux connectés. • Les urls restent les mêmes quelque soit le terminal • La détection du terminal se base sur le user agent, le serveur DOIT RENVOYER une entête http « vary » qui permet aux robots d’êtres informés que le contenu varie selon le user agent et ainsi d’afficher la bonne version de cache par exemple. • Attention aux erreurs lors de la détection des user agent : Il ne doit pas rechercher Googlebot de manière spécifique. Tous les user-agents Googlebot sont considérés comme des appareils mobiles spécifiques. Vous devez traiter ces user-agents Googlebot de la même manière que ces appareils. Dynamic serving
  • 21. • Les terminaux sont redirigés via http vers des urls distinctes en fonction de leur configuration, un code html spécifique est généré sur ces urls. • Utilisation des balise rel=alternate et rel=canonical sur chaque page et dans le sitemap. rel=alternate sur la version desktop rell=canonical sur la version mobile • Attention aux erreurs lors de la détection des user agent : Il ne doit pas rechercher Googlebot de manière spécifique. Tous les user-agents Googlebot sont considérés comme des appareils mobiles spécifiques. Vous devez traiter ces user-agents Googlebot de la même manière que ces appareils. • Gestion du contenu complexifiée Separate mobile website
  • 22. Comparaison Configuration Mêmes urls ? Même code HTML Responsive Web Design Dynamic serving Separate mobile website
  • 23. • A moins que vous n’ayez pas le choix et que vous héritiez d’une version mobile de votre site avec des urls distinctes je vous conseille d’opter pour la version responsive design qui est la plus simple à gérer et à mettre en place, elle évite également les erreurs potentielles de redirection et de balise canonical mal configurés. • La version Dynamic serving demande un peu plus de setup mais va permettre de servir une version « sur mesure » pour les mobiles (javascript et médias adaptés) Lequel choisir
  • 24. • Lisez les guidelines • Testez • Faites appel à un pro • Choisissez la techno adaptée à votre cas de figure • Venez au TEKNSEO le 13 JUIN à LYON : http://teknseo.com Conclusion oit Chevillot, Divioseo, @beunwa, info@diviose