La technologie Ajax, qui a vu le jour il y a déjà quelques années maintenant, permet de développer des sites très ergonomiques, pratiques et intuitifs. C’est l’effet Web 2.0.
Explication
Le principe de base est de récupérer la plupart des contenus du site en interrogeant des scripts serveurs externes via des appels en Javascript.
Mais au delà de l’interactivité du site, il existe aussi un réel enjeu: le référencement (SEO).
Si tous les contenus sont créés dynamiquement à partir de Javascript, il n’existe donc pas réellement de contenu « physique » dans la page. Il n’y a donc aucune donnée à indexer par les moteurs de recherche.
Hors nous avons vu l’importance de la sémantique dans le référencement naturel d’un site.
Solution
Préambule
Le web 2.0 a engendré de nombreux changements dans la façon d’organiser un site. L’un des principaux est la séparation du contenu (html), de l’affichage (css), et des interactions utilisateurs (script).
Tous les styles sont donc stockés dans une feuille de style externe et les scripts Javascript dans un fichier .js externe.
A quoi ça sert?
Il y a plusieurs bonnes raisons de recourir à une telle organisation:
- Beaucoup moins de fichiers à éditer en cas de modifications du site
- Une plus grande clarté dans le code
- Une indépendance du script par rapport au contenu
Application
1) Première étape
Cela implique des nouvelles conventions de nommage: fini les <a href= »# » onclick= »maFonction() »>Lien</a>.
Maintenant, il suffit de donner un identifiant à cet élément <a href= »# » id= »lien1″>Lien</a>, puis dans notre fichier javascript d’appliquer un traitement particulier pour cette élément, soit par la méthode getElementById(« lien1″), soit si on utilise un framework javascript comme JQuery, $(« #lien1″).
Une fois que tous les éléments de notre page html ont été identifiés, tous les traitements peuvent être effectués depuis notre fichier javascript externe.
2) Deuxième étape
Pour optimiser au mieux le référencement de son site, il est important de prendre des mesures particulières:
- Bien indiquer les adresses des liens même lorsqu’on appelle une fonction Ajax en cliquant dessus.
- Appliquer ces fonctions à des liens (<a>).
Pourquoi? La raison est simple: si Javascript est désactivé (ce qui est le cas des robots des moteurs de recherche) alors la fonction ne s’applique pas et le lien est suivi normalement.
Cela signifie que le site entier est consultable par un robot et que tout le contenu est bien indexable car physiquement présent.
En effet, dans le cas où Javascript est désactivé, il suffit de créer sa page en prenant en compte des paramètres serveur et d’afficher le contenu en fonction, alors qu’en utilisant ajax, cela se fait sans recharger sa page.
Simplifier
En utilisant un framework Javascript, il devient encore plus facile de réaliser ce genre d’application.
En effet, en utilisant des selecteurs, il est très facile de manipuler les liens d’une page html:
Exemple ici avec JQuery:
$("div.contenu a").click(function(){
appelAjax(); // Appel fonction Ajax
return false; // Très important
}
Explication:
Ce script va effectuer un appel à la fonction appelAjax() sur tous les liens <a> contenus dans le <div> qui a la classe « contenu« .
A noter l’utilisation de « return false« , qui permet de ne pas rediriger sur l’adresse du lien.
Exemple
Mon portfolio personnel est construit de cette façon là, essayez donc de désactiver javascript et vous verrez!
Conclusion
Aujourd’hui, et grâce principalement aux frameworks Javascript, Référencement et Ajax c’est possible. Il suffit de bien organiser son site, de prévoir les pages serveurs qui seront utilisées par les moteurs de recherche (sans javascript) et les scripts Ajax utilisés par les utilisateurs.
Loading ...
