Code HTML5 et référencement (SEO)

Modifié le 7 novembre 2025

Doctype et langue

Utiliser le doctype HTML5 en première ligne ainsi que la langue du document.

<!doctype html> <html lang="fr">

La déclaration pour mobile

Le mode responsive est devenu indispensable pour le référencement. Il faut vérifier la bonne déclaration de la balise méta pour définir le viewport et assurer un affichage responsive. L’indexation de Google exige un rendu cohérent sur mobile et sans erreurs d’affichage.

<meta name="viewport" content="width=device-width, initial-scale=1">

Les balises méta pour le titre et la description

Les balises <title> et <meta name="description"> sont essentielles et ne peuvent être négligées.

Une balise title unique, descriptive, ≤ 60–65 caractères réels.
Une meta description synthétique, ≤ 155–160 caractères, avec un texte accrocheur non en majuscules, intégrant les mots-clés ou expressions principales.

Exemple :

<title>Comparatif des Kits UI</title>
<meta name="description" content="Guide pour choisir un Kit UI efficace compatible avec le framework Tailwind.">

Utiliser la sémantique des balises HTML5

On oublie souvent l’importance des balises de structure (<header>, <nav>, <main>, <article>, <aside>, <footer>) pour structurer correctement les pages. Ces balises donnent du sens au contenu et facilitent la hiérarchisation.

Le contenu principal, contenant vos mots-clés, devrait se trouver dans la balise <main>.
Une page propre et bien structurée sera plus facile à explorer pour les robots qu’une page désorganisée.

L’accessibilité et le référencement

Rendre un site accessible, même partiellement, est un excellent investissement. On distingue deux niveaux d’accessibilité :

Accessibilité technique : la page doit être lisible sans erreur, compatible mobile et indexable par les robots.
Accessibilité humaine (WCAG / RGAA) : elle améliore l’expérience utilisateur et, indirectement, le référencement.

Exemples de bonnes pratiques :

Fournir un attribut alt pertinent pour chaque image. Laisser vide pour les images purement décoratives.
Lier les <label> aux champs de formulaire, utiliser aria-label uniquement si nécessaire.
Fournir des sous-titres ou transcriptions pour les contenus multimédias.

Éviter le mélange de code

Un code propre, lisible et bien structuré favorise le référencement.
Il faut éviter de mélanger HTML, CSS et JavaScript dans un même fichier, les fichiers CSS et JS doivent être séparés.

Chargement des ressources

La vitesse d’affichage est un facteur de classement.
L’utilisation de systèmes de cache, la compression et la minification du code sont essentiels.

Utiliser rel="preload" pour les ressources critiques ou rel="prefetch" pour les anticiper.
Charger le JavaScript avec defer ou module selon le cas.
Activer le cache HTTP côté serveur.
Utiliser loading="lazy" pour les images et iframes hors écran.

Exemple :

<link rel="preload" as="font" href="/fonts/inter-var.woff2" type="font/woff2" crossorigin>
<script src="/app.js" defer></script>
<img src="/img/produit.webp" alt="Vélo électrique modèle X noir" loading="lazy">

Formats d’images optimisés

Privilégier les formats modernes WebP et AVIF avec un fallback si nécessaire.
Indiquer correctement la taille des images pour garantir la stabilité visuelle, la vitesse de chargement reste un critère SEO important.

Données structurées en JSON-LD

Le JSON-LD est aujourd’hui la méthode la plus propre et la plus maintenable pour enrichir une page avec des données structurées. Il facilite la compréhension du contexte par les moteurs de recherche.

Implémenter le schéma approprié (WebPage, Article, Product, BreadcrumbList, FAQPage, etc.).
Valider avec un outil de test de données structurées.

Exemple minimal :

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "Comparatif vélos électriques urbains 2026",
  "url": "https://www.exemple.fr/velos-electriques-urbains"
}
</script>

Liens internes et navigation

La navigation principale doit se trouver dans une balise <nav>. La mise en place d’un fil d’Ariane (breadcrumb) est recommandée, idéalement en JSON-LD, pour clarifier la structure du site.

Gestion des liens

Vérifier que les liens canoniques sont corrects, notamment sur les CMS.
Utiliser des outils pour détecter les liens morts.
Pour les sites multilingues, la balise hreflang doit être correctement configurée.

Exemples :

<link rel="canonical" href="https://www.exemple.fr/velos-electriques-urbains">
<link rel="alternate" hreflang="fr" href="https://www.exemple.fr/velos-electriques-urbains">
<link rel="alternate" hreflang="en" href="https://www.example.com/electric-city-bikes">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/">

Attention au fichier robots.txt

Ce petit fichier à la racine du site peut avoir un impact majeur s’il est mal configuré. Il contrôle l’accès des robots d’indexation à certaines parties du site. Si des dossiers d'administration et de templates sont mal configuré, un blocage involontaire des fichiers CSS ou JavaScript et possible peut nuire gravement au référencement.

Se méfier également de la directive index, nofollow : une fois lue, il peut falloir du temps avant qu’un site redevienne entièrement indexable.

Exemple :

<meta name="robots" content="index,nofollow">

Commentaires dans le code

Les commentaires ne sont pas indexés, mais ils sont très utiles pour les développeurs.
Il est courant d’utiliser le mot-clé TODO pour signaler une action à effectuer.

Exemple :

<!-- Bloc comparatif, objectif : synthèse des critères clés LCP-friendly. TODO: ajouter score autonomie vérifié -->

Métadonnées sociales

Les métadonnées sociales comme Open Graph (Facebook) et Twitter Cards améliorent la visibilité lors du partage de liens. Les plugins des CMS comme WordPress ou Webflow facilitent leur intégration.

<meta property="og:type" content="article">
<meta property="og:title" content="Comparatif vélos électriques urbains 2026">
<meta property="og:image" content="https://www.exemple.fr/og/velos-urbains.jpg">
<meta name="twitter:card" content="summary_large_image">