On-Page SEO : Open Graph et Métadonnées pour Réseaux Sociaux (Guide HTML Complet)

On-Page SEO : Open Graph et Métadonnées pour Réseaux Sociaux (Élément HTML)

Sommaire de l'article

Introduction

L’optimisation des métadonnées Open Graph est une composante essentielle du SEO moderne que les professionnels du marketing numérique ne peuvent plus ignorer. Ces éléments HTML spécifiques influencent directement la manière dont vos pages web sont prévisualisées lorsqu’elles sont partagées sur les réseaux sociaux tels que Facebook, LinkedIn, X (anciennement Twitter), WhatsApp, Slack ou encore Discord. Une configuration optimale des métadonnées Open Graph peut considérablement améliorer le taux de clic, la visibilité de votre marque et la performance globale de vos campagnes social media.

Cet article explore en profondeur les concepts clés liés aux métadonnées Open Graph, les bonnes pratiques pour les implémenter efficacement, les subtilités entre plateformes, ainsi que les outils indispensables pour tester, surveiller et améliorer leurs performances au fil du temps.

Concepts clés

Qu’est-ce que le protocole Open Graph ?

Développé par Facebook en 2010, le protocole Open Graph permet aux sites web de partager des informations structurées avec de nombreuses plateformes sociales et applications de messagerie. Ces métadonnées sont utilisées pour générer automatiquement un aperçu enrichi du contenu lorsqu’un lien est partagé : titre, description, image, URL finale, type de contenu, etc.

Les balises HTML Open Graph sont des balises placées dans la section de votre page. Elles commencent généralement par l’attribut property="og:", comme dans og:title, og:description ou og:image. Ces éléments déterminent comment votre contenu apparaît dans les aperçus de partage sur la plupart des réseaux sociaux.

Balises Open Graph de base

Voici la structure minimale recommandée pour contrôler correctement l’aperçu d’une page :

Rôle des balises principales :

og:title : contrôle le titre affiché dans l’aperçu lorsqu’un lien est partagé.
og:description : fournit un résumé du contenu, souvent affiché sous le titre.
og:image : définit l’image de prévisualisation, cruciale pour attirer l’œil et générer des clics.
og:url : indique l’URL canonique du contenu partagé (idéalement sans paramètres de tracking).
og:type : précise la nature du contenu (par exemple article, website, product, video.other).
og:site_name : affiche le nom de votre site ou de votre marque.
og:locale : spécifie la langue et la région du contenu, par exemple fr_FR pour le français (France).

Rôle des métadonnées Open Graph dans le SEO

Les métadonnées Open Graph ne sont pas, à l’origine, un signal direct de classement dans les moteurs de recherche. Leur objectif principal est d’optimiser l’affichage et la compréhension de votre contenu lors des partages sociaux. Cependant, elles ont un impact indirect sur le SEO :

elles améliorent le taux de clic sur les liens partagés, ce qui peut générer davantage de trafic organique et social vers votre site ;
elles renforcent la cohérence de votre image de marque sur les différentes plateformes ;
elles peuvent, dans certains cas, influencer la manière dont certaines fonctionnalités des moteurs ou de leurs produits (ex. flux personnalisés) interprètent vos contenus.

