什么是富媒体摘要？如何优化富媒体摘要以提升您在 2026 年的 SEO 效果？

/** * Namespace pour éviter les conflits globaux */ const quizApp = { // Données fournies injectées data: {“questions”:[{“question”:”Quel langage est recommandé par Google pour les données structurées ?”,”options”:[“Microdata”,”RDFa”,”JSON-LD”,”HTML5″],”answer”:”JSON-LD”},{“question”:”Les rich snippets améliorent-ils directement le classement ?”,”options”:[“Oui, toujours”,”Non, mais ils améliorent le CTR”,”Uniquement sur mobile”,”Seulement pour les recettes”],”answer”:”Non, mais ils améliorent le CTR”},{“question”:”Quel outil permet de tester la validité du balisage ?”,”options”:[“Google Analytics”,”Rich Results Test”,”PageSpeed Insights”,”Google Trends”],”answer”:”Rich Results Test”}]}, // État du jeu state: { currentQuestion: 0, score: 0, isLocked: false }, // Éléments DOM (chargés au init) elements: {}, /** * Initialisation */ init: function() { this.elements = { startScreen: document.getElementById(‘screen-start’), gameScreen: document.getElementById(‘screen-game’), resultScreen: document.getElementById(‘screen-result’), questionText: document.getElementById(‘question-text’), optionsContainer: document.getElementById(‘options-container’), progressBar: document.getElementById(‘progress-bar’), qCurrent: document.getElementById(‘q-current’), qTotal: document.getElementById(‘q-total’), feedback: document.getElementById(‘feedback-msg’), scoreDisplay: document.getElementById(‘score-display’), resultTitle: document.getElementById(‘result-title’), resultDesc: document.getElementById(‘result-desc’) }; }, /** * Démarre le Quizz */ start: function() { if(!this.elements.startScreen) this.init(); this.state.currentQuestion = 0; this.state.score = 0; this.state.isLocked = false; this.elements.startScreen.classList.add(‘hidden’); this.elements.resultScreen.classList.add(‘hidden’); this.elements.gameScreen.classList.remove(‘hidden’); this.elements.gameScreen.classList.add(‘flex’); this.loadQuestion(); }, /** * Charge la question actuelle */ loadQuestion: function() { const questionData = this.data.questions[this.state.currentQuestion]; const totalQuestions = this.data.questions.length; // Mise à jour UI this.elements.qCurrent.textContent = this.state.currentQuestion + 1; this.elements.qTotal.textContent = totalQuestions; this.elements.progressBar.style.width = `${((this.state.currentQuestion) / totalQuestions) * 100}%`; // Animation texte this.elements.questionText.style.opacity = 0; setTimeout(() => { this.elements.questionText.textContent = questionData.question; this.elements.questionText.style.opacity = 1; }, 200); // Reset options this.elements.optionsContainer.innerHTML = ”; this.elements.feedback.style.opacity = 0; this.state.isLocked = false; // Génération des boutons questionData.options.forEach((opt, index) => { const btn = document.createElement(‘button’); btn.className = “w-full text-left px-5 py-4 rounded-xl border border-slate-200 bg-white hover:bg-indigo-50 hover:border-indigo-300 transition-all duration-200 font-medium text-slate-700 shadow-sm cursor-pointer active:scale-[0.99]”; btn.textContent = opt; btn.onclick = () => this.handleAnswer(opt, btn); // Ajout avec un léger délai pour effet cascade btn.style.opacity = 0; btn.style.transform = ‘translateY(10px)’; this.elements.optionsContainer.appendChild(btn); setTimeout(() => { btn.style.opacity = 1; btn.style.transform = ‘translateY(0)’; }, index * 100 + 300); }); }, /** * Gestion de la réponse */ handleAnswer: function(selectedOption, btnElement) { if (this.state.isLocked) return; this.state.isLocked = true; const currentQ = this.data.questions[this.state.currentQuestion]; const isCorrect = selectedOption === currentQ.answer; // Style visuel du bouton sélectionné if (isCorrect) { this.state.score++; btnElement.className = “w-full text-left px-5 py-4 rounded-xl bg-green-500 border border-green-600 text-white font-bold shadow-md transform scale-[1.02] transition-all”; this.showFeedback(“Correct ! Excellent choix.”, “text-green-600”); } else { btnElement.className = “w-full text-left px-5 py-4 rounded-xl bg-red-500 border border-red-600 text-white font-bold shadow-md opacity-90 transition-all”; this.showFeedback(“Oups ! La bonne réponse était : ” + currentQ.answer, “text-red-500”); // Mettre en surbrillance la bonne réponse Array.from(this.elements.optionsContainer.children).forEach(b => { if(b.textContent === currentQ.answer) { b.classList.add(“ring-2”, “ring-green-400”, “bg-green-50”); } }); } // Progression setTimeout(() => { this.state.currentQuestion++; if (this.state.currentQuestion 0) { this.elements.resultTitle.textContent = “Pas mal du tout ! “; this.elements.resultDesc.textContent = “Vous avez de bonnes bases. Revoir quelques notions techniques vous propulsera en première position.”; } else { this.elements.resultTitle.textContent = “Débutant Curieux “; this.elements.resultDesc.textContent = “C’est un sujet complexe ! Relisez l’article pour maîtriser les bases du JSON-LD.”; } }, /** * Reset */ restart: function() { this.start(); } }; // Initialisation au chargement document.addEventListener(‘DOMContentLoaded’, () => { quizApp.init(); });