¿Es recomendado ocultar elementos con display none y display block en JavaScript?

xcodex · 26 Oct 2019

Hola!
Estoy trabajando con un modal, el cual se oculta y muestra con la ayuda de Javascript (cambiando de display: none a display: block y viceversa).
La duda es si esta práctica es recomendada, ya que al estar en display: none en realidad el modal está, pero no es visible.

¿Hay otra manera o esta es la correcta?.

Kurisutian · 26 Oct 2019

No es la mejor manera, porque puede interpretarse que estás rankeando con palabras que no tocan... Mi consejo es que dejes el modal vacío y en el JS le metas un Ajax y lances la carga de contenido dentro del modal.
Un saludo!

xcodex · 26 Oct 2019

Kurisutian dijo:
No es la mejor manera, porque puede interpretarse que estás rankeando con palabras que no tocan... Mi consejo es que dejes el modal vacío y en el JS le metas un Ajax y lances la carga de contenido dentro del modal.
Un saludo!

Gracias por responder, pero no entendí a que te refieres rankear con palabras que no tocan. 😳

Kurisutian · 26 Oct 2019

No pasa nada,
Hace mucho se practicaba el rankeo de palabras para subirlas a primeras posiciones de google, y se usaban prácticas como poner en display none frases dentro de las home y más bizarradas..... Así que google hizo una actualización en su algoritmo que detectaba ese "fraude" y te daba un palo a la web (lo típico de SEO).

Así que es aconsejable que los modales (a no ser que sea información muy muy básica) se carguen vía Ajax 🙂

xcodex · 26 Oct 2019

Kurisutian dijo:
No pasa nada,
Hace mucho se practicaba el rankeo de palabras para subirlas a primeras posiciones de google, y se usaban prácticas como poner en display none frases dentro de las home y más bizarradas..... Así que google hizo una actualización en su algoritmo que detectaba ese "fraude" y te daba un palo a la web (lo típico de SEO).

Así que es aconsejable que los modales (a no ser que sea información muy muy básica) se carguen vía Ajax 🙂

Entendí 🙂
Lo usaré para mostrar un formulario de contacto y un menú. De todas maneras lo tendré en cuenta.

Kurisutian · 26 Oct 2019

En este caso, no creo que tengas problema con el SEO, pues es algo muy típico usar un modal para formularios de contacto.

Por otro lado, tal vez te sale a cuenta tener el contacto en una view para que generes páginas relevantes. A Google le gusta la interacción de los usuarios. Por lo que mi conejo es que tengas una URL Tal que así: https://tudominio.com/contacto (si es que puedes permitirte separar el formulario)

PD: Es VITAL que tengas HTTPS para las interacciones POST con tu web, porque las páginas sin SSL están abocadas a caer en google a la larga.
Espero te sirva de ayuda ^^

xcodex · 26 Oct 2019

Kurisutian dijo:
En este caso, no creo que tengas problema con el SEO, pues es algo muy típico usar un modal para formularios de contacto.

Por otro lado, tal vez te sale a cuenta tener el contacto en una view para que generes páginas relevantes. A Google le gusta la interacción de los usuarios. Por lo que mi conejo es que tengas una URL Tal que así: https://tudominio.com/contacto (si es que puedes permitirte separar el formulario)

PD: Es VITAL que tengas HTTPS para las interacciones POST con tu web, porque las páginas sin SSL están abocadas a caer en google a la larga.
Espero te sirva de ayuda ^^

¡¡¡Muchas gracias!!! 👍👍👍👍

Kurisutian · 26 Oct 2019

No hay de que ^^

Christianabreuh · 26 Oct 2019

document.getElementById('elemento').remove()

Karasu · 26 Oct 2019

¿Por qué no usar point-events: none junto con opacity lo ocultas o muestras con js/css? 🤔
Así evitas usar display, aunque esto no sé si estará bien o no, sobre todo para el seo. Bueno ahí te dejo mi idea. Saludos.

castrodarwin · 26 Oct 2019

Dios, pero que cuesta utilizar:

visibility: hidden;

xcodex · 26 Oct 2019

Christianabreuh dijo:
document.getElementById('elemento').remove()

Karasu dijo:
¿Por qué no usar point-events: none junto con opacity lo ocultas o muestras con js/css? 🤔
Así evitas usar display, aunque esto no sé si estará bien o no, sobre todo para el seo. Bueno ahí te dejo mi idea. Saludos.

castrodarwin dijo:
Dios, pero que cuesta utilizar:

visibility: hidden;

Gracias por sus respuestas. El SEO para este sitio no interesa ya que es una aplicación que utilizarán personas puntuales.

Karasu · 26 Oct 2019

xcodex dijo:
Gracias por sus respuestas. El SEO para este sitio no interesa ya que es una aplicación que utilizarán personas puntuales.

Si es así, yo haría lo que te comenté antes.

OmarCoder · 28 Oct 2019

Display:none directamente NO muestra el elemento, está en código lógicamente pero no es visible ni nada por el estilo, el elemento está pero invisible únicamente cuando tiene opacidad 0 o visibility hidden
Si quieres remover el código directamente puedes usar javascript como te comentan arriba
Si quieres puedes hacer la prueba, si creas un elemento absoluto de 100%x100% y z-index:99; con fondo azul, estará sobre la pantalla, si usas opacity:0 o visibility:hidden no podrás clickear nada en la página, en cambio al usar display:none, como el elemento n oexiste en pantalla,sí puedes interactuar sin problemas

spot · 30 Oct 2019

Puedes usar .detach(); con jquery en vez del display none; o combinarlos

MarkBurns · 2020-08-01T19:19:56-0500

Christianabreuh dijo:
document.getElementById('elemento').remove()

Horrible práctica. Ya no está en el DOM una vez ejecutado el remove(), si no recargas la página... ese modal ya no lo ves en la vida.

zcriptz · 2020-08-03T21:35:24-0500

castrodarwin dijo:
Dios, pero que cuesta utilizar:

visibility: hidden;

No es lo mismo que display: none

OscarStMarquez · 2020-08-03T21:42:36-0500

El display te va bien!

castrodarwin · 2020-08-04T02:35:31-0500

zcriptz dijo:
No es lo mismo que display: none

Por eso mismo lodigo.

zcriptz · 2020-08-04T02:36:46-0500

castrodarwin dijo:
Por eso mismo lodigo.

Pero depende mucho el caso, quizás el usuario necesitaba que el elemento deje de "ocupar espacio".

¿Es recomendado ocultar elementos con display none y display block en JavaScript?

xcodex

Kurisutian

xcodex

Kurisutian

xcodex

Kurisutian

xcodex

Kurisutian

Christianabreuh

Karasu

castrodarwin

xcodex

Karasu

OmarCoder

spot

MarkBurns

zcriptz

OscarStMarquez

castrodarwin

zcriptz

Temas similares