De plus, certaines évolutions récentes vont dans le sens d’une meilleure prise en compte des balises sociales par les moteurs. Par exemple, le titre fourni via og:title peut parfois être utilisé comme source potentielle de titre dans les pages de résultats, lorsque la balise </code> est jugée peu satisfaisante. L’impact reste cependant principalement indirect : l’Open Graph sert avant tout à booster l’engagement sur les réseaux sociaux.</p> <h3 id="impact-sur-la-visibilite-et-le-taux-de-clic">Impact sur la visibilité et le taux de clic</h3> <p>Les utilisateurs sont nettement plus enclins à cliquer sur un lien partagé lorsque l’aperçu comporte :</p> <ul> <li>une image de haute qualité, adaptée au format de la plateforme ;</li> <li>un titre clair, percutant et directement relié à l’intention de recherche ;</li> <li>une description concise, orientée bénéfices, qui suscite la curiosité.</li> </ul> <p>Exemple d’aperçu efficace :</p> <ul> <li><strong>Titre :</strong> « Découvrez les meilleures stratégies SEO de 2025 pour dominer les résultats de recherche »</li> <li><strong>Description :</strong> « Apprenez à améliorer votre positionnement sur Google et les moteurs d’IA avec ces techniques SEO éprouvées et faciles à appliquer. »</li> <li><strong>Image :</strong> une image en haute résolution représentant un tableau de bord analytique ou des graphiques SEO, avec un texte lisible même sur mobile.</li> </ul> <h2 id="bonnes-pratiques-open-graph">Bonnes pratiques Open Graph</h2> <h3 id="optimiser-le-contenu-pour-les-reseaux-sociaux">Optimiser le contenu pour les réseaux sociaux</h3> <p>Pour maximiser la performance de vos aperçus sociaux, travaillez les éléments suivants :</p> <ul> <li><em>Utilisez des titres courts et percutants (environ 60 à 70 caractères maximum).</em></li> <li><em>Rédigez des descriptions détaillées mais concises (environ 130 à 160 caractères pour un affichage optimal).</em></li> <li><em>Sélectionnez des images de haute qualité avec une résolution d’au moins 1200 × 630 pixels pour une compatibilité maximale entre les plateformes.</em></li> <li><em>Placez les mots-clés principaux au début du titre et de la description, tout en restant naturel et orienté utilisateur.</em></li> </ul> <p>Sur mobile, les titres et descriptions peuvent être davantage tronqués. Il est donc pertinent de placer les informations essentielles — bénéfice principal, terme clé, angle différenciant — dans la première moitié du texte.</p> <h3 id="dimensions-et-formats-d-image-recommandes">Dimensions et formats d’image recommandés</h3> <p>Les recommandations varient légèrement d’une plateforme à l’autre. Pour une stratégie globale, vous pouvez vous appuyer sur ces repères :</p> <ul> <li><strong>Facebook et WhatsApp :</strong> 1200 × 630 px, ratio 1,91:1.</li> <li><strong>LinkedIn :</strong> environ 1200 × 627 px, ratio proche de 1,91:1.</li> <li><strong>X (Twitter) :</strong> pour les cartes avec grande image (<code>summary_large_image</code>), privilégiez 1200 × 675 px, ratio 16:9, tout en prévoyant un fallback via <code>og:image</code>.</li> <li><strong>Pinterest :</strong> pour les épingles, les visuels verticaux fonctionnent bien, par exemple 1000 × 1500 px (ratio 2:3), en complément des données Open Graph et des Rich Pins.</li> </ul> <p>Pour simplifier la production, une image de base en 1200 × 630 px (ou supérieure dans le même ratio) convient à la plupart des usages. Vous pouvez ensuite adapter certains visuels à des besoins spécifiques (comme des visuels verticaux dédiés à Pinterest).</p> <p>Bonnes pratiques techniques pour les images :</p> <ul> <li>utiliser un format JPEG ou WebP optimisé, avec une taille de fichier raisonnable pour limiter le temps de chargement ;</li> <li>éviter d’intégrer trop de texte dans l’image, ou s’assurer qu’il reste lisible sur mobile ;</li> <li>prévoir un contraste suffisant entre le texte et le fond pour garantir la lisibilité ;</li> <li>maintenir une cohérence graphique (palette de couleurs, typographie, logo) pour renforcer l’image de marque.</li> </ul> <h3 id="implementation-html-correcte-dans-le">Implémentation HTML correcte dans le <head></h3> <p>Inclure les balises Open Graph dans la section <code><head></code> de votre document HTML est indispensable. Voici un exemple complet pour une page d’article :</p> <pre><code><head> <title>On-Page SEO : Open Graph et Métadonnées pour Réseaux Sociaux

Positionner ces balises au plus haut possible dans le permet aux crawlers sociaux de les lire rapidement, même si le chargement de la page est interrompu ou partiel.

Créer du contenu de qualité adapté au partage

Les meilleures configurations techniques ne compensent pas un contenu peu attractif. Pour encourager le partage et maximiser la portée organique, votre contenu doit être :

utile et orienté résultat (guides, pas-à-pas, études de cas, démonstrations) ;
facile à consommer (titres clairs, sous-titres, listes à puces, encadrés de synthèse) ;
visuellement attractif (images, captures d’écran, infographies, schémas explicatifs) ;
adapté à votre audience (niveau de vocabulaire, exemples, ton éditorial).

Exemples de formats de contenu qui se partagent bien avec des balises Open Graph optimisées :

Tutoriels vidéo intégrés avec captures d’écran et résumé textuel détaillé.
Articles de blog enrichis d’infographies interactives et de visuels chiffrés.
Guides pratiques avec sommaire cliquable et navigation claire.

