Responsive design, long scrolling pages, lazy loading, parallax design, lecteurs vidéo, dynamic image resizing : les sites webs adoptent massivement de nouvelles façons de coder les pages webs. Et cela crée de nouveaux obstacles pour le référencement. Pourtant il est possible d'utiliser ces techniques avancées tout en conservant un site parfaitement optimisé pour le SEO.

1. 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

2. 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

3. / 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 »

4. / 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.

5. / 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

6. / 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.

7. / 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é !

8. / Cauchemar potentiel pour le SEO
8
Les « long scrolling pages »

9. / 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é)

10. / 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

11. / 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

12. / 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

13. / 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

14. www.search-foresight.com
Spécialiste de
l’accompagnement
stratégique en SEO