El término «acordeón» para describir el tipo de presentación web interactiva que trato en este artículo proviene del instrumento musical del mismo nombre. Más concretamente, se refiere a un tipo concreto denominado acordeón cromático, como se muestra en la imagen superior, en el que se abren y cierran diferentes secciones. Dicha imagen superior de una mujer que se encuentra tocando un pequeño acordeón cromático es cortesía de ウィキ太郎 (WikiTaro) y se encuentra en el dominio público. El uso de acordeones en los sitios web presenta varias ventajas.
Las principales ventajas de utilizar un acordeón en un sitio web incluyen:
- Optimización del espacio: evita abrumar a los usuarios con grandes cantidades de texto, mostrando sólo lo necesario.
- Interactividad: permite a los usuarios controlar el contenido que desean ver, lo que aumenta la interacción. Los visitantes hacen clic en la sección deseada para abrirla.
- Diseño adaptable: los acordeones son una excelente solución para la navegación en pantallas pequeñas (es decir, teléfonos inteligentes y tabletas más pequeñas), ya que organizan mejor las subsecciones.
- Ideal para preguntas frecuentes.
- Excelente posicionamiento orgánico (visibilidad y facilidad de descubrimiento en los buscadores) al implementarse y configurarse debidamente.
Aunque soy consciente de que existen muchas herramientas y técnicas diferentes para crear acordeones en un sitio web de WordPress, me he quedado con la combinación del acordeón gratuito Elementor junto con Rank Math Pro para el posicionamiento orgánico. La razón para utilizar el acordeón gratuito Elementor en lugar de sus alternativas para crear acordeones es que permite un mayor control estético, sin necesidad de CSS manual, en comparación con las alternativas que he visto. Cuando hablo de control estético, me refiero (entre otras cosas) a la capacidad de dictar el comportamiento de las secciones abiertas y cerradas, tanto inicialmente como durante la interacción del usuario, así como los colores y el espaciado ofrecidos.
Cuatro ejemplos en los que he utilizado acordeones
A continuación se muestran cuatro ejemplos en los que he utilizado acordeones. Todos ellos son capturas de pantalla estáticas, pero están vinculados a las páginas web de origen correspondientes para que puedas probar la interacción al hacer clic en las diferentes secciones. Los dos primeros comienzan con todos los elementos cerrados de antemano. El tercero y el cuarto comienzan intencionalmente con el primer elemento ya abierto
Arriba, una captura de pantalla parcial de la página de preguntas frecuentes del sitio web de TecnoTur.LLC en castellano. Inicialmente, todos los elementos están cerrados.
Arriba, una captura de pantalla parcial de la página de preguntas frecuentes del sitio web de TecnoTur.LLC en inglés. Inicialmente, todos los elementos están cerrados.
Arriba, una captura de pantalla parcial de la página de inicio del sitio web EditorialTecnoTur.com en castellano. El primer elemento ya está abierto al acceder a la página y el cambio de color que elegí ya es visible.
Arriba, una captura de pantalla parcial de la página de inicio del sitio web TecnoTurPublishing.com en inglés. El primer elemento ya está abierto al acceder a la página y el cambio de color que elegí ya es visible.
Consideraciones para una implementación adecuada del posicionamiento orgánico
En este caso, el posicionamiento orgánico significa que queremos lograr que todo el contenido (incluso la parte que está oculta) sea visible para motores de búsqueda como Bing y Google. El objetivo es facilitar que las personas encuentren o descubran el contenido de nuestros sitios web.
Teniendo en cuenta que utilizo Rank Math Pro para el posicionamiento orgánico por otras razones en ciertos sitios web que desarrollo y mantengo, y el hecho de que Rank Math nos ha advertido específicamente en su video instructivo que sólo activemos la opción visible en la parte inferior izquierda de la captura de pantalla anterior: Añadir el marcado de esquema de preguntas frecuentes (sin activar la correspondiente que se encuentra encima, que es de Elementor), para evitar errores de esquema, eso es lo que hago.
Read this article in English
Accordion: powerful for website aesthetics + SEO when configured properly
Divulgación para la FTC
Ninguna de las organizaciones mencionadas en este artículo ha pagado por figurar en él. Allan Tépper gana regalías sobre las ventas de sus propios libros. Algunas de las empresas mencionadas anteriormente han contratado a Tépper y/o TecnoTur.LLC para realizar consultorías y/o traducciones/localizaciones/transcreaciones. Algunos enlaces a terceros enumerados en este artículo y/o en este sitio web pueden beneficiar indirectamente a TecnoTur.LLC a través de programas de afiliados. Las opiniones de Allan Tépper son de él mismo. Allan Tépper no es responsable del mal uso o mala comprensión de la información que comparte.
Deja una respuesta