Bien coder son site pour le SEO

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 : bien coder son site pour le SEO et optimiser le chargement des scripts et des styles pour améliorer la performance de votre site web et son référencement naturel.

Pourquoi bien coder son 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 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.

Comment bien coder son site proprement pour le SEO ?

Un codage propre et structuré est fondamental pour l’optimisation du référencement naturel. Cela assure une expérience utilisateur optimale et permet aussi une bonne compréhension par les moteurs de recherche.

Voici 3 principes clés à suivre pour bien coder son site pour un référencement naturel propre :

1. Respect des standards HTML :

Utiliser des balises HTML correctes et bien structurées permet de garantir une meilleur compréhension par les moteurs de recherche. Ils peuvent ainsi indexer plus facilement le contenu de votre site.

2. Commenter votre code :

Des commentaires clairs et pertinents aident à la maintenance du site. Cela assure également le fait que les moteurs de recherche interprètent correctement les sections importantes.

3. 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.

Comment éviter les bugs d’affichage sur les navigateurs ?

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« . 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…

Comment gérer des scripts et des styles pour bien coder son site pour le 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 sur le codage de site en SEO

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. À très bientôt pour explorer plus en détail les techniques et astuces du référencement naturel !

Pour toute question ou pour un accompagnement personnalisé, contactez-moi !