Agence Conseil en stratégie digitale
SEO, CRO, Inbound Marketing, Analytics
PETIT DEJEUNER SEO
SEARCH FORESIGHT
6eme éditi...
MOUAD BOULAABI, CONSULTANT SEO SENIOR
Nouvelles modes dans l’intégration
HTML / Nouveaux challenges pour le
SEO
- 2 -
Sear...
/ Attention aux solutions full javascript !
3
Le responsive design
 Potentiellement, le responsive design a des avantages...
/ Par défaut, la page doit contenir suffisamment de
textes et d’images
4
L’amélioration progressive
Hélas, la complexité d...
/ Voici une liste de ce que l’on doit respecter
Performance: Ne pas allonger le temps de traitement, optimiser les images ...
/ Cauchemar potentiel pour le SEO
6
Le lazy loading
 Là encore, les ressources que les moteurs doivent indexer doivent po...
/ Techniques pour palier à ça?
7
lazy loading, and boring ?
 Sitemap (mauvaise idée, si pas d’images placées dans le sour...
/ Cauchemar potentiel pour le SEO
8
Les « long scrolling pages »
/ Cauchemar potentiel pour le SEO
9
Les « long scrolling pages »
 Il faut prévoir une navigation par pages qui fonctionne...
/ C’est possible si on est rigoureux.
10
Comment être SEO compliant
Lors du scroll du site la page va passer par plusieurs...
/ Le HTML5 est la solution … encore faut-il savoir comment l’intégrer !
- 11 -
Intégration des lecteurs videos
 La mode c...
/ Les solutions pour rendre les pages en ajax crawlables et indexables
- 12 -
Ajax : adieu hashbang, bonjour pushstate
Sea...
/ La méthode pushstate() est beaucoup plus facile à implémenter
- 13 -
Ajax : adieu hashbang, bonjour pushstate
 Supporté...
www.search-foresight.com
Spécialiste de
l’accompagnement
stratégique en SEO
Prochain SlideShare
Chargement dans…5
×

Intégration HTML & SEO : nouveaux challenges

722 vues

Publié le

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.

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
722
Sur SlideShare
0
Issues des intégrations
0
Intégrations
183
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Intégration HTML & SEO : nouveaux challenges

  1. 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. 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. 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. 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. 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. 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. 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. 8. / Cauchemar potentiel pour le SEO 8 Les « long scrolling pages »
  9. 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. 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. 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. 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. 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. 14. www.search-foresight.com Spécialiste de l’accompagnement stratégique en SEO

×