¿Qué tan malo es usar display: none en CSS?

72

Muchas veces he escuchado que es malo usarlo display: nonepor razones de SEO, ya que podría ser un intento de introducir palabras clave populares irrelevantes. Unas cuantas preguntas:

  1. ¿Todavía se recibe sabiduría?
  2. ¿Hay alguna diferencia si solo estás ocultando una sola palabra, o tal vez un solo carácter?
  3. Si debe evitar su uso, ¿cuáles son las técnicas preferidas para esconderse (en situaciones en las que necesita volver a ser visible en ciertas condiciones)?

Algunas referencias que he encontrado hasta ahora:

Matt Cutts de 2005 en un comentario

Si estás usando CSS para ocultar texto, no te sorprendas si eso se llama spam. No estoy diciendo que los mouseovers o el texto DHTML o have-a-logo-but-also-have-text sean spam; Respondí eso último en una conferencia cuando dije "imagina cómo se vería un visitante, un competidor o alguien revisando un informe de spam. Si muestras el nombre de tu empresa y es Expo Markers en lugar del logotipo de Expo Markers, debería estar bien. Si el texto que decide mostrar es 'Expo Markers cheap discount online buy online Expo Markers sale ...' entonces sería más cauteloso, porque eso puede verse mal ".

Y en otro comentario sobre el mismo artículo.

Podemos marcar el texto que parece estar oculto usando CSS en Google. Hasta la fecha, no hemos eliminado sitios algorítmicamente para hacerlo. Nos esforzamos por evitar tirar a los bebés con agua de baño.

Eric Enge dijo en 2008

El uso legítimo de esta técnica es tan frecuente que rara vez esperaría que los motores de búsqueda penalicen a un sitio por usar el display: noneatributo. Es muy difícil implementar un algoritmo que realmente pueda descubrir si el uso particular de display: noneestá destinado a engañar a los motores de búsqueda o no.

Andy
fuente
¿Qué sucede si uso una pantalla blanca de carga (sin texto dentro) que luego oculto con javascript? ¿Google considerará que estoy ocultando la página debajo de esa pantalla blanca? Gracias
bloomingsmilez
Uso display: none para reducir el contenido de la página para pantallas móviles porque la cantidad de copia que parece razonable en una pantalla más grande es demasiado en un teléfono. ¿Me estoy causando un problema?

Respuestas:

57

En estos días de sitios web pesados ​​de jQuery (y otros marcos de JavaScript), no puedo ver cómo puede ser un problema, ya que se usa ampliamente cuando se usan cosas como controles deslizantes de jQuery, transiciones, galerías, tickers, etc. Ahora son comunes y Los motores de búsqueda son lo suficientemente inteligentes como para no penalizar ciegamente su uso.

Un usuario declara esto en el foro de Google Webmaster Central :

"Simplemente usando la pantalla: ninguno no activará automáticamente una penalización. La clave es si existe o no un mecanismo, ya sea automático o invocado por el usuario, para hacer visible el contenido. Google se está volviendo muy experto en procesar JavaScript para encuentre e interprete tales mecanismos. Si usa HTML, CSS y JavaScript válidos, no tiene nada de qué preocuparse. ¡Buena suerte! "

Dan Diplo
fuente
Interesante, gracias. Eso implica que debería evitar ser flojo y usar display: nonepara eliminar elementos en CSS que podrían eliminarse en el código; pero para efectos y similares estoy bien. Entonces me pregunto cómo podrían detectar situaciones en las que hay un logotipo de imagen, y el texto del logotipo también se incluye para accesibilidad pero está oculto. ¿De la descripción, esto se consideraría malo?
Andy
@Andy: Podría ser. Pero no debe usar CSS para ocultar el texto del logotipo; ponlo en el altatributo de la imgetiqueta. Para eso está el atributo, y que yo sepa, usarlo tiende a aumentar su calificación de SEO.
David Z
En realidad, parece que podría ser un caso en el que usa el longdescatributo de la etiqueta de imagen para proporcionar un enlace a otra página que contiene la descripción completa. Esto solo será visto por los lectores de pantalla (y tal vez los motores de búsqueda). Ver webaim.org/techniques/images/longdesc#longdesc
Dan Diplo
En realidad no estoy buscando la mejor manera de presentar una descripción de un gráfico ... Me refería a la cita de Matt Cutts. No digo que ... tenga-un-logo-pero-también-tenga-texto es correo no deseado . No me parece que esté hablando de usar los atributos alto longdesc, y proporcionó un ligero contraste con La clave es si existe o no un mecanismo ... para hacer visible el contenido .
Andy
7

Si no lo está abusando, no será un problema. En este momento, Google no rastrea las hojas de estilo CSS en busca de instancias dedisplay: none

Google no va a declarar la guerra a una regla de estilo ampliamente utilizada, solo está dando una advertencia a aquellos que piensan que podrían agregar 1000 palabras clave a un sitio que están configuradas display: noneo peor aún,margin-left: 9999px

Shane Stillwell
fuente
6

Use "display: none" solo cuando sea la herramienta correcta para usar.

Como sugieren las citas, el problema que tienen los motores de búsqueda con mostrar ninguno es el spam. Intentar utilizar motores de búsqueda de spam, independientemente de las herramientas que use para eso, es una mala idea. Si usa CSS para algo que no sea spam, entonces no hay problema.

La herramienta adecuada para el trabajo correcto.

