Datos estructurados para preguntas frecuentes con Yoast SEO

Si quieres añadir una sección de preguntas frecuentes en WordPress, puedes usar el bloque de FAQ de Yoast SEO, esto te permitirá tener datos estructurados útiles para los buscadores, además puedes complementar con código CSS, tal como veremos en este artículo.

Generalidades

Los buscadores como Google al indexar tu sitio buscan también datos estructurados en las diferentes páginas y secciones, uno de estos es justamente los datos de preguntas frecuentes.

Si bien es cierto puedes tener tus preguntas frecuentes directamente como texto, es mejor tenerlas también como datos estructurados que Google pueda entender y mostrar como parte de sus resultados de búsqueda, tal como se muestra a continuación:

Usando Yoast SEO para crear Preguntas Frecuentes

Puedes crear tus datos estructurados de manera independiente por ejemplo en FAQ Scheme Generator, sin embargo tendrías que mantener tanto los datos de tu sitio como los del generador actualizados.

En WordPress hay plugins que te generan automáticamente los datos estructurados en base al contenido de tu sitio, uno de estos es Yoast SEO.

Para generar la sección de Preguntas Frecuentes puedes usar el bloque FAQ de Yoast, desde el editor Gutenberg, tal como se muestra en la siguiente imagen:

 
Verás que puedes agregar una pregunta y también respuestas para cada una de ellas.

 
Finalmente en el front-end de tu sitio verás algo similar a lo siguiente:

Validando datos estructurados

Puedes validar los datos estructurados de la página en donde se muestran tus preguntas frecuentes desde el sitio de Google Rich Results, en nuestro ejemplo veremos algo similar a lo siguiente:

Mejorando los estilos y funcionalidad de las preguntas frecuentes

Finalmente puedes darle a tus preguntas frecuentes generadas por Yoast SEO un mejor aspecto

Puedes agregar el siguiente código en tu archivo style.css de tu tema hijo

.wp-block-yoast-faq-block .schema-faq-question {
    display: block;
    width: 100%;
    padding: 10px;
    cursor: pointer;
    border: 1px solid grey;
    background-color: white;
}

.wp-block-yoast-faq-block .schema-faq-answer {
    display: block;
    max-height: 0;
    overflow: hidden;
    margin-bottom: 10px;
    background-color: white;
    transition: all 300ms ease-in-out;
}

.wp-block-yoast-faq-block .show .schema-faq-answer {
    max-height: 500px;
    margin: 10px 0 10px 0;
}

.wp-block-yoast-faq-block .schema-faq-question {
    display: flex;
    justify-content: space-between;
}

.wp-block-yoast-faq-block .schema-faq-question:after {
    margin: 0 4px;
    display: inline-block;
    content: "+";
}

.wp-block-yoast-faq-block .show .schema-faq-question:after {
    content: "—";
}

 
Por otro lado para dar el comportamiento de desplegable, necesitaremos agregar código javascript, puedes agregar el siguiente código como parte de tu archivo functions.php de tu tema hijo.

add_action( 'wp_footer', 'dcms_add_script_faqs' );
function dcms_add_script_faqs() {
    ?>
    <script>
    (function ($) {
        $('.wp-block-yoast-faq-block .schema-faq-question').click(function (e) {
            $(this).parent().toggleClass('show');
        });
    })(jQuery);
    </script>
    <?php
}

 
Al final obtendremos algo similar a la siguiente imagen:

Conclusión

Como has podido comprobar puedes usar el bloque de FAQ de SEO Yoast para agregar la sección de preguntas frecuentes en tu sitio, al realizar esto te creará también los datos estructurados necesarios para Google, además puedes mejorar el diseño y comportamiento de las preguntas frecuentes en el front-end de tu sitio agregando código CSS y Javascript.