Cómo agregar un esquema automático de preguntas frecuentes + un bloque de estilo acordeón en Blogger

¿Quieres mostrar una sección de preguntas frecuentes en tu blog de Blogger y buscas un bloque estilo acordeón? Entonces has venido al lugar correcto.

En este artículo, le mostraré cómo puede agregar una sección de preguntas frecuentes de acordeón a su sitio web de Blogger y generar el esquema de preguntas frecuentes automáticamente.

Pero, antes de eso, comprendamos rápidamente qué es un esquema de preguntas frecuentes.

El esquema de preguntas frecuentes se refiere a un tipo específico de marcado de datos estructurados que se puede agregar al HTML de un sitio web para proporcionar a los motores de búsqueda información sobre las preguntas frecuentes (FAQ) y sus respuestas correspondientes.

El esquema de preguntas frecuentes es como una herramienta especial para sitios web. Ayuda a los motores de búsqueda a comprender el contenido de una página de forma más eficaz, permitiéndoles mostrar fragmentos enriquecidos o fragmentos destacados en los resultados de búsqueda.

Por ejemplo , si su sitio web trata sobre dinosaurios y alguien le pregunta a Google: "¿ Qué comió el T-Rex?" ¡El esquema de preguntas frecuentes puede hacer que esa respuesta aparezca directamente en los resultados de búsqueda! Es como una forma genial de compartir información.

¿Cómo agregar una sección de preguntas frecuentes sobre acordeón en Blogger?

Para agregar una sección de preguntas frecuentes sobre Accordion a su sitio web de Blogger, primero abra una de las publicaciones de su blog en modo de vista HTML.

Ahora use el siguiente código y reemplace la pregunta y la respuesta.

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

Ahora guarde la página y la sección de preguntas frecuentes sobre acordeón se agregará al sitio web de Blogger.

Ahora, si desea agregar un esquema de preguntas frecuentes para esto, puede usar el código justo debajo del código anterior.

 <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 generará automáticamente el esquema de preguntas frecuentes según la pregunta y la respuesta agregadas en la sección de preguntas frecuentes.

No es necesario crear manualmente un esquema de preguntas frecuentes en el sitio web de Blogger. Este script hará la magia automáticamente.

Por lo tanto, si realiza algún cambio o agrega más preguntas, no necesita generar un esquema de preguntas frecuentes nuevamente utilizando ninguna herramienta en línea.

Si este artículo le resultó útil, compártalo en las redes sociales y ayude a otros a saberlo. Si tienes alguna duda al respecto, házmelo saber en la sección de comentarios.