Codage du site en SEO

Posted on par

Dans le cadre du pilier technique du SEO, j’ai déjà exploré des éléments cruciaux tels que les balises TITLE, DESCRIPTION, KEYWORD, les balises de titre H, et la balise ALT.

Aujourd’hui, je vais approfondir deux aspects essentiels : l’importance d’un codage propre et l’optimisation du chargement des scripts et des styles pour améliorer la performance de votre site web et son référencement naturel.

Type de codage de site pour le SEO

En France, la norme de langage HTML utilisée est le « charset ISO-8859-1 ». Il s’agit du langage basique utilisé pour la zone « Europe de l’Ouest ». Si les pages d’un site français sont construites sous ce langage, les caractères accentués seront bien encodés dans le code HTML approprié et donc lisible pour les moteurs de recherche, ce qui sera toujours mieux pour le référencement naturel.

Une autre façon de résoudre le problème est d’utiliser le langage UTF-8. Ce dernier gère la plupart des langues (notamment les caractéristiques de la langue française). Il pourra ainsi corriger les problèmes liés à l’encodage et éviter tout souci lié au référencement naturel.

L’importance d’un codage propre en SEO

Codage HTML en SEO

Un codage propre et structuré est fondamental non seulement pour assurer une expérience utilisateur optimale, mais aussi pour permettre une bonne compréhension par les moteurs de recherche et l’optimisation du référencement naturel.

Voici quelques principes cléfs :

Respect des standards HTML

Utiliser des balises HTML correctes et bien structurées permet de garantir que les moteurs de recherche peuvent facilement comprendre et indexer votre contenu.

Commenter votre code

Des commentaires clairs et pertinents aident non seulement à la maintenance du site mais aussi à assurer que les moteurs de recherche interprètent correctement les sections importantes.

Minification des fichiers

Réduire la taille des fichiers HTML, CSS et JavaScript en supprimant les espaces, les commentaires et les caractères inutiles contribue à un temps de chargement plus rapide.

Éviter les bugs d’affichage sur les navigateurs pour le SEO

Bug affichage SEO

Notre belle langue française est riche en caractères accentués : é, à, ê, ç, ë, etc. Pour que ces caractères s’affichent correctement sur un écran, le navigateur doit être capable de les interpréter. Le navigateur est comme une sorte de traducteur : il a pour fonction d’afficher le plus rapidement possible son interprétation d’un langage Web.

Derrière toute page Internet se cachent plusieurs dizaines de lignes de codes. Si on veut que le navigateur interprète correctement le contenu d’un site, il est nécessaire de coder les textes dans les règles de l’art. Dans le cas contraire, les navigateurs rencontreront des difficultés à afficher correctement ce type de lettres. À la place du caractère accentué en question, un point d’interrogation, une sorte de losange ou bien encore une case cochée pourrait être diffusé.

Ce type de bug est potentiellement préjudiciable. Il signifie qu’à certains endroits, le contenu du site demeure illisible. Les moteurs de recherche risquent donc de pénaliser ce type de page, ce qui aura un impact négatif pour l’optimisation du référencement naturel.

Pour en savoir plus sur le codage des caractères accentués, reportez-vous sur l’excellent site d’Alexandre Alapetite.

Exemple d’un mauvais encodage pour le SEO

Le site Planète Star Wars (excellent site pour tous les amoureux de la Guerre des Etoiles, soit dit en passant) n’a visiblement pas bien encodé son site.

Exemple avec l’article « Hayden Christensen partage son ressenti sur son retour dans Star Wars« , on se rend compte que certains caractères que, dans sa version mobile, certains caractères apparaissent mal sur le navigateur du smartphone. Comme expliqué dans cet article, cela peut devenir préjudiciable en matière de référencement naturel…

Bug affichage SEO Star wars

Gestion des scripts et des styles en SEO

Gestion des scripts des styles en SEO

Le fonctionnement d’un site Internet implique l’utilisation de différents scripts et feuilles de style. Ces éléments peuvent cependant ralentir le chargement d’un site, ce qui peut entraîner une pénalisation par Google.

Voici comment optimiser ces éléments :

Externalisation des scripts et des styles

  • Scripts : il est recommandé d’externaliser les scripts JavaScript en les plaçant dans des fichiers séparés hébergés sur des serveurs spécialisés ou des CDN (Content Delivery Networks). Cela réduit la charge sur votre serveur principal et améliore le temps de chargement.
  • Feuilles de style : de même, les feuilles de style CSS peuvent être externalisées pour une gestion plus efficace. Utilisez des outils comme Google Fonts pour héberger vos styles.

Optimisation du chargement

  1. Pour les scripts :
    • Placement sous la ligne de flottaison : placez les scripts en bas de votre page HTML pour que le contenu principal se charge plus rapidement. Cela permet aux utilisateurs de voir le contenu même si les scripts prennent du temps à charger.
    • Asynchrone et différé : utilisez les attributs async et defer pour charger les scripts de manière asynchrone, évitant ainsi de bloquer le rendu de la page.
  2. Pour les feuilles de style :
    • Compression : compressez les fichiers CSS pour réduire leur taille. Des outils comme CSSNano ou CleanCSS peuvent vous aider à compresser vos styles sans en altérer l’apparence.
    • Inlining critical CSS : inclure le CSS essentiel directement dans le fichier HTML permet de rendre la page visible plus rapidement, tandis que le reste du CSS peut être chargé de manière asynchrone.

Exemple de gestion optimisée

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple de page optimisée</title>
    <link rel="stylesheet" href="styles/main.css">
    <style>
        /* Critical CSS inline */
        body { font-family: Arial, sans-serif; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>Bienvenue sur mon site optimisé</h1>
    <p>Contenu principal de la page.</p>
    <!-- Scripts placés en bas pour un chargement plus rapide -->
    <script src="scripts/main.js" defer></script>
</body>
</html>

Conclusion

L’optimisation du codage et du chargement des scripts et des styles est essentielle pour améliorer les performances de votre site et, par conséquent, le SEO. En respectant ces bonnes pratiques, vous pouvez non seulement offrir une meilleure expérience utilisateur mais aussi augmenter vos chances de voir votre site mieux classé sur les moteurs de recherche.


Continuez à suivre cette série pour découvrir d’autres aspects techniques du référencement naturel et maximiser la performance de votre site web.

Commentaires

Laisser un commentaire

Votre adresse E-Mail ne sera pas publiée
Les champs avec un astérisque sont obligatoires *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.