Intégration HTML & SEO : nouveaux challenges

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


8

Les « long scrolling pages »


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

http://www.polygon.com/a/ps4-review

/ 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 ©


/ Les solutions pour rendre les pages en ajax crawlables et indexables

- 12 -

Ajax : adieu hashbang, bonjour pushstate



/ 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



www.search-foresight.com

Spécialiste de

l’accompagnement

stratégique en SEO

Intégration HTML & SEO : nouveaux challenges

Internet

Transcript of Intégration HTML & SEO : nouveaux challenges