Inclure des mots-clés pertinents dans les balises sociales

Intégrer naturellement vos mots-clés principaux et secondaires dans les titres et descriptions Open Graph renforce la pertinence perçue par l’utilisateur lorsqu’il découvre votre lien sur un réseau social. Les bonnes pratiques incluent :

placer le mot-clé principal au début du og:title lorsque c’est possible sans nuire à la lisibilité ;
utiliser une formulation orientée bénéfice plutôt qu’une simple accumulation de mots-clés ;
adapter la tonalité à la plateforme (plus professionnelle sur LinkedIn, plus conversationnelle sur certaines messageries, etc.).

Plateformes et compatibilité Open Graph

Réseaux utilisant principalement Open Graph

Plusieurs plateformes s’appuient directement sur les balises Open Graph pour générer les aperçus de liens, parfois en combinaison avec d’autres signaux :

Facebook
LinkedIn
WhatsApp
Pinterest (en complément des Rich Pins et données structurées)
Slack, Discord et de nombreuses applications de messagerie ou outils collaboratifs

Sur ces plateformes, une bonne configuration Open Graph permet de garder le contrôle sur le titre, la description et l’image, plutôt que de laisser l’algorithme deviner ces informations à partir du contenu de la page.

Plateformes utilisant leurs propres cartes avec fallback Open Graph

D’autres plateformes disposent de leur propre système de métadonnées, mais s’appuient sur les balises Open Graph en cas d’absence de balises spécifiques :

X (Twitter) : utilise principalement les Twitter Cards (twitter:title, twitter:description, twitter:image), mais lit également l’Open Graph comme solution de secours.
Telegram : exploite largement og:title, og:description et og:image pour générer les aperçus des liens.

Il est donc recommandé de renseigner à la fois les balises Open Graph et, lorsque c’est pertinent, les balises spécifiques à chaque plateforme comme les Twitter Cards.

Erreurs d’interprétation courantes à éviter

Google+ : ce réseau social est fermé depuis 2019. Il est donc incorrect de le citer comme exemple de plateforme actuelle utilisant Open Graph.
Supposer que les moteurs de recherche utilisent systématiquement Open Graph pour le SEO : ils peuvent en tenir compte pour certaines fonctionnalités, mais l’objectif principal reste le partage social.
Oublier og:url : cela peut entraîner des incohérences lorsque plusieurs URL (avec paramètres) pointent vers le même contenu.

Balises avancées pour les articles

Balises spécifiques au type « article »

Pour les blogs, médias et sites d’actualités, le protocole Open Graph propose des balises additionnelles permettant de préciser le contexte éditorial :

Ces balises permettent aux plateformes qui le supportent de mieux catégoriser votre contenu, d’afficher des informations de contexte (date, section) et de faciliter la découverte de contenus similaires.

Combiner Open Graph, données structurées et autres métadonnées

Pour une stratégie on-page complète, les balises Open Graph doivent idéalement être complétées par d’autres couches de métadonnées :

Données structurées (schema.org) : pour décrire officiellement le type de contenu (Article, BlogPosting, Product, Event, etc.).
Balises Title et meta description : essentielles pour les moteurs de recherche et la cohérence générale.
Twitter Cards : pour optimiser spécifiquement l’affichage sur X tout en restant cohérent avec l’Open Graph.

Outils et ressources

Outils reconnus pour vérifier vos configurations

Tester vos balises est une étape critique. Une configuration théoriquement correcte peut ne pas s’afficher comme prévu si une image retourne une erreur, si un pare-feu bloque un robot ou si un cache ancien est encore utilisé par la plateforme.

Meta Sharing Debugger (Facebook et WhatsApp) : permet d’analyser les balises Open Graph, de voir l’aperçu, de détecter les erreurs et de forcer un nouveau scraping.
LinkedIn Post Inspector : affiche la manière dont LinkedIn interprète vos balises et signale les éventuelles erreurs techniques.
Twitter Card Validator : contrôle vos Twitter Cards et affiche un aperçu de la carte générée.
Outils de prévisualisation généralistes : certaines extensions de navigateur ou services en ligne permettent de visualiser rapidement les principales balises meta, Open Graph et Twitter Cards d’une page.
Google Search Console : ne teste pas directement l’Open Graph, mais permet de vérifier l’indexation, les erreurs de couverture et les rich results, ce qui complète la stratégie on-page.
Google Analytics ou solution d’analytics équivalente : permet de mesurer l’impact des partages sociaux sur le trafic, le comportement des visiteurs et les conversions.

