Quand tu rédiges un article pour ton blog e-commerce, la structure compte autant que le contenu. Un article bien organisé, c'est un article que Google comprend, que les visiteurs lisent en entier, et qui ramène du trafic qualifié. C'est la base du SEO technique qui précède tout le reste.
Commençons par les fondamentaux. Chaque article a besoin de trois métadonnées clés dans la balise head : le title (70 caractères max), la meta description (160 caractères), et un meta charset pour le texte. Ces trois éléments apparaissent directement dans les résultats Google.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Structurer ses articles e-commerce : guide SEO</title>
<meta name="description" content="Bonnes pratiques pour structurer articles de blog e-commerce et améliorer ton SEO technique.">
<meta name="robots" content="index, follow">
</head>La meta description n'affecte pas directement le classement, mais elle influence le taux de clic. Une bonne description augmente de 10 à 20% le nombre de visiteurs.
Le schema JSON-LD permet à Google de comprendre le contexte de ton article. Pour un blog e-commerce, utilise Article ou NewsArticle. Cela enrichit les résultats de recherche avec la date, l'auteur, et l'image de couverture. C'est surtout utile si tu vises les featured snippets.
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Structurer ses articles e-commerce",
"description": "Guide complet des bonnes pratiques SEO",
"author": {
"@type": "Person",
"name": "Ton nom"
},
"datePublished": "2026-08-16",
"dateModified": "2026-08-16",
"image": "https://example.com/image.jpg",
"articleBody": "Contenu complet de l'article..."
}Voici la différence entre un HTML sans structure et un HTML sémantique. Le premier, Google le lit comme du texte brut. Le second, il le comprend.
| 1 | - | <div class="post"> | |
| 2 | - | <div class="title">Mon Article</div> | |
| 3 | - | <div class="content"> | |
| 4 | - | <p>Introduction...</p> | |
| 1 | + | <article> | |
| 2 | + | <h1>Mon Article</h1> | |
| 3 | + | <time datetime="2026-08-16">16 août 2026</time> | |
| 4 | + | <section> | |
| 5 | + | <h2>Section 1</h2> | |
| 5 | 6 | <p>Section 1 texte...</p> | |
| 7 | + | </section> | |
| 8 | + | <section> | |
| 9 | + | <h2>Section 2</h2> | |
| 6 | 10 | <p>Section 2 texte...</p> | |
| 7 | - | </div> | |
| 8 | - | </div> | |
| 11 | + | </section> | |
| 12 | + | </article> |
| 1 | <div class="post"> |
| 2 | <div class="title">Mon Article</div> |
| 3 | <div class="content"> |
| 4 | <p>Introduction...</p> |
| 5 | <p>Section 1 texte...</p> |
| 6 | <p>Section 2 texte...</p> |
| 7 | </div> |
| 8 | </div> |
| 1 | <article> |
| 2 | <h1>Mon Article</h1> |
| 3 | <time datetime="2026-08-16">16 août 2026</time> |
| 4 | <section> |
| 5 | <h2>Section 1</h2> |
| 6 | <p>Section 1 texte...</p> |
| 7 | </section> |
| 8 | <section> |
| 9 | <h2>Section 2</h2> |
| 10 | <p>Section 2 texte...</p> |
| 11 | </section> |
| 12 | </article> |
Pour structurer ton article correctement, utilise h1 pour le titre principal (un seul), h2 pour les sections, h3 pour les sous-sections. Encapsule tout dans une balise article. Les balises p pour les paragraphes, strong pour l'important, em pour l'accent. Et time pour la date.
<article>
<h1>Titre principal de l'article</h1>
<time datetime="2026-08-16">Publié le 16 août 2026</time>
<section>
<h2>Première section</h2>
<p>Contenu introductif avec du <strong>texte important</strong> et <em>texte en italique</em>.</p>
<h3>Sous-section</h3>
<p>Détails supplémentaires...</p>
</section>
<section>
<h2>Deuxième section</h2>
<p>Suite du contenu...</p>
</section>
</article>Avant de publier, tu dois vérifier six points essentiels :
Le h1 est présent et unique, et résume l'article en moins de 60 caractères.
Les h2 structurent l'article et commencent par une requête ou un mot-clé.
La meta description vend en 160 caractères, sans être une copie du titre.
L'image principale a un attribut alt descriptif, pas juste image1.jpg.
Les liens internes pointent vers d'autres articles de ton site avec du texte ancre pertinent.
Aucun mot-clé n'est bourré artificiellement.
Vise 1.5% de densité maximum.
4 MIN DE LECTURE
Le code Next.js qui plante en prod, c'est rarement la logique — c'est ce qu'on oublie de gérer. error.tsx, loading.tsx, états vides, échecs de Server Actions : le guide pour livrer un vrai produit.
Lire l'article10 MIN DE LECTURE
Tutoriel Tailwind CSS pour débuter de zéro : installation, premières classes, un bouton, une carte produit et le responsive sans media query. Avec exemples de code.
Lire l'article