So fügen Sie in Blogger ein automatisches FAQ-Schema + einen Akkordeonstilblock hinzu

Möchten Sie einen FAQ-Bereich in Ihrem Blogger-Blog anzeigen und suchen nach einem Block im Akkordeon-Stil, dann sind Sie hier genau richtig.

In diesem Artikel zeige ich Ihnen, wie Sie Ihrer Blogger-Website einen Accordion-FAQ-Bereich hinzufügen und das FAQ-Schema automatisch generieren können.

Aber lassen Sie uns vorher schnell verstehen , was ein FAQ-Schema ist.

Das FAQ-Schema bezieht sich auf eine bestimmte Art von strukturiertem Daten-Markup, das dem HTML einer Website hinzugefügt werden kann, um Suchmaschinen Informationen zu häufig gestellten Fragen (FAQs) und den entsprechenden Antworten bereitzustellen.

FAQ Schema ist wie ein spezielles Tool für Websites. Es hilft Suchmaschinen, den Inhalt einer Seite besser zu verstehen, und ermöglicht es ihnen, Rich Snippets oder Featured Snippets in den Suchergebnissen anzuzeigen.

Wenn es auf Ihrer Website beispielsweise um Dinosaurier geht und jemand Google fragt: „ Was hat der T-Rex gegessen?“ „FAQ-Schema kann dafür sorgen, dass diese Antwort direkt in den Suchergebnissen angezeigt wird! Es ist eine coole Möglichkeit, Informationen auszutauschen.

Wie füge ich einen Akkordeon-FAQ-Abschnitt in Blogger hinzu?

Um Ihrer Blogger-Website einen Accordion-FAQ-Bereich hinzuzufügen, öffnen Sie zunächst einen Ihrer Blogbeiträge im HTML-Ansichtsmodus.

Verwenden Sie nun den folgenden Code und ersetzen Sie die Frage und Antwort darin.

 <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>

Speichern Sie nun die Seite und der Akkordeon-FAQ-Bereich wird zur Blogger-Website hinzugefügt.

Wenn Sie hierfür nun ein FAQ-Schema hinzufügen möchten, können Sie den Code direkt unter dem obigen Code verwenden.

 <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>

Dieses Skript generiert automatisch das FAQ-Schema basierend auf der im FAQ-Bereich hinzugefügten Frage und Antwort.

Sie müssen auf der Blogger-Website kein FAQ-Schema manuell erstellen. Dieses Skript erledigt die Magie automatisch.

Wenn Sie also Änderungen vornehmen oder weitere Fragen hinzufügen, müssen Sie das FAQ-Schema nicht erneut mit einem Online-Tool erstellen.

Wenn Sie diesen Artikel hilfreich fanden, teilen Sie ihn in den sozialen Medien und helfen Sie anderen, davon zu erfahren. Wenn Sie diesbezüglich Zweifel haben, teilen Sie mir dies bitte im Kommentarbereich mit.