Existen muchas formas de ocultar un elemento en el CSS. El efecto de cada método sobre la accesibilidad, el diseño y el rendimiento difiere mucho entre cada caso. Utilizar el atributo HTML hidden, es la forma perfecta de ocultar elementos y, como se trata de un atributo global, se puede utilizar en cualquier elemento HTML del CSS.
En este artículo, aprenderás a cómo ocultar un elemento HTML y cuándo hacerlo.
¿Qué es un elemento HTML oculto?
Un atributo HTML hidden indica que un elemento no es relevante. Si algo se marca como “oculto” en el CSS, el elemento queda oculto en los motores de búsqueda, imposibilitando su visualización y haciéndolo invisible incluso para los lectores de pantalla.
En otras palabras, usar un atributo HTML hidden garantizará que los motores de búsqueda como Google no muestren determinados elementos.
Consejo para expertos: un booleano es una variable binaria que solo puede tener dos valores posibles, 0 (falso) o 1 (verdadero). El atributo HTML hidden es un elemento booleano. Esto significa que si está presente, el valor es siempre verdadero, y si está ausente, el valor es siempre falso.
¿Por qué ocultar un elemento HTML?
Las razones para ocultar un elemento HTML pueden variar. A menudo se emplea para impedir que el usuario vea un elemento hasta que se cumpla un requisito. Por ejemplo, puedes ocultar ciertos elementos de una página hasta que el usuario complete el proceso de inicio de sesión.
A menudo, en el caso mencionado anteriormente, los webmasters utilizan JavaScript para desbloquear los elementos ocultos, utilizando algo similar a lo siguiente:
Por último, una buena razón para empezar a utilizar atributos hidden es la transición de Google a una indexación mobile-first. La mayor utilidad SEO de ocultar elementos HTML, es la posibilidad de comprimir mucho contenido en páginas reducidas en los móviles sin dejar de ofrecer una experiencia de usuario fluida.
Es el equilibrio perfecto entre el SEO y diseño UX.
Cómo utilizar el atributo oculto
Cuando emplees el atributo HTML hidden, es importante que no enlaces al elemento oculto desde elementos no ocultos, como por ejemplo, enlazar al atributo href desde una sección oculta. El contenido marcado con atributos hidden no es ser relevante para el usuario —de lo contrario no estaría oculto— y, por tanto, no debería enlazar a otros elementos de la página.
Sin embargo, en algunos casos los elementos pueden seguir enlazando a elementos HTML ocultos en el CSS. Es el caso de algunas descripciones, que son necesarias si se hace referencia a ellas desde el elemento que describen. Es el caso del atributo “aria-describedby”, que permanece oculta hasta que el usuario la activa con una acción específica (por ejemplo, haciendo clic o pasando el ratón por encima).
Consejo para expertos: un atributo aria-describedby ofrece una etiqueta descriptiva para un elemento en el mismo documento DOM.
Ten en cuenta que cambiar la visualización del estilo DOM de un elemento HTML oculto, anula el primer comando. Es decir, un elemento con estilo “display: flex” será leído y mostrado por los navegadores, incluso en presencia de un atributo oculto.
Malas prácticas del contenido oculto que debes evitar
Ocultar elementos es siempre un movimiento muy arriesgado que puede perjudicar seriamente tu posicionamiento. Se debe a que se ha utilizado históricamente como una técnica de spam para engañar a los motores de búsqueda repitiendo palabras clave.
Las webs spam usan normalmente técnicas SEO de sombrero negro. Crean, por ejemplo, dos versiones de la misma página web, una para el algoritmo y otra para los usuarios. El webmaster escribe párrafos sin sentido con palabras clave para los motores de búsqueda, mientras que a los usuarios les enseña una página optimizada en la que el contenido original está oculto y es inaccesible.
Esta práctica provoca que los usuarios hagan clic en un enlace pensando que les llevará a una web genuina, para luego (desafortunadamente), ser conducidos a otro sitio. Esta práctica se conoce como cloaking y permite a los spammers aumentar las ventas a través de enlaces de afiliación y anuncios. Hoy en día, es una de las muchas causas que conlleva una penalización de Google.
Nota: la técnica cloaking no tiene nada que ver con el atributo HTML hidden de que estamos hablando.
Cómo ocultar un elemento HTML sin violar las directrices de Google
Hoy en día, la gran mayoría de las webs incluyen elementos ocultos en forma de pestañas en la que los usuarios pueden hacer clic para acceder a más contenido. Las piezas ocultas solo son problemáticas cuando son completamente inaccesibles para los usuarios, por lo que es evidente que existe una gran diferencia entre la técnica cloaking y los elementos HTML ocultos accesibles a través de una acción (por ejemplo, hacer clic en un botón de “Leer más”).
En caso de duda, recuerda esta regla de oro.
Ofrece una señal visible que muestre claramente a los usuarios que hay más contenido en la página y explícales cómo pueden acceder a él.
Ten por seguro que si un usuario puede ver los elementos ocultos, Google también lo hace y no penalizará tu web. El algoritmo ha recorrido un largo camino y ahora es capaz de renderizar una página utilizando archivos JavaScript y CSS.
Los robots de Google visualizan las páginas exactamente igual que los usuarios. Céntrate en ofrecer una buena experiencia de usuario y todo irá bien.
Aborda los problemas técnicos del SEO con Auditoría del sitio
La herramienta Auditoría del sitio es tu mejor aliado contra las penalizaciones de Google. Si estás buscando algún problema técnico relacionado con el SEO, es un buen lugar para empezar. Consulta el informe “Problemas” para identificar los errores, advertencias y avisos que tiene tu web.
Consulta nuestras directrices para descubrir la lista completa de problemas que puede identificar Auditoría del sitio.