balise H1
On-Page SEO : balise H1, titre de niveau 1 et élément HTML clé
Introduction
L’optimisation pour les moteurs de recherche (SEO) est une discipline essentielle pour améliorer la visibilité d’un site web dans les résultats des moteurs de recherche (SERP). Parmi les nombreux éléments qui composent le SEO on-page, le titre de niveau 1, ou balise H1, occupe une place centrale. Ce titre est à la fois un élément clé de la structure HTML d’une page web et un signal important pour la compréhension du sujet de la page par les moteurs de recherche.
La balise H1 contribue également à la lisibilité, à l’accessibilité et à l’expérience utilisateur, qui sont aujourd’hui au cœur des critères de qualité des contenus. Dans une logique de référencement moderne, il ne s’agit plus seulement de « placer un mot-clé » dans un titre, mais de construire une structure claire, logique et utile pour l’internaute.
Dans cet article, nous allons explorer en profondeur le rôle de la balise H1 dans le SEO on-page, ses bonnes pratiques d’utilisation, sa différence avec la balise </code>, ainsi que les outils et ressources nécessaires pour l’optimiser efficacement. Nous aborderons aussi son impact sur l’accessibilité, l’UX et la structure globale des contenus, sans oublier une foire aux questions détaillée.</p> <h2 id="concepts-cles">Concepts clés</h2> <h3 id="qu-est-ce-qu-un-titre-de-niveau-1-balise-h1">Qu’est-ce qu’un titre de niveau 1 (balise H1) ?</h3>
<p>Le titre de niveau 1, ou <strong>balise H1</strong>, est l’élément HTML qui désigne le <strong>titre principal visible d’une page web</strong>. Il s’agit du titre que les utilisateurs voient en premier lorsqu’ils consultent une page de contenu : article de blog, page de service, fiche produit, page d’accueil, etc.</p>
<p>Sur le plan sémantique, la balise H1 se situe au sommet de la hiérarchie des titres (H1, H2, H3, jusqu’à H6). Elle indique le <strong>sujet central</strong> de la page et doit résumer clairement ce que l’utilisateur va trouver dans le contenu. Même si la spécification HTML5 autorise techniquement plusieurs H1, la bonne pratique en SEO consiste à utiliser <strong>un seul H1 principal par page</strong> pour garantir une hiérarchie claire et cohérente.</p>
<p>Contrairement aux autres balises de titre (H2 à H6), qui servent à structurer les sous-parties, l’H1 est réservé au <strong>titre principal de la page</strong>. Il doit refléter précisément le contenu, inclure naturellement le mot-clé principal (ou l’expression clé ciblée) et éventuellement des variantes ou synonymes, tout en restant lisible et attractif pour l’utilisateur.</p> <h3 id="balise-h1-balise-et-seo-title-bien-faire-la-distinction">Balise H1, balise <title> et SEO title : bien faire la distinction</h3>
<p>Une confusion fréquente en SEO on-page concerne la différence entre la balise H1 et la balise <code><title></code>, souvent appelée <strong>SEO title</strong>. Il s’agit de deux éléments distincts, complémentaires, qui n’ont ni la même fonction ni le même emplacement :</p>
<ul> <li><strong>Balise <title> (SEO title)</strong> : c’est le titre qui s’affiche dans les résultats des moteurs de recherche (snippet) et dans l’onglet du navigateur. Il sert en priorité à <strong>attirer le clic</strong> et à décrire la page dans la SERP. Sa longueur est généralement optimisée aux alentours de 45 à 65 caractères pour limiter le risque de troncature.</li> <li><strong>Balise H1</strong> : c’est le titre principal <strong>affiché dans le contenu de la page</strong>. Il structure la page pour les utilisateurs et pour les moteurs de recherche. Il peut être plus descriptif que la balise <code><title></code>, car il n’est pas limité par l’espace d’affichage de la SERP.</li>
</ul>
<p>Il est tout à fait acceptable que le H1 soit <strong>identique</strong> ou très proche de la balise <code><title></code>, mais ce n’est pas une obligation stricte. L’essentiel est que ces deux éléments reflètent clairement le même sujet et la même intention de recherche, tout en restant naturels et cohérents pour l’utilisateur.</p> <h3 id="role-du-h1-dans-le-seo-on-page">Rôle du H1 dans le SEO on-page</h3>
<p>Les moteurs de recherche, comme Google, utilisent le texte contenu dans la balise H1 pour mieux comprendre le <strong>thème principal d’une page web</strong> et la structure générale du contenu. Le H1 fait partie d’un ensemble de signaux qui aident les algorithmes à déterminer de quoi parle la page et à quelles requêtes elle pourrait répondre.</p>
<p>Il est important de comprendre que le H1 n’est pas un « bouton magique » qui garantirait un bon classement à lui seul. Il s’agit d’un <strong>signal de pertinence</strong>, intégré à une multitude d’autres facteurs : qualité du contenu, structure globale des titres (H2, H3, etc.), maillage interne, vitesse de chargement, compatibilité mobile, backlinks, engagement des utilisateurs, etc. Un H1 bien optimisé contribue à clarifier le sujet, à structurer le texte et à améliorer le contexte sémantique, ce qui peut soutenir positivement le positionnement.</p>
<p>À l’inverse, un H1 vague, trompeur, sur-optimisé ou absent peut brouiller la compréhension de la page, nuire à la lisibilité et dégrader indirectement les performances SEO. L’objectif n’est donc pas de « forcer » les mots-clés, mais de rédiger un titre naturel, pertinent et utile.</p> <h3 id="role-du-h1-dans-l-accessibilite-et-l-experience-utilisateur">Rôle du H1 dans l’accessibilité et l’expérience utilisateur</h3>
<p>Au-delà du référencement, la balise H1 joue un rôle important en <strong>accessibilité numérique</strong> et en <strong>UX</strong>. Les lecteurs d’écran et certains outils d’assistance s’appuient sur la structure des headings (H1, H2, H3…) pour permettre aux personnes malvoyantes ou ayant des difficultés de lecture de naviguer efficacement dans le contenu.</p>
<p>Un H1 unique, clair et bien positionné permet :</p>
<ul> <li>de comprendre immédiatement le sujet de la page dès l’arrivée ;</li> <li>de se repérer dans la hiérarchie de l’information ;</li> <li>d’améliorer le « scan » du contenu sur desktop comme sur mobile ;</li> <li>de réduire le taux de rebond lié à une mauvaise compréhension du sujet.</li>
</ul>
<p>En résumé, un H1 bien conçu renforce à la fois <strong>le confort de lecture</strong>, la <strong>navigation</strong> et la <strong>compréhension</strong>, autant d’éléments susceptibles d’améliorer les signaux d’engagement (temps passé sur la page, profondeur de session, taux de clic interne), avec un impact indirect positif sur le SEO.</p> <h3 id="comparaison-avec-les-autres-elements-html-de-titre-h2-a-h6">Comparaison avec les autres éléments HTML de titre (H2 à H6)</h3>
<p>Si la balise H1 est utilisée pour le titre principal d’une page, les balises <strong>H2 à H6</strong> servent à organiser le reste du contenu en <strong>sections</strong> et <strong>sous-sections</strong>. Cette hiérarchie permet :</p>
<ul> <li>aux moteurs de recherche de mieux comprendre la structure et la progression du contenu ;</li> <li>aux utilisateurs de balayer rapidement la page pour repérer les informations qui les intéressent ;</li> <li>d’isoler des blocs thématiques (parties, sous-parties, FAQ, encadrés, etc.).</li>
</ul>
<p>Par exemple, dans un article de blog, le H1 introduit le sujet global, les H2 présentent les grandes parties, les H3 les sous-parties, et ainsi de suite. Les mots-clés secondaires et expressions de longue traîne peuvent être placés dans les H2 et H3, à condition que cela reste naturel et pertinent. Il est non seulement autorisé, mais recommandé d’utiliser des <strong>mots-clés sémantiquement liés</strong> dans les sous-titres, afin de renforcer la topical authority et de couvrir l’intention de recherche sous plusieurs angles.</p> <h2 id="bonnes-pratiques-pour-optimiser-la-balise-h1">Bonnes pratiques pour optimiser la balise H1</h2> <h3 id="optimiser-le-contenu-du-h1">Optimiser le contenu du H1</h3>
<p>Pour qu’une balise H1 soit efficace en SEO on-page, plusieurs bonnes pratiques peuvent être appliquées :</p>
<ul> <li><strong>Inclure des mots-clés pertinents</strong> : assurez-vous que le H1 contient le <strong>mot-clé principal</strong> de la page, de préférence placé de façon naturelle dès le début ou dans la première partie du titre. Vous pouvez y intégrer également un terme secondaire ou une précision (localisation, type de service, bénéfice principal).</li> <li><strong>Utiliser un langage clair et précis</strong> : le H1 doit décrire sans ambiguïté le contenu de la page. Évitez les titres trop génériques (« Accueil », « Services », « Blog ») lorsque cela est possible, en leur préférant des formulations plus explicites (« Services de création de sites web sur mesure », « Blog SEO et marketing digital », etc.).</li> <li><strong>Maintenir une certaine concision</strong> : il n’existe pas de longueur officielle imposée pour le H1, mais il est recommandé de rester <strong>raisonnablement concis</strong>, afin que le titre soit entièrement lisible, notamment sur mobile. Un H1 trop long peut devenir difficile à lire et à comprendre rapidement.</li> <li><strong>Éviter le bourrage de mots-clés</strong> : répéter le même mot-clé plusieurs fois dans un H1 donne un résultat peu naturel et peut être perçu comme du spam. Préférez une phrase fluide qui intègre un mot-clé principal et, éventuellement, un synonyme ou une précision contextuelle.</li> <li><strong>Travailler l’aspect marketing</strong> : au-delà du SEO, le H1 doit donner envie de lire. Un titre accrocheur, qui met en avant un bénéfice concret, une solution ou une promesse claire, améliore les chances que l’utilisateur poursuive sa lecture.</li>
</ul> <h3 id="ameliorer-la-structure-html-et-la-hierarchie-des-titres">Améliorer la structure HTML et la hiérarchie des titres</h3>
<p>Une structure HTML bien organisée est essentielle pour que les moteurs de recherche et les utilisateurs comprennent facilement votre contenu. Pour la balise H1, plusieurs règles de bon sens s’appliquent :</p>
<ul> <li><strong>Sémantique correcte</strong> : utilisez la balise H1 <strong>uniquement pour le titre principal</strong> de la page. Même si plusieurs H1 sont techniquement possibles en HTML5, la bonne pratique en SEO et en accessibilité reste d’en utiliser un seul, placé en haut du contenu principal.</li> <li><strong>Hiérarchie logique</strong> : structurez vos sous-titres en respectant l’ordre H2 > H3 > H4, etc. Un H2 doit présenter une grande section, un H3 une sous-section, et ainsi de suite. Évitez de sauter des niveaux sans raison (par exemple passer de H1 directement à H4) afin de conserver une structure claire.</li> <li><strong>Intégration dans la mise en page</strong> : assurez-vous que le H1 soit clairement visible et mis en valeur dans le design de la page (taille de police, gras, contraste de couleur suffisant). Un titre peu lisible, mal placé ou confondu avec un simple paragraphe nuit à l’expérience utilisateur.</li> <li><strong>Unicité par page</strong> : chaque page doit avoir un <strong>H1 unique</strong>, adapté à son contenu spécifique. Évitez de réutiliser exactement le même H1 sur plusieurs pages, sauf cas très particulier (par exemple une pagination gérée différemment).</li> <li><strong>Compatibilité mobile</strong> : testez l’affichage du H1 sur différents appareils (smartphone, tablette, desktop). Le titre doit rester lisible sans coupures gênantes ou retour à la ligne illogique.</li>
</ul> <h3 id="creer-du-contenu-de-qualite-autour-du-h1">Créer du contenu de qualité autour du H1</h3>
<p>Un H1, même très bien optimisé, ne peut pas compenser un contenu faible ou peu pertinent. Pour tirer pleinement profit de la balise H1 dans le cadre du SEO on-page, le reste de la page doit répondre aux critères de qualité modernes :</p>
<ul> <li><strong>Pertinence et unicité</strong> : le contenu doit répondre clairement à l’intention de recherche associée au H1. Il doit être original, éviter le duplicate content, et apporter une valeur concrète (explications, démonstrations, exemples, données, études de cas, etc.).</li> <li><strong>Structure lisible</strong> : utilisez des H2, H3, listes à puces et paragraphes courts pour faciliter la lecture et le scan rapide. Un internaute doit pouvoir comprendre l’essentiel du contenu en parcourant simplement les titres et les sous-titres.</li> <li><strong>Intégration naturelle des mots-clés</strong> : placez le mot-clé principal dans l’introduction, quelques sous-titres et la conclusion, accompagné de variantes sémantiques. L’objectif est de couvrir le sujet en profondeur, pas de répéter la même expression de manière artificielle.</li> <li><strong>Mise en page orientée utilisateur (UX)</strong> : un bon design, des marges suffisantes, une typographie lisible et un contraste adapté entre le texte et l’arrière-plan renforcent l’efficacité du H1 et de l’ensemble du contenu. Une page agréable à lire améliore l’engagement, ce qui peut, à terme, favoriser de meilleures performances SEO.</li> <li><strong>Maillage interne</strong> : profitez du contexte du H1 et des sections associées pour ajouter des liens internes vers d’autres pages pertinentes de votre site. Cela aide les moteurs de recherche à comprendre la structure globale de votre site et renforce la cohérence thématique.</li>
</ul> <h3 id="utiliser-les-autres-headings-h2-h3-pour-renforcer-la-thematique">Utiliser les autres headings (H2, H3…) pour renforcer la thématique</h3>
<p>Les balises H2, H3 et suivantes jouent un rôle complémentaire au H1. Elles permettent de :</p>
<ul> <li>détailler les différentes facettes du sujet annoncé dans le H1 ;</li> <li>intégrer des <strong>mots-clés secondaires</strong> et des requêtes de longue traîne ;</li> <li>répondre à plusieurs sous-intentions de recherche au sein d’une même page ;</li> <li>structurer des sections comme les FAQ, études de cas, tutoriels ou comparatifs.</li>
</ul>
<p>Par exemple, pour un article dont le H1 est « On-Page SEO : balise H1, titre de niveau 1 et élément HTML clé », les H2 peuvent traiter de la définition, des bonnes pratiques, des erreurs à éviter, des outils, tandis que les H3 détaillent chaque sous-thème. Cette organisation claire aide les moteurs à évaluer la profondeur du traitement du sujet et facilite la navigation de l’internaute.</p> <h2 id="erreurs-frequentes-a-eviter-avec-la-balise-h1">Erreurs fréquentes à éviter avec la balise H1</h2> <h3 id="multiplier-les-h1-sans-raison">Multiplier les H1 sans raison</h3>
<p>Même si le standard HTML5 autorise plusieurs H1 sur une même page, l’utilisation de plusieurs titres de niveau 1 peut créer une confusion sur le sujet central. Dans la plupart des cas, il est préférable de se limiter à <strong>un H1 unique par page</strong>, puis d’utiliser des H2 et H3 pour les sections secondaires. Les exceptions (applications web complexes, structures très particulières) doivent rester marginales.</p> <h3 id="sur-optimiser-ou-bourrer-de-mots-cles">Sur-optimiser ou bourrer de mots-clés</h3>
<p>Un H1 qui enchaîne artificiellement les mots-clés (« Balise H1 SEO H1 optimisation H1 moteur de recherche ») donne une mauvaise impression aux utilisateurs et n’apporte pas de bénéfice réel en référencement. Les algorithmes modernes privilégient la pertinence et la qualité rédactionnelle. Il est donc recommandé de privilégier une formulation naturelle et significative, qui intègre les mots-clés sans excès.</p> <h3 id="utiliser-des-titres-vagues-ou-trompeurs">Utiliser des titres vagues ou trompeurs</h3>
<p>Un H1 trop vague (« Bienvenue », « Page d’accueil », « Nos solutions ») n’aide ni l’utilisateur ni le moteur de recherche à comprendre précisément le contenu. À l’inverse, un titre trompeur (clickbait) qui promet un contenu que la page ne fournit pas risque d’augmenter le taux de rebond et de dégrader la confiance. Le H1 doit être <strong>cohérent</strong> avec le contenu réel de la page.</p> <h3 id="ignorer-l-accessibilite-et-la-lisibilite">Ignorer l’accessibilité et la lisibilité</h3>
<p>Un H1 mal contrasté, en police minuscule ou placé trop bas dans la page nuit à l’accessibilité. De même, l’absence de H1 ou l’utilisation du H1 uniquement pour des raisons graphiques (par exemple pour styliser un logo sans lien direct avec le contenu) compliquent la navigation pour les utilisateurs et les outils d’assistance. Il est préférable de conserver le H1 comme <strong>repère sémantique principal</strong> et d’utiliser les feuilles de style CSS pour la mise en forme.</p> <h2 id="outils-et-ressources-pour-optimiser-la-balise-h1">Outils et ressources pour optimiser la balise H1</h2> <h3 id="outils-utiles-pour-l-optimisation-du-h1">Outils utiles pour l’optimisation du H1</h3>
<ul> <li><strong>Google Search Console</strong> : cet outil permet d’analyser les performances d’une page web dans les résultats de recherche, d’identifier les requêtes qui génèrent des impressions et des clics, et de repérer les pages dont les titres ou les contenus méritent d’être améliorés. En observant le comportement des utilisateurs, vous pouvez ajuster vos H1 pour mieux répondre à l’intention de recherche.</li> <li><strong>Google Analytics</strong> : bien que principalement utilisé pour analyser le trafic, Google Analytics aide à comprendre comment les utilisateurs interagissent avec vos pages (taux de rebond, temps moyen passé, pages par session). En corrélant ces données avec vos H1, vous pouvez détecter les titres qui n’attirent pas suffisamment l’attention ou qui semblent mal alignés avec les attentes des visiteurs.</li> <li><strong>Outils de crawl SEO</strong> : des crawlers SEO (Screaming Frog, Sitebulb, etc.) permettent de recenser rapidement toutes les balises H1 de votre site, d’identifier les pages sans H1, celles qui en ont plusieurs, ou celles qui utilisent des titres dupliqués. Ces informations sont précieuses pour corriger la structure et améliorer la cohérence globale.</li> <li><strong>Éditeurs de contenu et CMS</strong> : la plupart des systèmes de gestion de contenu (WordPress, Drupal, Joomla, etc.) gèrent automatiquement une partie de la structure des titres. Il est néanmoins important de vérifier le code généré pour s’assurer que le thème ou le constructeur de page n’ajoute pas involontairement plusieurs H1.</li> <li><strong>Outils de test d’accessibilité</strong> : certains outils vérifient la hiérarchie des headings et la lisibilité (contraste de couleur, taille de police). Ils permettent de s’assurer que le H1 reste accessible et compréhensible pour tous les utilisateurs.</li>
</ul> <h3 id="ressources-supplementaires-sur-la-balise-h1-et-le-seo-on-page">Ressources supplémentaires sur la balise H1 et le SEO on-page</h3>
<ul> <li><a href="https://support.google.com/webmasters/answer/7451289">Guide officiel de Google sur l’optimisation des titres et des extraits</a> : ce guide explique comment structurer les titres et descriptions pour offrir une bonne expérience dans les résultats de recherche.</li> <li><a href="https://www.moz.com/seo/beginners-guide-to-seo">Guide débutant sur le SEO</a> : une introduction complète au référencement, incluant des sections dédiées à la structure des pages, aux titres et à la rédaction pour le web.</li> <li><a href="https://html.com/tags/h1/">Référence technique sur la balise H1</a> : une ressource utile pour comprendre la balise H1 d’un point de vue purement HTML et sémantique.</li>
</ul> <h2 id="bonnes-pratiques-specifiques-selon-le-type-de-page">Bonnes pratiques spécifiques selon le type de page</h2> <h3 id="page-d-accueil">Page d’accueil</h3>
<p>Sur une page d’accueil, la balise H1 doit présenter <strong>l’offre globale du site</strong> de manière claire et synthétique. Elle peut inclure la proposition de valeur principale ou le positionnement de la marque. Par exemple : « Agence web spécialisée en création de sites vitrines et e-commerce » est plus informatif que simplement le nom de l’entreprise.</p>
<p>Il est conseillé d’éviter d’utiliser uniquement un logo ou le nom de la marque comme H1, sauf pour les marques très connues où la notoriété prime. Dans la plupart des cas, un H1 décrivant ce que vous faites et pour qui vous le faites sera plus utile pour le visiteur comme pour le moteur de recherche.</p> <h3 id="articles-de-blog-et-contenus-editoriaux">Articles de blog et contenus éditoriaux</h3>
<p>Pour les articles de blog, le H1 correspond généralement au <strong>titre de l’article</strong>. Il doit :</p>
<ul> <li>inclure le sujet principal et le mot-clé cible ;</li> <li>être spécifique et orienté bénéfice (guide, tutoriel, étude, liste, analyse, etc.) ;</li> <li>rester fidèle au contenu réel de l’article ;</li> <li>se démarquer par sa clarté et son utilité.</li>
</ul>
<p>Un bon H1 pour un article peut, par exemple, prendre la forme d’une question (« Comment optimiser votre balise H1 pour le SEO on-page ? ») ou d’une promesse concrète (« 10 bonnes pratiques pour une balise H1 efficace »). Les H2 et H3 détailleront ensuite chaque aspect de la thématique.</p> <h3 id="pages-de-services-et-pages-commerciales">Pages de services et pages commerciales</h3>
<p>Sur les pages de services, la balise H1 doit à la fois <strong>présenter le service</strong> et rassurer l’internaute. Elle peut combiner le nom du service avec une précision sur le public visé ou le bénéfice principal, par exemple : « Création de sites e-commerce pour PME » ou « Accompagnement SEO pour entreprises B2B ».</p>
<p>Dans ce type de page, le H1 travaille main dans la main avec la balise <code><title></code> et le contenu héro (texte d’accroche, sous-titre, call-to-action) pour convaincre l’utilisateur de poursuivre sa visite ou de prendre contact.</p> <h3 id="fiches-produits">Fiches produits</h3>
<p>Pour les fiches produits, la balise H1 correspond en général au <strong>nom du produit</strong>, éventuellement enrichi de quelques informations clés (taille, couleur, usage, type de pack, etc.). Un H1 précis facilite la compréhension du produit, améliore la pertinence pour les requêtes de recherche spécifiques et aide les utilisateurs à s’assurer qu’ils se trouvent sur la bonne page.</p> <h2 id="foire-aux-questions-faq">Foire Aux Questions (FAQ)</h2> <h3 id="pourquoi-est-il-important-d-optimiser-le-h1">Pourquoi est-il important d’optimiser le H1 ?</h3>
<p>L’optimisation du H1 est importante car il sert à indiquer aux moteurs de recherche le <strong>sujet principal</strong> d’une page web et à clarifier immédiatement le contenu pour l’utilisateur. Un H1 pertinent, bien rédigé et bien positionné contribue à une meilleure compréhension de la page, améliore la lisibilité et peut soutenir positivement le classement dans les résultats de recherche en renforçant la pertinence et l’engagement des visiteurs.</p> <h3 id="puis-je-utiliser-plusieurs-h1-sur-une-meme-page">Puis-je utiliser plusieurs H1 sur une même page ?</h3>
<p>Sur le plan technique, HTML5 permet d’utiliser plusieurs H1 sur une même page, notamment dans des structures complexes. Cependant, en SEO on-page et pour la plupart des sites, il est recommandé d’utiliser <strong>un seul H1 par page</strong>. Cela facilite la compréhension du sujet principal par les moteurs de recherche, simplifie la navigation pour les utilisateurs et réduit les risques de confusion dans la hiérarchie des titres.</p> <h3 id="la-balise-h1-est-elle-un-facteur-de-classement-direct-et-majeur">La balise H1 est-elle un facteur de classement direct et majeur ?</h3>
<p>La balise H1 est un <strong>signal de pertinence</strong> que les moteurs de recherche prennent en compte pour comprendre le sujet et la structure d’une page. Cependant, elle ne constitue pas, à elle seule, un facteur de classement décisif. Les performances SEO dépendent d’un ensemble de critères (qualité du contenu, maillage interne, backlinks, performance technique, intention de recherche, etc.). Un H1 bien optimisé aide, mais il doit s’inscrire dans une stratégie de contenu globale et cohérente.</p> <h3 id="le-h1-doit-il-etre-identique-a-la-balise">Le H1 doit-il être identique à la balise <title> ?</h3>
<p>Le H1 n’a pas besoin d’être strictement identique à la balise <code><title></code>. Il est courant qu’ils soient très proches ou qu’ils reprennent les mêmes éléments, mais ils peuvent aussi être légèrement différents. L’important est que les deux titres <strong>décrivent clairement le même sujet</strong> et reflètent la même intention de recherche. La balise <code><title></code> peut être un peu plus orientée sur l’incitation au clic, tandis que le H1 peut être plus descriptif ou pédagogique.</p> <h3 id="existe-t-il-une-longueur-ideale-pour-le-h1">Existe-t-il une longueur idéale pour le H1 ?</h3>
<p>Il n’existe <strong>aucune règle officielle</strong> imposant une longueur précise pour la balise H1. Contrairement à la balise <code><title></code>, pour laquelle on conseille souvent une plage d’environ 45 à 65 caractères afin d’éviter la troncature dans la SERP, le H1 peut être plus long. Toutefois, il est recommandé de le garder <strong>clair, lisible et concis</strong> pour que l’utilisateur puisse en saisir immédiatement le sens, en particulier sur mobile.</p> <h3 id="dois-je-mettre-des-mots-cles-uniquement-dans-le-h1">Dois-je mettre des mots-clés uniquement dans le H1 ?</h3>
<p>Non, les mots-clés ne doivent pas être réservés uniquement au H1. Il est recommandé d’intégrer le mot-clé principal dans le H1, mais aussi dans l’introduction, un ou plusieurs sous-titres (H2, H3), la conclusion et le corps du texte, de manière naturelle. L’utilisation de mots-clés secondaires, de synonymes et d’expressions de longue traîne dans les autres headings et dans le contenu renforce la <strong>pertinence sémantique</strong> de la page.</p> <h3 id="que-se-passe-t-il-si-ma-page-n-a-pas-de-h1">Que se passe-t-il si ma page n’a pas de H1 ?</h3>
<p>Si une page n’a pas de H1, les moteurs de recherche tenteront malgré tout de comprendre le sujet en s’appuyant sur les autres éléments (titres secondaires, texte, liens, etc.). Cependant, l’absence de H1 complique la tâche des algorithmes et peut nuire à la clarté de la page. De plus, cela réduit l’accessibilité pour les personnes utilisant des lecteurs d’écran. Il est donc fortement recommandé d’inclure un <strong>H1 unique et explicite</strong> sur chaque page importante de votre site.</p> <h3 id="comment-savoir-si-mes-h1-sont-bien-configures">Comment savoir si mes H1 sont bien configurés ?</h3>
<p>Pour vérifier la qualité de vos H1, vous pouvez :</p>
<ul> <li>analyser la structure des titres dans le code HTML ou via l’inspecteur de votre navigateur ;</li> <li>utiliser un outil de crawl SEO pour recenser les H1 manquants, dupliqués ou multiples ;</li> <li>observer les performances de vos pages dans Google Search Console (impressions, clics, position moyenne) et adapter vos H1 en fonction des requêtes réelles ;</li> <li>tester la lisibilité et l’impact de vos titres sur différents appareils et résolutions.</li>
</ul> <h3 id="faut-il-inclure-la-marque-dans-le-h1">Faut-il inclure la marque dans le H1 ?</h3>
<p>Inclure le nom de la marque dans le H1 n’est pas obligatoire. Sur certaines pages (page d’accueil, pages institutionnelles), il peut être pertinent de combiner la marque avec un descriptif de l’activité (par exemple « Nom de la marque – Agence de communication digitale »). Sur les articles de blog ou les fiches produits, il est souvent plus efficace de se concentrer sur le sujet ou le produit lui-même, la marque étant déjà présente ailleurs (logo, pied de page, méta-données, etc.).</p> <h3 id="comment-adapter-le-h1-pour-le-mobile">Comment adapter le H1 pour le mobile ?</h3>
<p>Sur mobile, les écrans étant plus petits, il convient de :</p>
<ul> <li>privilégier des H1 <strong>courts et percutants</strong> ;</li> <li>vérifier que la taille de police reste lisible sans zoom excessif ;</li> <li>éviter les titres trop longs qui se coupent de façon peu lisible ;</li> <li>placer le H1 suffisamment haut dans la page pour qu’il soit visible dès le premier écran.</li>
</ul>
<p>Une bonne expérience mobile, combinée à un H1 clair, améliore l’engagement et diminue le risque de retour immédiat à la SERP.</p> </body>
</html>
</div>
<!-- CTA Section -->
<div class="mt-12 pt-8 border-t border-gray-200">
<div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl p-8 text-center text-white">
<h3 class="text-2xl font-bold mb-4">Besoin d'aide avec votre SEO ?</h3>
<p class="mb-6 text-purple-100">Notre équipe d'experts peut vous aider à optimiser votre site e-commerce</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/seo-ecommerce" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-purple-50 transition inline-block">
Découvrir nos services SEO
</a>
<a href="/#contact" class="bg-purple-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-900 transition inline-block">
Nous contacter
</a>
</div>
</div>
</div>
</article>
<!-- Section Commentaires -->
<div class="mt-12 max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 md:p-12">
<h2 class="text-3xl font-bold text-gray-900 mb-6 flex items-center gap-3">
<i class="fas fa-comments text-purple-600"></i>
Commentaires
</h2>
<!-- Liste des commentaires approuvés -->
<div id="comments-list" class="mb-8 space-y-6">
<!-- Les commentaires approuvés seront chargés ici via JavaScript -->
</div>
<!-- Formulaire de commentaire -->
<div class="border-t border-gray-200 pt-8">
<h3 class="text-xl font-semibold text-gray-900 mb-4">Laisser un commentaire</h3>
<form id="comment-form" class="space-y-4">
<input type="hidden" id="article-slug" value="balise-h1">
<div class="grid md:grid-cols-2 gap-4">
<div>
<label for="comment-name" class="block text-sm font-medium text-gray-700 mb-2">Nom *</label>
<input type="text" id="comment-name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
</div>
<div>
<label for="comment-email" class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
<input type="email" id="comment-email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
</div>
</div>
<div>
<label for="comment-message" class="block text-sm font-medium text-gray-700 mb-2">Message *</label>
<textarea id="comment-message" name="message" rows="5" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"></textarea>
</div>
<div class="text-sm text-gray-600">
<i class="fas fa-info-circle text-purple-600"></i>
Votre commentaire sera soumis à modération avant publication.
</div>
<button type="submit" class="bg-gradient-to-r from-purple-600 to-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-blue-700 transition inline-flex items-center gap-2">
<i class="fas fa-paper-plane"></i>
Publier le commentaire
</button>
</form>
<div id="comment-status" class="mt-4 hidden"></div>
</div>
</div>
<!-- Navigation Articles -->
<div class="mt-12 max-w-4xl mx-auto">
<a href="/blog" class="inline-flex items-center gap-2 text-purple-600 hover:text-purple-800 transition font-semibold">
<i class="fas fa-arrow-left"></i>
Retour au blog
</a>
</div>
</div>
</section>
<!-- Script pour les commentaires -->
<script>
const articleSlug = 'balise-h1';
// Charger les commentaires approuvés
async function loadComments() {
try {
const response = await fetch(`/gestion-commentaires/get-comments.php?slug=${articleSlug}`);
const data = await response.json();
const commentsList = document.getElementById('comments-list');
if (data.success && data.comments.length > 0) {
commentsList.innerHTML = data.comments.map(comment => `
<div class="border-l-4 border-purple-600 pl-4 py-2">
<div class="flex items-center gap-2 mb-2">
<strong class="text-gray-900">${comment.name}</strong>
<span class="text-sm text-gray-500">•</span>
<span class="text-sm text-gray-500">${new Date(comment.date).toLocaleDateString('fr-FR')}</span>
</div>
<p class="text-gray-700">${comment.message}</p>
</div>
`).join('');
} else {
commentsList.innerHTML = '<p class="text-gray-500 italic">Aucun commentaire pour le moment. Soyez le premier à commenter !</p>';
}
} catch (error) {
console.error('Erreur lors du chargement des commentaires:', error);
}
}
// Gérer la soumission du formulaire
document.getElementById('comment-form').addEventListener('submit', async function(e) {
e.preventDefault();
const formData = {
slug: articleSlug,
name: document.getElementById('comment-name').value,
email: document.getElementById('comment-email').value,
message: document.getElementById('comment-message').value
};
const submitBtn = this.querySelector('button[type="submit"]');
const originalText = submitBtn.innerHTML;
submitBtn.disabled = true;
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Envoi en cours...';
try {
const response = await fetch('/gestion-commentaires/submit-comment.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
const result = await response.json();
const messageDiv = document.getElementById('comment-status');
if (result.success) {
messageDiv.className = 'mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg';
messageDiv.textContent = 'Merci ! Votre commentaire a été soumis et sera publié après modération.';
messageDiv.classList.remove('hidden');
this.reset();
} else {
messageDiv.className = 'mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg';
messageDiv.textContent = result.message || 'Une erreur est survenue. Veuillez réessayer.';
messageDiv.classList.remove('hidden');
}
} catch (error) {
const messageDiv = document.getElementById('comment-status');
messageDiv.className = 'mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg';
messageDiv.textContent = 'Erreur de connexion. Veuillez réessayer plus tard.';
messageDiv.classList.remove('hidden');
} finally {
submitBtn.disabled = false;
submitBtn.innerHTML = originalText;
}
});
// Charger les commentaires au chargement de la page
loadComments();
</script>
<footer class="bg-gray-950 text-gray-400 py-12">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0 flex items-start gap-4">
<img src="/images/logo.png" alt="Logo VRAIVEX" class="h-32 w-32 md:h-40 md:w-40 object-contain">
<div>
<a href="#" class="text-2xl font-bold block">
<span class="gradient-text">VRAIVEX</span>
</a>
<p class="mt-2 text-sm">Automatisation, IA et SEO au service de la performance e-commerce</p>
</div>
</div>
<div class="flex flex-col items-center md:items-end">
<div class="grid grid-cols-2 md:flex md:flex-wrap gap-3 md:space-x-6 mb-4 text-center md:text-right">
<a href="/#about" class="hover:text-white transition text-sm">À propos</a>
<a href="/#services" class="hover:text-white transition text-sm">Services</a>
<a href="/#prestations" class="hover:text-white transition text-sm">Prestations</a>
<a href="/#bestsellers" class="hover:text-white transition text-sm">Best Sellers</a>
<a href="/#realisations" class="hover:text-white transition text-sm">Réalisations</a>
<a href="/#brands" class="hover:text-white transition text-sm">Nos Sites</a>
<a href="/creation-site-ecommerce" class="hover:text-white transition text-sm">Création Sites</a>
<a href="/seo-ecommerce" class="hover:text-white transition text-sm">SEO E-commerce</a>
<a href="/partenaires" class="hover:text-white transition text-sm">Partenaires</a>
<a href="/#contact" class="hover:text-white transition text-sm">Contact</a>
</div>
<p class="text-sm text-center md:text-right">© 2026 VRAIVEX. Tous droits réservés.</p>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="backToTop" class="fixed bottom-8 right-8 bg-gradient-to-r from-purple-600 to-blue-600 text-white p-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-110 transition-all duration-300 z-50 hidden">
<i class="fas fa-arrow-up text-xl"></i>
</button>
<script>
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.getElementById('header');
if (window.scrollY > 100) {
header.classList.add('header-scrolled');
} else {
header.classList.remove('header-scrolled');
}
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobileMenuButton');
const mobileMenu = document.getElementById('mobileMenu');
const menuIcon = document.getElementById('menuIcon');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
// Toggle icon between bars and times
if (mobileMenu.classList.contains('hidden')) {
menuIcon.classList.remove('fa-times');
menuIcon.classList.add('fa-bars');
} else {
menuIcon.classList.remove('fa-bars');
menuIcon.classList.add('fa-times');
}
});
// Close menu when clicking on a link
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', function() {
mobileMenu.classList.add('hidden');
menuIcon.classList.remove('fa-times');
menuIcon.classList.add('fa-bars');
});
});
}
// Brands Carousel
const brandsCarousel = document.getElementById('brandsCarousel');
const brandsContainer = document.getElementById('brandsContainer');
const brandsPrevBtn = document.getElementById('brandsPrevBtn');
const brandsNextBtn = document.getElementById('brandsNextBtn');
const brandsPrevBtnMobile = document.getElementById('brandsPrevBtnMobile');
const brandsNextBtnMobile = document.getElementById('brandsNextBtnMobile');
if (brandsContainer && brandsCarousel) {
let currentIndex = 0;
const cards = brandsContainer.querySelectorAll('.brand-card');
const gap = 24;
const cardsPerView = { mobile: 1, tablet: 2, desktop: 3, large: 4 };
function getCardsPerView() {
const w = window.innerWidth;
if (w >= 1280) return cardsPerView.large;
if (w >= 1024) return cardsPerView.desktop;
if (w >= 768) return cardsPerView.tablet;
return cardsPerView.mobile;
}
function getCardWidth() {
const cpv = getCardsPerView();
const cw = brandsCarousel.offsetWidth;
return (cw - gap * (cpv - 1)) / cpv;
}
function updateCarousel() {
const cpv = getCardsPerView();
const cardW = getCardWidth();
const maxIdx = Math.max(0, cards.length - cpv);
currentIndex = Math.min(currentIndex, maxIdx);
const offset = currentIndex * (cardW + gap);
brandsContainer.style.transform = `translateX(-${offset}px)`;
const atStart = currentIndex === 0;
const atEnd = currentIndex >= maxIdx;
[brandsPrevBtn, brandsPrevBtnMobile].forEach(function(btn) {
if (btn) { btn.style.opacity = atStart ? '0.4' : '1'; btn.style.pointerEvents = atStart ? 'none' : 'auto'; }
});
[brandsNextBtn, brandsNextBtnMobile].forEach(function(btn) {
if (btn) { btn.style.opacity = atEnd ? '0.4' : '1'; btn.style.pointerEvents = atEnd ? 'none' : 'auto'; }
});
if (document.getElementById('brandsCounter')) {
document.getElementById('brandsCounter').textContent = (currentIndex + 1) + ' / ' + (maxIdx + 1);
}
}
function nextSlide() {
const cpv = getCardsPerView();
const maxIdx = Math.max(0, cards.length - cpv);
if (currentIndex < maxIdx) { currentIndex++; updateCarousel(); }
}
function prevSlide() {
if (currentIndex > 0) { currentIndex--; updateCarousel(); }
}
if (brandsNextBtn) brandsNextBtn.addEventListener('click', nextSlide);
if (brandsPrevBtn) brandsPrevBtn.addEventListener('click', prevSlide);
if (brandsNextBtnMobile) brandsNextBtnMobile.addEventListener('click', nextSlide);
if (brandsPrevBtnMobile) brandsPrevBtnMobile.addEventListener('click', prevSlide);
function setCardWidths() {
const cardW = getCardWidth();
cards.forEach(function(card) {
card.style.width = cardW + 'px';
card.style.minWidth = cardW + 'px';
card.style.flexShrink = '0';
});
}
let touchStartX = 0;
let touchEndX = 0;
brandsCarousel.addEventListener('touchstart', function(e) { touchStartX = e.changedTouches[0].screenX; }, { passive: true });
brandsCarousel.addEventListener('touchend', function(e) {
touchEndX = e.changedTouches[0].screenX;
const diff = touchStartX - touchEndX;
if (Math.abs(diff) > 50) { diff > 0 ? nextSlide() : prevSlide(); }
}, { passive: true });
setCardWidths();
updateCarousel();
let resizeTimeout;
window.addEventListener('resize', function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
setCardWidths();
currentIndex = 0;
updateCarousel();
}, 250);
});
}
</script>
<script>
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.getElementById('header');
if (window.scrollY > 50) {
header.classList.add('header-scrolled');
} else {
header.classList.remove('header-scrolled');
}
});
// Scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Observe all fade-in-up elements
document.querySelectorAll('.fade-in-up').forEach(el => {
observer.observe(el);
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Counter animation for stats
function animateCounter(element, target, duration = 2000) {
let start = 0;
const increment = target / (duration / 16);
const timer = setInterval(() => {
start += increment;
if (start >= target) {
element.textContent = target + (element.textContent.includes('+') ? '+' : '') + (element.textContent.includes('K') ? 'K€' : '');
clearInterval(timer);
} else {
element.textContent = Math.floor(start) + (element.textContent.includes('+') ? '+' : '') + (element.textContent.includes('K') ? 'K€' : '');
}
}, 16);
}
// Observe stats section
const statsObserver = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting && !entry.target.classList.contains('animated')) {
entry.target.classList.add('animated');
const statsCards = entry.target.querySelectorAll('.stats-card');
statsCards.forEach((card, index) => {
setTimeout(() => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
setTimeout(() => {
card.style.transition = 'all 0.6s ease';
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, 100);
}, index * 100);
});
}
});
}, { threshold: 0.3 });
const statsSection = document.querySelector('section.bg-gradient-to-r');
if (statsSection) {
statsObserver.observe(statsSection);
}
</script>
<script>
// Gestion du formulaire de contact
const contactForm = document.getElementById('contact-form');
const formMessage = document.getElementById('form-message');
const submitBtn = document.getElementById('submit-btn');
if (contactForm) {
contactForm.addEventListener('submit', async function(e) {
e.preventDefault();
// Désactiver le bouton pendant l'envoi
submitBtn.disabled = true;
submitBtn.textContent = 'Envoi en cours...';
// Récupérer les données du formulaire
const formData = new FormData(contactForm);
try {
// Vérifier que les données sont bien dans le FormData
const formDataObj = {
name: formData.get('name'),
email: formData.get('email'),
subject: formData.get('subject'),
message: formData.get('message')
};
console.log('Données du formulaire:', formDataObj);
// Vérifier que tous les champs sont remplis
if (!formDataObj.name || !formDataObj.email || !formDataObj.subject || !formDataObj.message) {
formMessage.classList.remove('hidden');
formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white';
formMessage.textContent = 'Veuillez remplir tous les champs du formulaire.';
submitBtn.disabled = false;
submitBtn.textContent = 'Envoyer le message';
return;
}
// Essayer d'abord avec JSON (plus fiable)
// Siça ne fonctionne pas, on essaiera avec FormData
let response;
try {
// Méthode 1 : Envoyer en JSON (plus fiable selon les forums)
response = await fetch('gestion-formulaire-contact/send-email-json.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formDataObj)
});
} catch (jsonError) {
console.warn('Erreur avec JSON, essai avec FormData:', jsonError);
// Méthode 2 : Fallback avec FormData
response = await fetch('send-email.php', {
method: 'POST',
body: formData
});
}
// Lire le texte de la réponse d'abord pour déboguer
const responseText = await response.text();
console.log('Réponse serveur:', responseText.substring(0, 500));
// Vérifier si la réponse est OK
if (!response.ok) {
// Essayer de parser le JSON d'erreur
try {
const errorResult = JSON.parse(responseText);
// Afficher le message d'erreur du serveur directement à l'utilisateur
formMessage.classList.remove('hidden');
formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white';
formMessage.textContent = errorResult.message || `Erreur ${response.status}: ${response.statusText}`;
submitBtn.disabled = false;
submitBtn.textContent = 'Envoyer le message';
return; // Sortir de la fonction pour ne pas continuer
} catch (e) {
throw new Error(`Erreur HTTP ${response.status}: ${response.statusText}. Réponse: ${responseText.substring(0, 200)}`);
}
}
// Vérifier si PHP n'est pas exécuté (le serveur renvoie le code PHP brut)
if (responseText.trim().startsWith('<?php') || responseText.includes('<?php')) {
console.error('ERREUR: PHP n\'est pas exécuté par le serveur. Le code PHP est renvoyé brut.');
console.error('Le serveur web n\'est pas configuré pour exécuter PHP.');
// Utiliser la solution de secours : sauvegarder dans localStorage
const messageData = {
name: formData.get('name'),
email: formData.get('email'),
subject: formData.get('subject'),
message: formData.get('message'),
timestamp: new Date().toISOString()
};
// Sauvegarder dans localStorage comme solution de secours
const savedMessages = JSON.parse(localStorage.getItem('vraivex_messages') || '[]');
savedMessages.push(messageData);
localStorage.setItem('vraivex_messages', JSON.stringify(savedMessages));
// Afficher un message spécial
formMessage.classList.remove('hidden');
formMessage.className = 'mb-6 p-4 rounded-lg bg-yellow-600 text-white';
formMessage.innerHTML = '⚠️ PHP n\'est pas configuré sur le serveur. Votre message aété sauvegardé localement. <br>Veuillez nous contacter directement à <strong>contact@vraivex.fr</strong> ou consulter les messages sauvegardés dans la console du navigateur.';
// Afficher les messages sauvegardés dans la console
console.log('Messages sauvegardés localement:', savedMessages);
console.log('Pour consulter les messages, tapez dans la console: JSON.parse(localStorage.getItem("vraivex_messages"))');
return; // Sortir de la fonction
}
// Essayer de parser le JSON
let result;
try {
result = JSON.parse(responseText);
} catch (parseError) {
console.error('Erreur de parsing JSON:', parseError);
console.error('Réponse reçue:', responseText.substring(0, 500));
throw new Error('Le serveur a renvoyé une réponse invalide. Vérifiez la console pour plus de détails.');
}
// Afficher le message de résultat
formMessage.classList.remove('hidden');
if (result.success) {
formMessage.className = 'mb-6 p-4 rounded-lg bg-green-600 text-white';
formMessage.textContent = 'Message envoyé avec succès ! Nous vous répondrons dans les plus brefs délais.';
contactForm.reset();
} else {
formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white';
let errorMsg = result.message || 'Une erreur est survenue. Veuillez réessayer.';
// Afficher le message de debug en développement (à retirer en production)
if (result.debug) {
console.error('Erreur détaillée:', result.debug);
}
formMessage.textContent = errorMsg;
}
} catch (error) {
formMessage.classList.remove('hidden');
formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white';
// Message d'erreur plus détaillé pour le débogage
let errorMsg = 'Une erreur est survenue lors de la communication avec le serveur. ';
errorMsg += 'Veuillez réessayer plus tard ou nous contacter directement à contact@vraivex.fr';
// En mode développement, afficher plus de détails
if (error.message) {
console.error('Erreur détaillée:', error);
console.error('Message:', error.message);
console.error('Stack:', error.stack);
}
formMessage.textContent = errorMsg;
} finally {
// Réactiver le bouton
submitBtn.disabled = false;
submitBtn.textContent = 'Envoyer le message';
// Masquer le message après 5 secondes
setTimeout(() => {
formMessage.classList.add('hidden');
}, 5000);
}
});
}
// Back to Top Button functionality
const backToTopButton = document.getElementById('backToTop');
// Show/hide button based on scroll position
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('hidden');
} else {
backToTopButton.classList.add('hidden');
}
});
// Smooth scroll to top when clicked
backToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
</script>
</body>
</html>
