A primera vista, display: none y visibility: hidden parecen hacer lo mismo: ocultan un elemento. Pero si estás diseñando una web con WordPress o trabajando en la apariencia de tu contenido, hay una diferencia clave entre ambos. Y lo más importante: esa diferencia también puede afectar al SEO.
Vamos a verlo con ejemplos reales, efectos visuales y comportamiento en buscadores.
Qué hace display: none
Cuando usas:
.elemento {
display: none;
}
El navegador elimina el elemento del flujo del documento. Es como si no existiera. No ocupa espacio y tampoco se renderiza.
Ejemplo práctico:
<p>Esto se ve</p>
<p style="display: none;">Esto no existe visualmente ni ocupa espacio</p>
<p>Esto también se ve</p>
El segundo <p> no ocupa ni un solo píxel. Es como si nunca hubiera estado ahí.
Qué hace visibility: hidden
Cuando usas:
.elemento {
visibility: hidden;
}
El elemento sigue existiendo y ocupa espacio, pero simplemente no se ve. Es invisible, pero no ha desaparecido.
Ejemplo:
<p>Esto se ve</p>
<p style="visibility: hidden;">Esto no se ve, pero ocupa el mismo espacio que si se viera</p>
<p>Esto también se ve</p>
Visualmente habrá un “hueco” donde estaba el segundo <p>, aunque no veas el contenido.
¿Cuál deberías usar?
Depende de lo que quieras conseguir:
| Objetivo | ¿Cuál usar? |
|---|---|
| Eliminar completamente un elemento (por ejemplo, un aviso o menú desplegable cerrado) | display: none |
| Ocultar algo pero mantener la estructura de la página (útil para accesibilidad, animaciones, etc.) | visibility: hidden |
¿Y qué pasa con el SEO?
Aquí es donde viene lo interesante.
Google y otros motores de búsqueda sí pueden ver contenido oculto con CSS.
Pero también pueden interpretar su uso como sospechoso, especialmente si ocultas contenido que no está pensado para el usuario final (por ejemplo, palabras clave ocultas solo para posicionar).
Vamos por partes:
🟥 display: none y SEO
- Google es capaz de leer contenido que esté en el HTML aunque esté con
display: none. - Pero si detecta que ocultas texto relevante para el posicionamiento que el usuario no puede ver, podría penalizarlo como cloaking (mostrar una cosa al buscador y otra al usuario).
- Usado con lógica (por ejemplo, para ocultar sliders, menús, bloques de membresía), no hay problema.
🟨 visibility: hidden y SEO
- Igual que el anterior: Google puede leerlo.
- Pero como el contenido sigue ocupando espacio, es más evidente que está ahí, solo oculto visualmente.
- Es útil si haces animaciones de entrada, menús que aparecen con JS, etc.
Conclusión SEO:
Si el contenido oculto no aporta valor al usuario visible, mejor no lo pongas. Si lo ocultas solo por diseño o comportamiento interactivo, no hay penalización.
Bonus: ¿afecta a lectores de pantalla?
Sí.
display: none: el contenido no se lee por los lectores de pantalla.visibility: hidden: tampoco se suele leer, aunque esté en el DOM.
Conclusión
display: noneelimina el elemento completamente del diseño.visibility: hiddenlo oculta pero deja su espacio reservado.- A nivel de SEO, Google puede ver ambos, pero lo importante es no abusar para ocultar contenido con intenciones manipuladoras.
- Úsalos con lógica y no tendrás problemas, ni visuales ni de posicionamiento.
Y tú ¿Cuál sueles usar más veces? ¿display:none o visibilty:hidden?