Comment ajouter un schéma FAQ automatique + un bloc de style accordéon dans Blogger

Voulez-vous afficher une section FAQ sur votre blog Blogger et recherchez un bloc de style accordéon, alors vous êtes au bon endroit.

Dans cet article, je vais vous montrer comment ajouter une section FAQ Accordéon à votre site Web Blogger et générer automatiquement le schéma FAQ.

Mais avant cela, comprenons rapidement ce qu'est un schéma FAQ ?

Le schéma FAQ fait référence à un type spécifique de balisage de données structurées qui peut être ajouté au code HTML d'un site Web pour fournir aux moteurs de recherche des informations sur les questions fréquemment posées (FAQ) et leurs réponses correspondantes.

FAQ Schema est comme un outil spécial pour les sites Web. Il aide les moteurs de recherche à comprendre plus efficacement le contenu d'une page, leur permettant d'afficher des extraits enrichis ou des extraits en vedette dans les résultats de recherche.

Par exemple , si votre site Web concerne les dinosaures et que quelqu'un demande à Google : « Qu'est-ce que le T-Rex a mangé ? » FAQ Schema peut faire apparaître cette réponse directement dans les résultats de recherche ! C'est comme une façon sympa de partager des informations.

Comment ajouter une section FAQ Accordéon dans Blogger ?

Pour ajouter une section FAQ Accordéon à votre site Web Blogger, ouvrez d'abord l'un de vos articles de blog en mode d'affichage HTML.

Utilisez maintenant le code ci-dessous et remplacez la question et la réponse dessus.

 <style> .faq-container { max-width: 800px; margin: 24px auto; } details summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 24px; background: #2f3337; color: #fff; font-family:system-ui; font-weight:600; user-select: none; transition: all 120ms ease; } details summary::after { content: ""; display: inline-block; margin-left: 8px; height: 24px; width: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") no-repeat center center; } details .content img { width: 100%; max-height: 400px; object-fit: cover; margin: 5px 0; box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.2); } details .content { padding: 10px 16px; line-height: 1.8; margin-top: -10px; color:black; } details { background: #edf2f4; border-radius: 4px; overflow: hidden; margin-bottom: 12px; } details summary::-webkit-details-marker { display: none; } details[open] summary { background: #204ecf; margin-bottom: 10px; } </style> <div class="faq-container"> <details open> <summary>What Is Link Building?</summary> <div class="content"> Link building is the practice of building one-way hyperlinks (also known as “backlinks”) to a website with the goal of improving search engine visibility. </div> </details> <details> <summary>Why Are Links So Important?</summary> <div class="content"> Links are crucial online. They: <ul> <li>Connect Pages: Like pathways between web pages.</li> <li>Boost Google Ranking: More links can make a site show up higher in searches.</li> <li>Build Trust: Links from reputable sites make a page seem more reliable.</li> <li>Bring Traffic: Links can bring people to your site.</li> <li>Simplify Browsing: They make it easy to move around the internet.</li> </ul> </div> </details> <details> <summary>How to Find High-Quality Links?</summary> <div class="content"> To find high-quality links, prioritize creating valuable and relevant content on your website. Content that is informative, engaging, and solves a problem for your audience is more likely to attract organic links. <img src="https://www.abetterlemonadestand.com/wp-content/uploads/2017/06/How-to-Build-Backlinks.jpg" alt=""> Additionally, conduct competitor analysis using tools like Ahrefs or Moz to identify where your competitors are getting links. This insight can guide your link-building strategy and help you target similar high-authority sources. </div> </details> </div>

Enregistrez maintenant la page et la section FAQ accordéon sera ajoutée au site Web Blogger.

Maintenant, si vous souhaitez ajouter un schéma FAQ pour cela, vous pouvez utiliser le code juste en dessous du code ci-dessus.

 <script> function generateFAQSchema() { const faqContainer = document.querySelector('.faq-container'); const detailsElements = faqContainer.querySelectorAll('details'); const faqSchema = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: [], }; detailsElements.forEach((details, index) => { const summary = details.querySelector('summary'); const content = details.querySelector('.content'); const question = summary.textContent.trim(); const answer = content.textContent.trim(); faqSchema.mainEntity.push({ '@type': 'Question', name: question, acceptedAnswer: { '@type': 'Answer', text: answer, }, }); }); const scriptElement = document.createElement('script'); scriptElement.type = 'application/ld+json'; scriptElement.textContent = JSON.stringify(faqSchema); document.head.appendChild(scriptElement); } generateFAQSchema(); </script>

Ce script générera automatiquement le schéma FAQ en fonction de la question et de la réponse ajoutées dans la section FAQ.

Vous n'avez pas besoin de créer manuellement un schéma FAQ sur le site Web Blogger. Ce script fera la magie automatiquement.

Ainsi, si vous apportez des modifications ou ajoutez d'autres questions, vous n'avez pas besoin de générer à nouveau le schéma de FAQ à l'aide d'un outil en ligne.

Si vous avez trouvé cet article utile, partagez-le sur les réseaux sociaux et aidez les autres à le savoir. Si vous avez des doutes à ce sujet, faites-le-moi savoir dans la section commentaires.