Un site clair, fonctionnel et léger
Depuis sa naissance, la technologie web demeure en perpétuelle évolution et par conséquent les critères de positionnement des sites aussi.La première étape est donc de se doter d’un site propre dont la structure adopte quelques critères essentiels qui lui éviterons d’être pénalisé à cause de caractéristiques techniques obsolètes ou contre-productives.
La clarté : ratio Texte/Code.
Une notion à prendre en compte dans la notation d’un site par les moteurs de recherches est la clarté du code HTML.Un bon indicateur de cette clarté est le ratio texte/code. Une trop forte proportion du code par rapport au texte sera fortement nuisible à votre référencement car elle entrainera une baisse de sa pertinence. Il ne faut pas oublier que Google cherche avant tout à montrer la qualité d’un contenu.
Pour cette raison, tout ce qui concerne la structure des pages, leur apparence et la mise en forme des textes est à proscrire du html pour préférer le CSS.
La fonctionnalité : le CSS (Cascading Style Sheets)
Une des raisons principales du succès des feuilles de styles CSS est le fait qu’il simplifie considérablement le code d’une page pour des raisons toutes simples :- Le code CSS est un fichier à part entière
- Il englobe à lui seul la mise en page du site et la mise en forme des textes par le biais de styles de blocs et classes de textes que l’on défini
- Il est interprété par le navigateur en étant appelé dans le code Html sans y être ajouté
Exemple :
L’ensemble des balises html sont paramétrables. Si on défini que l’on veut que les textes dans les tableaux soient tous en Verdana et d’une taille de 16, il suffit d’inscrire dans le css :
table { font-family: verdana ; font-size: 16px ; }
Il est de plus parfois utile de définir une classe que l’on peut appliquer de façon disparate dans le site Pour cela on incrit au css :
Modèle : .nomdelaclasse {propriété : valeur ; propriété : valeur ; ... ;}
Exemple : .txtrouge {font-style : bold ; color : #FF0000;}
et dans le Html on renseigne la balise en lui faisant appeler la classe :
<p class= « txtrouge »>mon texte placé ici apparaitra en rouge et en gras</p>
Hormis l’allègement évident du code, l’autre avantage non négligeable lié à cette technologie est la flexibilité qu’elle octroie à un site pour les éventuelles modifications et évolutions futures. Car si on veut modifier et enlever le gras de tous les textes soumis à la classe « txtrouge » définie plus haut, il suffit de la modifier dans le fichier CSS pour que cela s’applique à l’ensemble des différents textes concernés.
Aujourd’hui, quantité de CMS (content managment system) existants proposent des solutions adaptée à ces critères et rend significativement plus simple la mise en place d’un projet Web.
Voyez par exemple le CMS Joomla.
La légèreté : Le poids des pages
Un autre critère important est la vitesse de chargement des pages qui est directement liée au poids des images.Google pénalise les pages trop lourdes à charger car elle nuisent à la navigation de l’internaute. Pour ce faire il faut toujours optimiser ses images en utilisant le format PNG optimisé pour le web ou le format Jpeg, l’idéal étant en général de ne pas dépasser les 100Ko pour une image.
Un outil totalement gratuit est par ailleurs inclus dans SEO Soft pour optimiser le poid de vos PNG.
À propos de l'auteur : 123Monsite est une agence web parisienne spécialisée dans la création de site Joomla et prestashop. Elle a récemment lancé la solution 123box, permettant de créer en ligne un site dès 19€/mois.
