Image replacing vs Search engines

Escoffie · #1 (**permalink**) 19/01/2006, 19:01

Hola foreros:

Mi pregunta es: ¿el image replace sufre alguna amonestación por los buscadores?

Me refiero al truquito de reemplazar un texto por una imagen.
Por ejemplo, dado el html:

Código HTML:

<h1><span>Palabras claves aquí</span></h1>

Usemos un CSS de este modo:

Código:

h1 { 
    background: transparent url(h1.gif) no-repeat top left; 
    margin-top: 10px; 
    width: 219px; 
    height: 87px; 
    float: left;
}
h1 span {
    display:none
}
/* tomado del ejemplo de csszengarden */

Lo cual da como resultado una imagen con el tipo de letra que quiero diciendo lo mismo que el texto, el cual permanece escondido, pero "teóricamente" con sentido para los buscadores (se supone que más que un alt) y los navegadores de lectura, ya sabe, el importante tema de la accesibilidad.

Pero como Google y familia penalizan muy feo los intentos de spam, aunque yo no lo quiero para hacer spam sino para tener headings más bonitos, me da miedo que en vez de ayudar, me perjudique con mi page rank.

¿Alguien sabe cómo proceden Google y Yahoo al respecto o sabe de algún lugar donde se pueda leer sobre el tema?

Saludos y de antemano gracias.

jesusbet · #2 (**permalink**) 19/01/2006, 20:01

Si no mal recuerdo, Google no te penaliza por algo que no debes, es decir, si tu intención no es mala, ellos se dan cuenta (quien sabe como, pero se dan cuenta).

Escoffie · #3 (**permalink**) 19/01/2006, 20:05

jajajaj!!! Gracias jesusbet. Así es, Google es todo un misterio. Así con la inteligencia artificial.

Para los demás, ¿Alguna otra idea?

Saludos

mateamargo · #4 (**permalink**) 19/01/2006, 20:22

Para eso tenés que usar MetaTags:

Código:

<META name="keywords" lang="es" 
         content="futbol, pelota, estadio">
<META name="description" lang="es" 
         content="Mi página personal sobre fútbol">
<META name="author" lang="es" 
         content="mateamargo">

Tus headers puede ser todo lo bonito que quieras sin necesidad de engañar a nadie. Los buscadores priorizan y benefician a los sitios que usan meta tags.

Saludos.

Escoffie · #5 (**permalink**) 19/01/2006, 20:27

Gracias mateamago. De hecho las uso :)
Lo que pasa es que se sabe que Google penaliza ciertas prácticas que tienen que ver con esconder texto y por diversas razones requiero usar ese truquito del reemplazo de imágenes con el h1 y el span, entre ellas porque hipotéticamente al haber texto como h1 éste es más relevante que el alt de una imagen, y por cuestiones de accesibilidad para invidentes.
He leido por ahí que mucha gente lo usa por esas mismas razones, pero me da cosa.

Saludos.

mateamargo · #6 (**permalink**) 20/01/2006, 15:36

Cita:

Iniciado por Escoffie

Gracias mateamago. De hecho las uso :)
Lo que pasa es que se sabe que Google penaliza ciertas prácticas que tienen que ver con esconder texto y por diversas razones requiero usar ese truquito del reemplazo de imágenes con el h1 y el span, entre ellas porque hipotéticamente al haber texto como h1 éste es más relevante que el alt de una imagen, y por cuestiones de accesibilidad para invidentes.
He leido por ahí que mucha gente lo usa por esas mismas razones, pero me da cosa.

Saludos.

Con que lo pongas en los metatags es suficiente.
A parte, si va a ser una imagen, ¿qué sentido tiene que esté en el h1?, diría que la pongas dentro de un div o un th.

Saludos.

Escoffie · #7 (**permalink**) 20/01/2006, 17:55

Hola Mateamargo (¿tu nic es por la bebida argentina? aquí en México casi no la conocemos

)

A grandes razgos, los buscadores prefieren las páginas con una estructura adecuada, eso implica usar correctamente las etiquetas h1, h2, p, strong, ul, ol, li, etc.

Además por el mal uso que se ha dado a los metatags, los principales buscadores como Google y Yahoo no le hacen mucho caso a los metatags (ejemplos de mal uso: que mi página hable de carreras de ardillas y en los keywords ponga las palabras mp3, gratis y Paris Hilton

para atraer visitas extras).

Otra razón, no todas las personas (al menos para este proyecto en concreto en el que estoy) tienen sus imágenes visibles en el navegador, es decir, es puro texto, pero como esa imagen hace las veces de encabezado <h1> en la página, pues quien tenga las imágenes desactivadas no va a tener encabezado, jeje. Además de que semánticamente el buscador no le da el mismo peso a un ALT dentro de un IMG que a un H1.

Por último, pero no menos importante, está el tema de los que tienen alguna discapacidad visual. Ellos obviamente no ven la página, sino que su navegador se las lee, pero si lo que tienes es una imagen, pues el navegador no comprende que esa imagen puede formar palabras, porque no está en ASCII.

