Schéma FAQ multilingue avec JavaScript : une solution efficace pour le référencement international
SEO
•
X min
•
21/2/2025
FR
Schéma FAQ multilingue avec JavaScript : une solution efficace pour le référencement international
L'optimisation du classement naturel des moteurs de recherche (SEO) passe aujourd'hui par l'intégration données structurées sur votre site Web. Parmi les nombreux types de balisage disponibles, le schema Page FAQ est particulièrement utile pour enrichir les résultats de recherche sur Google et fournir aux utilisateurs des réponses immédiates à leurs requêtes.
Cependant, lors de la gestion d'un site web multilingue, il est essentiel de présenter une FAQ adaptée à chaque langue afin d'améliorer l'expérience utilisateur et d'optimiser le référencement international. Un visiteur anglophone ne devrait pas voir une FAQ en français et vice versa.
Dans cet article, nous allons découvrir comment utiliser JavaScript pour détecter la langue de l'utilisateur et afficher dynamiquement le schéma de FAQ correspondant. Nous expliquerons comment fonctionne le code, pourquoi il est utile et comment vous pouvez l'adapter à vos propres besoins.
Pourquoi utiliser un schéma de FAQ multilingue ?
Améliorer le référencement naturel
Le schéma FAQpage aide les moteurs de recherche à mieux comprendre le contenu d'une page et à l'afficher directement extraits enrichis sous le lien du site dans les résultats de recherche. Ces extraits améliorés offrent une visibilité supplémentaire et améliorent les taux de clics (CTR).
Un schéma bien structuré augmente les chances d'obtenir des positions de premier plan sur Google, en particulier dans les recherches vocales, où les assistants numériques utilisent souvent ces données pour formuler des réponses.
Améliorer l'expérience utilisateur
L'affichage d'une FAQ dans la langue de l'utilisateur permet une navigation plus fluide et plus intuitive. Un visiteur qui trouve immédiatement des réponses dans sa langue préférée a plus de chances de rester sur le site et d'interagir avec son contenu.
Renforcer la pertinence du contenu
En adaptant dynamiquement les questions et les réponses aux préférences linguistiques de l'utilisateur, vous évitez les problèmes de compréhension et maximisez la pertinence des informations fournies. Cela contribue également à renforcer la crédibilité et la fiabilité de votre site aux yeux des moteurs de recherche et des visiteurs.
Implémentation d'un schéma de FAQ multilingue avec JavaScript
Nous utiliserons JavaScript à :
- Détecter la langue du navigateur de l'utilisateur.
- Sélectionnez dynamiquement la FAQ correspondante parmi plusieurs versions préconfigurées.
- Générez un JSON-LD balisage suivant les recommandations de Google pour les données structurées.
- Injectez ce balisage dans la <head>section du document HTML.
Le script suivant affiche dynamiquement une FAQ en fonction de la langue détectée par le navigateur.
<script>
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
try {
// Detect user's browser language
var userLang = navigator.language || navigator.userLanguage;
userLang = userLang.split('-')[0]; // Extract the primary language code (e.g., "fr", "en")
// Multilingual FAQ database
var faqEntries = {
"fr": [
{
question: "question 1 FR",
answer: "answer 1 FR"
},
{
question: "question 2 FR",
answer: "answer 2 FR"
}
],
"en": [
{
question: "question 1 EN",
answer: "answer 1 EN"
},
{
question: "question 2 EN",
answer: "answer 2 EN"
}
]
};
// Select the FAQ based on detected language, default to English if not defined
var selectedFAQ = faqEntries[userLang] || faqEntries["en"];
// Generate JSON-LD schema
var faqData = {
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": selectedFAQ.map(entry => ({
"@type": "Question",
"name": entry.question,
"acceptedAnswer": {
"@type": "Answer",
"text": entry.answer
}
}))
};
// Create and insert the JSON-LD script
var scriptTag = document.createElement("script");
scriptTag.type = "application/ld+json";
scriptTag.textContent = JSON.stringify(faqData, null, 2);
document.head.appendChild(scriptTag);
} catch (error) {
console.error("Error generating FAQ schema:", error);
}
}, 1500);
});
</script>
{{blog_article_cta01}}
Explication détaillée du code
1. Détection de la langue du navigateur
Le script récupère la langue préférée de l'utilisateur à l'aide de navigator.language. Certaines langues comportant un sous-code (fr-FR, en-US), nous n'en extrayons que la partie principale (fr, en).
2. Définition d'une base de données FAQ multilingue
Les questions et réponses sont stockées dans un objet FAQEntries, où chaque langue est représentée par un tableau d'objets contenant les questions et réponses correspondantes.
3. Sélection automatique de la FAQ en fonction de la langue détectée
Le script vérifie si la langue de l'utilisateur existe dans FAQEntries. Si ce n'est pas le cas, la version anglaise est sélectionnée par défaut.
4. Génération et insertion d'un balisage JSON-LD
Le script convertit la FAQ sélectionnée en JSON-LD objet conforme à Schéma.org recommandations, puis l'injecte dynamiquement dans la <head>section du document HTML.
Personnalisation et adaptation
Ajouter de nouvelles langues
Si votre site prend en charge plusieurs langues, vous pouvez développer l'objet FAQEntries en ajoutant des entrées pour d'autres langues :
"es": [
{
"question": "question 1 ES",
"answer": "answer 1 ES"
},
{
"question": "question 2 ES",
"answer": "answer 2 ES"
}
]
Modifier les questions et réponses
Vous pouvez personnaliser les questions et les réponses en fonction de votre secteur d'activité. Assurez-vous que les réponses sont claires, précises et optimisées pour correspondre à l'intention de recherche des utilisateurs.
Validité du schéma de test
Une fois le script intégré à votre site, vous pouvez vérifier que Google reconnaît correctement votre balisage à l'aide du Outil de test de résultats enrichis:
🔗 https://search.google.com/test/rich-results
Conclusion
Mise en œuvre d'un schéma de page FAQ multilingue via JavaScript est une excellente solution pour optimiser votre référencement international et améliorer l'expérience utilisateur sur votre site web. Ce script vous permet d'afficher dynamiquement les questions et réponses appropriées en fonction de la langue du visiteur tout en respectant les meilleures pratiques de Google en matière de données structurées.
En adaptant cette méthode à vos besoins et en testant régulièrement votre schéma, vous maximiserez vos chances d'obtenir un meilleur classement dans les résultats de recherche et d'accroître l'engagement des utilisateurs sur votre site.
Nos talents en cuisine sont discutables. Nos talents en web, non. Parlons-en ?
Site web unique et sur mesure
Contrôle total, aucune dépendance
Rapide, fluide, optimisé pour le référencement
Comment un schéma de FAQ multilingue améliore-t-il le référencement ?
Un schéma FAQ multilingue améliore le référencement en permettant aux moteurs de recherche de comprendre et d'indexer le contenu dans plusieurs langues, en améliorant la visibilité dans les résultats de recherche internationaux et en augmentant les taux de clics (CTR).
Quel est le meilleur moyen de détecter la langue d'un utilisateur pour un schéma de FAQ multilingue ?
La méthode la plus efficace consiste à utiliser navigator.language en JavaScript, qui extrait la langue préférée de l'utilisateur dans les paramètres de son navigateur et affiche dynamiquement le schéma de FAQ approprié.
Un schéma de FAQ multilingue peut-il être implémenté sur WordPress ou d'autres plateformes CMS ?
Oui, le schéma de FAQ multilingue basé sur JavaScript peut être intégré à WordPress, Shopify et à d'autres plateformes CMS en ajoutant le script à la <head>section du site ou en utilisant un plugin de script personnalisé.
Comment puis-je vérifier que mon schéma de FAQ multilingue est correctement implémenté ?
Vous pouvez tester votre schéma à l'aide de l'outil de test des résultats enrichis de Google (https://search.google.com/test/rich-results) pour vous assurer que les données structurées sont correctement reconnues et optimisées pour les moteurs de recherche.
none
none
none
none
Nos derniers articles
Vous trouverez ici des articles sur les outils No-Code, des conseils et astuces, ainsi que des études de cas pour des secteurs d'activité spécifiques. Nous publions régulièrement des articles pour vous aider à tirer le meilleur parti de votre prochain projet.
Développons votre site web - et ce qui va avec
Notre équipe est là pour comprendre vos besoins et travailler avec vous pour créer votre expérience numérique.