Come aggiungere lo schema FAQ automatico + blocco stile fisarmonica in Blogger

Vuoi visualizzare una sezione FAQ nel tuo blog Blogger e stai cercando un Blocco in stile Fisarmonica, allora sei nel posto giusto.

In questo articolo ti mostrerò come aggiungere una sezione FAQ sulla fisarmonica al tuo sito web Blogger e generare automaticamente lo schema delle FAQ.

Ma prima capiamo rapidamente cos'è uno schema FAQ?

Lo schema FAQ si riferisce a un tipo specifico di markup di dati strutturati che può essere aggiunto all'HTML di un sito Web per fornire ai motori di ricerca informazioni sulle domande frequenti (FAQ) e le relative risposte.

Lo schema FAQ è come uno strumento speciale per i siti web. Aiuta i motori di ricerca a comprendere il contenuto di una pagina in modo più efficace, consentendo loro di visualizzare rich snippet o snippet in primo piano nei risultati di ricerca.

Ad esempio , se il tuo sito web parla di dinosauri e qualcuno chiede a Google: " Cosa mangiava il T-Rex?" "Lo schema delle domande frequenti può far apparire la risposta direttamente nei risultati della ricerca! È un modo fantastico per condividere informazioni.

Come aggiungere la sezione Domande frequenti sulla fisarmonica in Blogger?

Per aggiungere una sezione FAQ sulla fisarmonica al tuo sito web Blogger, apri prima uno dei post del tuo blog in modalità di visualizzazione HTML.

Ora usa il codice seguente e sostituisci la domanda e la risposta su di esso.

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

Ora salva la pagina e la sezione FAQ sulla fisarmonica verrà aggiunta al sito web di Blogger.

Ora, se desideri aggiungere uno schema FAQ per questo, puoi utilizzare il codice appena sotto il codice precedente.

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

Questo script genererà automaticamente lo schema delle FAQ in base alla domanda e alla risposta aggiunte nella sezione FAQ.

Non è necessario creare manualmente lo schema delle FAQ sul sito Web di Blogger. Questo script farà la magia automaticamente.

Pertanto, se stai apportando modifiche o aggiungendo altre domande, non è necessario generare nuovamente lo schema delle FAQ utilizzando nessuno strumento online.

Se hai trovato utile questo articolo, condividilo sui social media e aiuta gli altri a saperlo. Se hai qualche dubbio al riguardo, faccelo sapere nella sezione commenti.