Volviendo a mi duda, así como Google penaliza los usos indevidos de keywords y descriptions, se sabe que también penaliza por ejemplo cuando el texto es blanco y el fondo es blanco (obviamente porque es un intento de ocultar el texto). La técnica que describo la tomé de un sitio maravilloso llamado www.csszengarden.com y la usan justo para lo mismo que describo líneas arriba. Leyendo por ahí mucha gente argumenta que el page rank puede mejorar usando esta técnica contra usar sólo la imagen talcual, pero me da inseguridad ya que Google es muy estricto con este tipo de cosas.

En fin, creo que le haré caso a los CSSeros de Zen Garden, de www.cssbeauty.com y www.disenorama.com y lo intentaré así.

Mochos saludos y gracias

mateamargo · #8 (**permalink**) 21/01/2006, 09:54

A ver... hay algo que no entiendo.

Ponés una imagen como fondo y un texto que dice lo mismo pero ocultado. ¿Cómo se supone que una persona con imágenes deshabilitadas pueda leer el contenido de tu página?

Entiendo lo de personas no videntes, donde pueden usar el Jaws para que les lea el contenido.

Con respecto a los metatags, se penaliza el mal uso, pero en tu caso, no lo sería, ya que pondrías palabras clave que se correspondan con tu sitio y una descripción apropiada.

PD: Sí, es por la bebida argentina.
PD2: ¿Ya publicaste tu página?

jesusbet · #9 (**permalink**) 21/01/2006, 10:28

bueno, el esconder el texto más bien beneficiaría a los navegadores angtiguos (IE<5) que no soportan CSS del todo.

mateamargo · #10 (**permalink**) 21/01/2006, 10:52

Pero si no soportan CSS del todo entonces no se va a esconder el span y tendrias el texto y la imagen... y no sé si eso es lo que se quiere lograr con esto.

jesusbet · #11 (**permalink**) 21/01/2006, 10:54

bueno, ahí puede haber un error de parte del webmaster, yo también pongo textos escondidos pero por medio de la propiedad padding-top, y no uso imagenes como elementos en sí de XHTML, sino como fondo de un elemento (DIVs por ejemplo) XHTML....

Escoffie · #12 (**permalink**) 24/01/2006, 17:18

Hola Mateamargo. No he publicado la página, pero puedes echar un vistazo a www.csszengarden.com y ver su código fuente. Es la misma cosa la que estoy tratando de hacer.
Tienes razón con lo de las imágenes deshabilitadas, no lo había pensado, si de todos modos estará oculto, jeje

Entiendo lo de los metatags, la idea era que además de ellos tuviera el texto como un H1, ya sabes, para tener mejor Page Rank. Al menos eso es lo que dicen los especialistas en posicionamiento, que el H1 es más relevante que los meta, justo porque los buscadores ya saben que no todos les dan buen uso.
En fin, supongo que no es tan relevante después de todo, con los meta y el texto deberá ser suficiente.

¡Gracias por tus respuestas!

(Hace como 2 años que probé el mate y nunca lo volví a probar. Fue toda una experiencia).

Escoffie · #13 (**permalink**) 24/01/2006, 17:22

Hola jesusbet.

Cómo está eso de padding-top? Los mandas "fuera de cuadro" en vez de ocultarlos, qué ingenioso!!! jeje Supongo que así si Google decide que display:none es una forma de hacer trampa, no repercute en tu posicionamiento. ¿Es eso correcto?
Igual pensaba usar las imágenes como fondo pero no de un DIV, sino directamente sobre el H1.

RoQ · #14 (**permalink**) 24/01/2006, 17:31

es mas practico sacarlos de la pantalla que ocultarlos y usas menos codigo

Código HTML:

<h1>Palabras claves aquí</h1>

Código PHP:

  h1 { 
    background: transparent url(h1.gif) no-repeat top left; 
    margin-top: 10px; 
    width: 219px; 
    height: 87px; 
    float: left;
    text-indent:-10000px; /* saca el texto de la pantalla */
}

De esta manera esta en pantalla pero no se ve, un lector de paginas si lo leera y los buscadores tambien.

Escoffie · #15 (**permalink**) 24/01/2006, 17:54

Excelente idea RoQ!
Gracias. Probaré de esa forma.
¿Sabes si es bueno o malo usar esta técnica en cuestión de posicionamiento?

Salu2

RoQ · #16 (**permalink**) 25/01/2006, 07:53

Hasta donde se es buena y valida, por lo que he leido Google piensa ajustar su buscador para no indexar los elementos con display:none lo cual es una tonteria porque hay muchas mas formas de ocultar cosas.

mateamargo · #17 (**permalink**) 25/01/2006, 09:24

En este momento quizá no, pero a la larga te va a terminar perjudicando el posicionamiento...

Escoffie · #18 (**permalink**) 25/01/2006, 12:05

Jeje. Conclusión: mejor uso el truquito del padding. Muchas gracias por sus respuestas

c32 · #19 (**permalink**) 27/01/2006, 08:28

h1 {
text-indent: -9999px;
margin: 0;
padding: 0;
border: 0;
}

h1 a:link, h1 a:visited {
display: block;
width: 700px;
height: 50px;
background: #cc9 url(/i04/logohed.gif) top left no-repeat;
margin: 0 0 0 12px;
padding: 0;
border: 0;
}

h1 a:hover {
background: #cca url(/i04/logohed.gif) top left no-repeat;
}

El mismo truco pero estados y el truco es con -9999px asi lo usan los creadores de este metodo como zeldman.com, shea de mezzoblue.com etc.