Como adicionar esquema de FAQ automático + bloco de estilo acordeão no Blogger

Você deseja exibir uma seção de perguntas frequentes em seu blog do Blogger e está procurando um bloco estilo acordeão, então você veio ao lugar certo.

Neste artigo, mostrarei como você pode adicionar uma seção de perguntas frequentes do acordeão ao site do Blogger e gerar o esquema de perguntas frequentes automaticamente.

Mas, antes disso vamos entender rapidamente o que é um esquema de FAQ?

O esquema FAQ refere-se a um tipo específico de marcação de dados estruturados que pode ser adicionado ao HTML de um site para fornecer aos mecanismos de pesquisa informações sobre perguntas frequentes (FAQs) e suas respostas correspondentes.

FAQ Schema é como uma ferramenta especial para sites. Ajuda os mecanismos de pesquisa a compreender o conteúdo de uma página de maneira mais eficaz, permitindo que exibam rich snippets ou trechos em destaque nos resultados de pesquisa.

Por exemplo , se o seu site for sobre dinossauros e alguém perguntar ao Google: “ O que o T-Rex comeu? ”O FAQ Schema pode fazer com que essa resposta apareça diretamente nos resultados da pesquisa! É uma maneira legal de compartilhar informações.

Como adicionar a seção de perguntas frequentes sobre acordeão no Blogger?

Para adicionar uma seção de perguntas frequentes do Accordion ao seu site do Blogger, primeiro abra uma das postagens do seu blog no modo de visualização HTML.

Agora use o código abaixo e substitua a pergunta e a resposta nele.

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

Agora salve a página e a seção de perguntas frequentes do acordeão será adicionada ao site do Blogger.

Agora, se quiser adicionar um esquema de FAQ para isso, você pode usar o código logo abaixo do código acima.

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

Este script gerará automaticamente o esquema de FAQ com base nas perguntas e respostas adicionadas na seção FAQ.

Você não precisa criar manualmente o esquema de perguntas frequentes no site do Blogger. Este script fará a mágica automaticamente.

Portanto, se você estiver fazendo alguma alteração ou adicionando mais perguntas, não será necessário gerar o esquema de FAQ novamente usando nenhuma ferramenta online.

Se você achou este artigo útil, compartilhe-o nas redes sociais e ajude outras pessoas a saberem sobre isso. Se você tiver alguma dúvida sobre isso, deixe-me saber na seção de comentários.