Ressources pour approfondir l’utilisation d’Open Graph

Documentation des développeurs Meta : spécifications détaillées du protocole Open Graph et des balises supportées.
Guides de plugins SEO (WordPress, CMS divers) : pour apprendre à configurer automatiquement les balises Open Graph et Twitter Cards sans développer de code.
Blogs spécialisés en SEO technique : pour rester informé des évolutions récentes (modifications de formats d’aperçu, nouvelles recommandations de tailles d’images, changements d’algorithmes d’affichage, etc.).

Checklist de bonnes pratiques et erreurs fréquentes

Checklist avant publication ou mise à jour

Titres : un og:title clair, aligné avec le contenu réel de la page, sans dépassement excessif de longueur.
Descriptions : un og:description orienté bénéfice, sans bourrage de mots-clés, d’environ 130 à 160 caractères.
URL : un og:url canonique, sans identifiants de sessions ni paramètres UTM.
Image : un og:image d’au moins 1200 × 630 px, au bon ratio, avec un poids de fichier raisonnable.
Type : un og:type adapté (article, website, product, etc.).
Langue : une balise og:locale cohérente avec la langue réelle de la page (par exemple fr_FR).
Cohérence : pas de duplication ou de conflit entre plusieurs ensembles de balises Open Graph générés par des plugins distincts.
Tests : vérification de l’aperçu sur les principaux outils de debugging avant une campagne importante.

Erreurs fréquentes à corriger

Utiliser des images trop petites ou dans un format non compatible, ce qui entraîne un affichage flou ou un recadrage non maîtrisé.
Laisser des titres trop longs qui se terminent par des ellipses peu lisibles dans le flux.
Oublier de mettre à jour article:modified_time lors d’une refonte importante d’un article.
Bloquer sans le vouloir les crawlers sociaux via un pare-feu, une configuration CDN, un hotlinking trop strict ou des règles de sécurité mal paramétrées.
Négliger la cohérence entre l’aperçu social et la promesse réelle de la page, ce qui peut dégrader le taux de conversion et la confiance des utilisateurs.

FAQ

