Agence Conseil en stratégie digitale
SEO, CRO, Inbound Marketing, Analytics
PETIT DEJEUNER SEO
SEARCH FORESIGHT
6eme
édition
LE 23 OCTOBRE 2014
9h-12h
Nouvelles modes dans l’intégration HTML /
Nouveaux challenges pour le SEO
/ SEO
MOUAD BOULAABI,CONSULTANT SEO SENIOR
MOUAD BOULAABI, CONSULTANT SEO SENIOR
Nouvelles modes dans l’intégration
HTML / Nouveaux challenges pour le
SEO
- 2 -Search Foresight 2014 ©
Agence Conseil en Stratégie Digitale
/ Attention aux solutions full javascript !
3
Le responsive design
Potentiellement, le responsive design a des avantages pour le SEO
Google recommande d’utiliser le responsive design
Par contre il faut pouvoir gérer cela en « amélioration progressive » ou « mobile
first »
/ Par défaut, la page doit contenir suffisamment de
textes et d’images
4
L’amélioration progressive
Hélas, la complexité de la gestion des templates HTML sur les solutions e-commerce conduit à une dégradation
absolue : sans javascript, le site n’est plus navigable et le contenu est absent du premier état du HTML.
/ Voici une liste de ce que l’on doit respecter
Performance: Ne pas allonger le temps de traitement, optimiser les images au
maximum, et autres ressources (CSS, JS)
Même code HTML: Pas de cloaking
Dynamic Serving Entête HTTP-vary :Permet à Googlebot de détecter plus rapidement le contenu optimisé pour les
appareils mobiles
5
Prérequis SEO au responsive design
/ Cauchemar potentiel pour le SEO
6
Le lazy loading
Là encore, les ressources que les moteurs doivent indexer doivent pouvoir être
explorées. Or les techniques comme l’ajax ou certaines implémentations en
javascript posent problème.
/ Techniques pour palier à ça?
7
lazy loading, and boring ?
Sitemap (mauvaise idée, si pas d’images placées dans le source HTML aucune
indexation possible)
Balises Noscript : cela fonctionne très bien mais les bots deviennent très suspects
aujourd’hui vis-à-vis de ces techniques assimilées à du cloaking.
Liens Hijax une des meilleures technique à adopter.
<a href='http://example.com/...?blogimage=<image-number>' onclick='...show(<image-number>);return false;'>
•Pour l’utilisateur: le retour à false à la fin de l'event onclick permet de rendre le href
totallement ignoré et le code JS executé.
•Pour le bot: le lien href sera suivi pour indexer son contenu et le code JS ignoré !
/ Cauchemar potentiel pour le SEO
9
Les « long scrolling pages »
Il faut prévoir une navigation par pages qui fonctionne en mode dégradé
(javascript désactivé ou non supporté)
/ C’est possible si on est rigoureux.
10
Comment être SEO compliant
Lors du scroll du site la page va passer par plusieurs URL
Exemple avec: http://www.polygon.com/a/ps4-review
http://www.polygon.com/a/ps4-review/video_review
http://www.polygon.com/a/ps4-review/console
http://www.polygon.com/a/ps4-review/controller
http://www.polygon.com/a/ps4-review/os
http://www.polygon.com/a/ps4-review/online
Ces urls sont accessibles via le menu de gauche, on peut
naviguer sur la page avec JS désactivé et chacune de ces
URL sont accessible séparément
/ Le HTML5 est la solution … encore faut-il savoir comment l’intégrer !
- 11 -
Intégration des lecteurs videos
La mode consiste à utiliser des lecteurs qui ne fonctionnent qu’en iframe, et/ou en
full javascript
Problème : les videos ne peuvent être indexées qu’à l’aide d’un sitemap vidéo
La solution est d’utiliser une solution mixte : lecteur HTML 5 + « fancy player »
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object></video>
On utilise donc la balise video + object & embed
Un "fall back" est prévu naturellement (si pas de flash alors la video mp4 se lance
quand même, et si le mp4 n'est pas supporté, alors le format ogg est appelé.
Si on veut utiliser un lecteur javascript, ou un lanceur javascript, alors il s’affiche en
overlay du lecteur HTML5
Search Foresight 2014 ©
Agence Conseil en Stratégie Digitale
/ Les solutions pour rendre les pages en ajax crawlables et indexables
- 12 -
Ajax : adieu hashbang, bonjour pushstate
Search Foresight 2014 ©
Agence Conseil en Stratégie Digitale
/ La méthode pushstate() est beaucoup plus facile à implémenter
- 13 -
Ajax : adieu hashbang, bonjour pushstate
Supportée par Bing, Google et Yandex… Pour les autres : ???
Lors du chargement d’un bloc en ajax, la fonction (méthode) pushtate() est
utilisée pour « pousser » une url différente qui apparait dans la barre du navigateur
La nouvelle url (et son contenu) est considérée comme une nouvelle page par les moteurs
Important : l’appel de la deuxième url doit générer une page dans le même état que celui créé par l’appel ajax depuis la page 1
Search Foresight 2014 ©
Agence Conseil en Stratégie Digitale