Cómo ocultar un texto, pero que sea accesible y compatible con el SEO

En ocasiones tienes la «necesidad» de ocultar un texto a los visitantes pero quieres que «exista» para el posicionamiento, para el SEO, y te encuentras con el problema de que Google y otros buscadores penalizan el mismo hecho de ocultar textos a los visitantes.

Esto tiene fácil solución usando una clase CSS incorporada por defecto en WordPress que, no solo permite ocultar texto y que siga siendo válido para SEO, sino que encima es totalmente accesible, compatible con lectores de pantalla, ahí es nada.

Me refiero a screen-reader-text

Únicamente tienes que aplicar la clase a cualquier texto y este desparecerá de la pantalla, no será visible, pero los lectores en pantalla, y los buscadores, seguirán «viendo» el texto en el código fuente.

Puedes aplicar esta clase CSS de varias maneras, siendo la más sencilla desde el mismo editor de WordPress, añadiéndola en la caja de ajustes avanzados de cualquier bloque de texto, como en la siguiente captura:

También, si lo prefieres, puedes añadirla directamente en HTML a un texto completo o a parte de un texto, como en el siguiente ejemplo:

<h2 class="screen-reader-text">Información de contacto</h2>
<h6>Dirección</h3>
<p>[...]</p>
<h6>Teléfono</h3>
<p>[...]</p>

En este caso he aplicado la clase CSS al encabezado H2 de una caja de información con el objetivo de que no sobrecargue la página con demasiados encabezados visibles en H2, mientras se mantiene la estructura jerárquica interna del contenido, tanto para lectores en pantalla como para el SEO, y lo importante sigue siendo visible para los visitantes (dirección, teléfono, etc.)

Aquí tienes aplicado el ejemplo:

Información de contacto

Dirección

[…]

Teléfono

[…]

Una mejora posible de esta clase CSS es aplicarle algo de estilo para que no se genere un salto de contenido al estar oculta, como por ejemplo así:

.screen-reader-text {
position: absolute;
top: -9999px;
left: -9999px;
}

Añadiendo este CSS a tu sitio (en la hoja de estilos, el personalizador, o como prefieras) cualquier elemento con la clase se ocultará pero manteniendo el flujo de navegación sin alteraciones.

Si, además, quieres que el texto sea visible cuando reciba el foco mediante la navegación con teclado o desde lectores de pantalla, entonces habría que añadir un poco más de CSS adicional. Por ejemplo:

.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Por encima de la barra de herramientas de WP */
}

Como puedes comprobar, haciendo tus propias pruebas con la clase CSS screen-reader-text, es un recurso muy interesante para montones de posibles usos, en los que tengas que, al mismo tiempo, ocultar texto a los visitantes, pero manteniendo la accesibilidad, y el SEO.

¿Lo conocías? ¿lo usas en casos especiales/interesantes que quieras compartir?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!