Qu’est-ce que le protocole Open Graph ?: Le protocole Open Graph est un ensemble de balises HTML insérées dans le d’une page web. Il permet aux réseaux sociaux et à certaines applications de comprendre le titre, la description, l’image et d’autres informations clés d’un contenu lors du partage d’un lien.
Pourquoi est-ce important pour le SEO ?: Les balises Open Graph n’agissent pas comme un facteur de classement direct dans les moteurs de recherche, mais elles améliorent l’apparence de vos liens sur les réseaux sociaux. En augmentant le taux de clic, la visibilité et l’engagement, elles contribuent indirectement à la performance globale de votre stratégie SEO et de votre trafic organique.
Comment puis-je vérifier mes configurations Open Graph ?: Vous pouvez utiliser les outils de debugging officiels fournis par les plateformes, comme le Sharing Debugger de Meta pour Facebook et WhatsApp, le Post Inspector de LinkedIn ou encore le Card Validator de X pour les Twitter Cards. Ces outils affichent les balises détectées, l’aperçu généré et les éventuelles erreurs techniques à corriger.
Puis-je utiliser des images différentes pour chaque réseau social ?: Oui. Vous pouvez définir une image principale via og:image, puis fournir des visuels spécifiques pour certaines plateformes grâce à leurs propres balises (par exemple twitter:image pour X). Dans la pratique, beaucoup de sites utilisent une image Open Graph principale de 1200 × 630 px, adaptée à la majorité des réseaux, et créent des variations lorsque des formats spécifiques (comme le vertical pour Pinterest) apportent une réelle valeur ajoutée.
Où dois-je placer les balises Open Graph dans mon code ?: Les balises Open Graph doivent être placées dans la section de votre document HTML, de préférence après la balise </code> et la meta description. Elles ne doivent pas être dupliquées plusieurs fois dans la même page, ce qui pourrait créer des conflits lors de l’interprétation par les crawlers sociaux.</dd> <dt><strong>Les balises Open Graph remplacent-elles les balises Title et meta description ?</strong></dt> <dd>Non. Les balises Open Graph sont principalement destinées aux réseaux sociaux et applications de partage, tandis que la balise <code><title></code> et la meta description restent essentielles pour les moteurs de recherche. Il est recommandé d’assurer une cohérence éditoriale entre ces différents éléments, tout en adaptant légèrement la formulation pour chaque usage.</dd> <dt><strong>Dois-je ajouter des balises Open Graph sur toutes mes pages ?</strong></dt> <dd>Il est fortement conseillé d’ajouter des balises Open Graph au minimum sur toutes les pages susceptibles d’être partagées : articles de blog, pages de services, pages produits clés, pages de ressources et contenus premium. Sur des pages techniques ou peu susceptibles d’être partagées (pages de mention légales, formulaires techniques), l’impact est moins stratégique.</dd> <dt><strong>Les plugins SEO gèrent-ils automatiquement l’Open Graph ?</strong></dt> <dd>De nombreux plugins SEO pour CMS (par exemple sur WordPress) génèrent automatiquement les balises Open Graph de base à partir du titre, de la meta description et de l’image mise en avant. Il reste cependant important de personnaliser ces champs pour les pages stratégiques, car un titre optimisé pour les résultats de recherche n’est pas toujours le plus performant sur les réseaux sociaux.</dd> </dl> </body> </html> </div>  <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>  <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>  <div id="comments-list" class="mb-8 space-y-6">  </div>  <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="on-page-seo-open-graph-et-metadonnees-pour-reseaux-sociaux-element-html"> <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>  <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> const articleSlug = 'on-page-seo-open-graph-et-metadonnees-pour-reseaux-sociaux-element-html'; // 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="/#brands" class="hover:text-white transition text-sm">Nos marques</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">© 2025 VRAIVEX. Tous droits réservés.</p> </div> </div> </div> </footer>  <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 cardsPerView = { mobile: 1, tablet: 2, desktop: 3, large: 4 }; function getCardsPerView() { const width = window.innerWidth; if (width >= 1280) return cardsPerView.large; if (width >= 1024) return cardsPerView.desktop; if (width >= 768) return cardsPerView.tablet; return cardsPerView.mobile; } function updateCarousel() { const cardsPerViewCount = getCardsPerView(); const containerWidth = brandsCarousel.offsetWidth; const cardWidth = containerWidth / cardsPerViewCount; const maxIndex = Math.max(0, cards.length - cardsPerViewCount); currentIndex = Math.min(currentIndex, maxIndex); brandsContainer.style.transform = `translateX(-${currentIndex * cardWidth}px)`; // Update button states const isAtStart = currentIndex === 0; const isAtEnd = currentIndex >= maxIndex; if (brandsPrevBtn) { brandsPrevBtn.style.opacity = isAtStart ? '0.5' : '1'; brandsPrevBtn.style.cursor = isAtStart ? 'not-allowed' : 'pointer'; } if (brandsNextBtn) { brandsNextBtn.style.opacity = isAtEnd ? '0.5' : '1'; brandsNextBtn.style.cursor = isAtEnd ? 'not-allowed' : 'pointer'; } if (brandsPrevBtnMobile) { brandsPrevBtnMobile.style.opacity = isAtStart ? '0.5' : '1'; brandsPrevBtnMobile.style.cursor = isAtStart ? 'not-allowed' : 'pointer'; } if (brandsNextBtnMobile) { brandsNextBtnMobile.style.opacity = isAtEnd ? '0.5' : '1'; brandsNextBtnMobile.style.cursor = isAtEnd ? 'not-allowed' : 'pointer'; } } function nextSlide() { const cardsPerViewCount = getCardsPerView(); const maxIndex = Math.max(0, cards.length - cardsPerViewCount); if (currentIndex < maxIndex) { currentIndex++; updateCarousel(); } } function prevSlide() { if (currentIndex > 0) { currentIndex--; updateCarousel(); } } // Event listeners if (brandsNextBtn) brandsNextBtn.addEventListener('click', nextSlide); if (brandsPrevBtn) brandsPrevBtn.addEventListener('click', prevSlide); if (brandsNextBtnMobile) brandsNextBtnMobile.addEventListener('click', nextSlide); if (brandsPrevBtnMobile) brandsPrevBtnMobile.addEventListener('click', prevSlide); // Set responsive width for cards function setCardWidths() { const cardsPerViewCount = getCardsPerView(); const containerWidth = brandsCarousel.offsetWidth; const gap = 24; // 24px gap const cardWidth = (containerWidth - (gap * (cardsPerViewCount - 1))) / cardsPerViewCount; cards.forEach(card => { card.style.width = `${cardWidth}px`; card.style.flexShrink = '0'; }); } // Initialize setCardWidths(); updateCarousel(); // Update on resize 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>