Définition
HTML (HyperText Markup Language) est le langage de balisage standard utilisé pour créer et structurer le contenu des pages web. Il utilise des balises pour définir les différents éléments d’une page : titres, paragraphes, liens, images, etc.
C’est le squelette de toute page web et un fondamental du SEO technique.
Structure de base
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page</title>
<meta name="description" content="Description de la page">
</head>
<body>
<h1>Titre principal</h1>
<p>Contenu de la page...</p>
</body>
</html>
Éléments HTML importants pour le SEO
Head (en-tête)
<title>: Titre de la page (facteur de ranking)<meta description>: Description pour les SERP<meta robots>: Instructions d’indexation<link canonical>: URL canonique<link hreflang>: Versions linguistiques
Headings (titres)
<h1>: Titre principal (un seul par page)<h2>à<h6>: Sous-titres hiérarchiques
Contenu
<p>: Paragraphes<ul>,<ol>,<li>: Listes<strong>,<em>: Mise en emphase
Liens
<a href="">: Liens hypertextes- Attributs : rel=“nofollow”, rel=“sponsored”
Images
<img src="" alt="">: Images avec texte alternatif<picture>: Images responsives
Données structurées
<script type="application/ld+json">: JSON-LD
Balises SEO essentielles
Dans le head
<title>Mot-clé principal - Description | Marque</title>
<meta name="description" content="Description engageante de 155 caractères...">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/page">
Dans le body
<h1>Titre optimisé avec mot-clé</h1>
<p>Premier paragraphe avec mot-clé naturellement intégré...</p>
<img src="image.jpg" alt="Description pertinente de l'image">
<a href="/autre-page">Ancre descriptive</a>
HTML sémantique
Nouveaux éléments HTML5
<header>: En-tête de page ou section<nav>: Navigation<main>: Contenu principal<article>: Article autonome<section>: Section thématique<aside>: Contenu secondaire<footer>: Pied de page
Avantages pour le SEO
- Meilleure compréhension par Google
- Accessibilité améliorée
- Structure plus claire
HTML et rendu JavaScript
Problème du JS-heavy
Google peut avoir du mal à rendre le JavaScript complexe.
Solutions
- Server-Side Rendering (SSR)
- Pre-rendering
- Progressive enhancement
Vérification
Utilisez l’outil d’inspection d’URL de Search Console.
Erreurs HTML courantes
Impact SEO
- Balises non fermées
- Structure de headings incorrecte
- Alt manquants sur les images
- Liens brisés
- Code invalide
Validation
Utilisez le validateur W3C pour vérifier votre HTML.
HTML et performance
Best practices
- Minimiser le HTML
- Éviter les balises inutiles
- Lazy loading pour les images
- Code propre et organisé
Impact Core Web Vitals
Un HTML lourd ou mal structuré peut impacter le LCP.
Outils de diagnostic
Analyse HTML
- View Source (navigateur)
- DevTools > Elements
- Screaming Frog
- Validateur W3C
Spécifique SEO
- Google Search Console
- Rich Results Test
- Lighthouse
Conclusion
HTML est le fondement de toute stratégie SEO technique. Un HTML propre, sémantique et correctement structuré facilite le travail des moteurs de recherche et améliore l’accessibilité. Maîtrisez les balises essentielles et utilisez les éléments sémantiques pour communiquer clairement la structure de votre contenu à Google.