luiscubal
fuente
3
Gracias. La pregunta entonces es cuándo es display: nonela herramienta correcta. Usted dice que si CSS se usa para otra cosa que no sea spam, no será un problema: ¿está seguro de que si lo uso display: nonecomo una forma perezosa de eliminar elementos, no será un problema?
Andy
@Andy display: ninguna es la herramienta correcta cuando no quieres mostrar algún contenido. Para eliminar elementos, puede ser mejor no incluirlo (o, si usa JavaScript, eliminar los elementos del DOM). Si elimina el contenido de la página usando display: none, para que los usuarios no lo vean pero los motores de búsqueda aún lo indexen, entonces eso sería spam. Si tiene algún tipo de botón "Mostrar / Ocultar", o algo así, entonces está bien.
luiscubal
4

Estoy de acuerdo con Dan Diplo y para agregar a lo que dijo, también Google lo usa display: noneen su PÁGINA DE INICIO , por lo que realmente no puede ser un problema usarlo, siempre y cuando no lo use para enviar spam (es decir, insertar cientos de palabras clave en una pantalla: ninguno panel DIV).

Abra Google HOME PAGE y busque en el código fuente HTML. Si lo buscas, display:nonelo verás muchas veces. :)

Marco Demaio
fuente
Gracias Marco Eso todavía deja dudas sobre si puedes usar display: noneelementos que nunca son visibles.
Andy
@Andy: se supone que los elementos nunca visibles son solo SPAM, no veo por qué debería usar elementos nunca visibles, ¿por qué molestarse en colocarlos en una página HTML? Así que esperaría que usarlos no sea una buena idea. Google podría detectarlos ahora o en el futuro y penalizar su sitio.
Marco Demaio
El único ejemplo en el que puedo pensar es cuando está usando un CMS y, por razones de tiempo, es posible que desee usar CSS para ocultar uno o dos pequeños bits de marcado, en lugar de personalizar el marcado por completo. (Y solo le pido a la Q que comprenda mejor la situación actual: mi CMS de elección es Drupal, donde alterar el marcado es rápido y fácil)
Andy
@Andy: ¿es lógicamente posible que un motor de búsqueda lea miles de líneas de JavaScript e identifique casos en los que es lógicamente imposible que se muestre un elemento? Se necesitaría una inmensa ingeniería inversa para estudiar el código de cualquier sitio con una línea que diga $('.'+somevar).show();y descubra cada valor posible que somevarpueda tener y compararlo con cada estado posible del DOM, y ese es un caso excepcionalmente trivial ... Además, muchos casos en los que no se mostrará un div debido a datos, entradas, resultados de llamadas API / AJAX, comportamiento del usuario, etc., pero lógicamente podría ...
user56reinstatemonica8
@ user568458 Creo que ese es el punto que hizo Eric Enge en el último párrafo de la pregunta y Dan Diplo en la respuesta aceptada.
Andy
3

Creo que deberías intentar encontrar otras alternativas, pero aquí hay algunos artículos de referencia

Incluye enlaces a Maile y Vanessa en el chat de radio de un webmaster sobre este tema http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

Maile es ingeniero de Google http://maileohye.com/html-text-indent-not-messing-up-your-rankings/

Es algo para lo que Google va a encontrar una solución, pero la compensación negativa y la visualización no son seguras si se tiene una perspectiva a largo plazo.

AndyBeard
fuente
0

Google rastrea display:nonecontenido CSS .

Ocultar algo de Google solo es malo si estás intentando manipular intencionalmente los rankings de búsqueda.

Las opciones ocultas y el texto de los visitantes ahora es una práctica común, dada la forma en que los sitios web interactivos se han convertido, por lo que no debe preocuparse. En el pasado, la gente usaba este tipo de métodos para jugar al SEO, ocultar palabras clave y enlaces, etc. El resultado es que cuando Google rastrea un sitio que tiene cosas ocultas para el espectador, lo ve como menos confiable.

Josip Ivic
fuente
0

Acabo de tener una conferencia con SEO en Google y esto no es cierto. Mostrar ninguno penaliza, seguro. Algún tiempo antes, esto fue tratado con visibilidad en su lugar o usando tamaños de texto negativos o sangría negativa.

Es un hecho que el texto debe ser visible y no estar obstruido de ninguna manera visible. Al menos sin placa de caldera o contenido duplicado o perezoso.

Por cierto, Google puede hacer lo que quiera en su sitio, probablemente se pongan en primer lugar, incluso si era una papa.

En particular, el enfoque propuesto y que probablemente se utilizará es mostrarlo y sin importar las consecuencias de diseño que pueda tener.

Propondré cosas como indexación z (estratificación) para verificar si por casualidad no se considera este tipo de estilos. Pero no creo que el algoritmo sea lo suficientemente fuerte como para considerar esto. O cosas como calcular la posición de la caja sobre el tamaño de la pantalla para considerar el posicionamiento negativo como un bloque visual.

El texto relacionado para el interés del cliente seo ergo debe ser visible.

Budaya
fuente
1
Esta respuesta es totalmente errónea. Cualquier conferencia a la que fuiste es terrible. No puedo imaginar qué otra basura te dieron de comer. Probablemente te dijeron que las metaetiquetas también eran importantes.
John Conde
1
Es cierto que si crea una larga lista de palabras clave, póngala en su página y escóndela con display: ninguna, Google penalizará su sitio. También es cierto que el texto destinado a ser indexado debe ser visible. Como señalan otras respuestas, hay usos legítimos para mostrar: ninguno.
Stephen Ostermiller
Los medios técnicos utilizados para ocultar texto no le importan en absoluto a Google. La especulación de que el índice z o el posicionamiento negativo podría usarse para engañar a Google es totalmente falsa. Googlebot renderiza las páginas ahora y puede detectar cualquier medio utilizado para evitar que el texto aparezca en píxeles en la página. Como otras respuestas señalan, no
Stephen Ostermiller