Esconder texto de h1 sin ser penalizado por buscadores

hey_alan · #1 (**permalink**) 26/09/2010, 16:08

Buenas tardes, vengo con una pequeña duda.

Siempre uso este código cuando en el h1 pongo una imagen:

Código:

h1{background:url(title.gif) no-repeat; width:300px; height:130px; display:block; margin:0; padding:0; text-indent:-5000px;}

Pero por ahí leí que usar "text-indent" puede hacer que Google te penalice, porque a su parecer estás escondiento texto para generar palabras clave.

¿Qué tan cierto es esto? ¿Qué me recomiendan hacer en su lugar?

Gracias.

alexk · #2 (**permalink**) 26/09/2010, 16:20

deberias preguntar en el foro de SEO...
pero bueno mi corto conocimiento del tema, me hace pensar que los buscadores no se fijan mucho en el CSS sino que tu sitio sea relevante con las palabras clave y demas elementos SEO...
de cualquier modo siempre pienso que si tienes un sitio bueno sera por su contenido; las de veces que entro a un sitio por google y me salgo a los 2seg jaja chao y suerte!...

#3 (**permalink**) 27/09/2010, 09:47

umm... por que no pones transparente el color del texto

h1 { color: transparent; } no se si igual te penalisen pero puedes intentarlo, a mi me funciona muy bien

AlbertoMartinez · #4 (**permalink**) 28/09/2010, 01:57

Hola,

Hacer estas cosas va en contra de las directrices marcadas por Google: http://www.google.com/support/webmasters/bin/answer.py?answer=66353

Debido a que estás mostrando una cosa a los usuarios y otra diferente a Google, Google podría tomar en consideración de forma negativa. Pero la verdad es que hay muchas páginas que lo hacen y no son penalizadas.

Ahora, la elección es tuya.

lvfp · #5 (**permalink**) 28/09/2010, 02:09

Hola:

Lo que tienes que hacer es poner una imagen en la etiqueta h1, no de fondo, y en el atributo "alt" de esa imagen colocar ese texto que no quieres que se vea, el usuario no verá el texto y los spider de google leeran el atributo alt como si fuera el texto de h1.

Nada de textos del color del fondo, ni transparentes ni nada, eso si que puede penalizar.

kseso? · #6 (**permalink**) 28/09/2010, 09:55

El h1 nunca debería ser una imagen, y mucho menos, colocada vía css como background.

Dentro de las diversas técnicas que he visto utilizar, me quedo con aquella que posiciona un texto etiquetado como h1 bajo (en el eje z) una imagen (fuera del tag h1 la imagen) con ayuda de /position:absolute/ y /z-index/ para sobreponer la imagen sobre el texto.

Recordar que el contenido del atributo "alt" es un texto que se mostraría en caso de no cargar la imagen. Pero junto a ese, existe el "title" y el más desconocido "longdesc". Pero todos deberían ofrecer más una descripción (más o menos larga) de lo que se ve en la imagen, y no tanto de la finalidad de ella. Son más descriptivos que conceptuales. Pero los atributos no son aplicables a las imágenes de fondo vía css, sino a las colocadas envueltas en <img src="... />

#7 (**permalink**) 28/09/2010, 09:59

bueno si, creo que si la imagen que pondra es para reemplazar las fuentes ordinarias por una personalizada, seria mejor en este caso usar font-face

y si la imagen tendra un logotipo mas elaborado, pues ya se tendra que ver una alternativa

lvfp · #8 (**permalink**) 28/09/2010, 17:16

Bueno, Google no opina así... aunque lo haga. Ya sabéis, "haz o que digo no lo que hago"

http://googlewebmaster-es.blogspot.c...e-mi-logo.html

MeryDurCam · #9 (**permalink**) 04/01/2011, 11:52

keseso como hago lo que planteas?

luciio · #10 (**permalink**) 04/01/2011, 17:29

Cita:

Iniciado por MeryDurCam

keseso como hago lo que planteas?

Segun lo que entendi a kseso pones una imagen encima del h1 utilizando position absolute ( de esta manera la tapas ) a efectos practicos quedaria algo asi

<style>
#contenedor{
position:relative;
width:800px;
height:200px;
}

img.logo{
width:150px;
height:20px;
position:absolute;
top:30px;
left:200px;
z-index:2;
}

.texto{
width:150px;
height:20px;
position:absolute;
top:30px;
left:200px;
z-index:1;
}
</style>

<html>
<body>
<div id="contenedor">
<img src="imagenlogo.jpg" class="logo" />
<a href="#"><h1 class="texto">Texto de h1</h1></a>
</div>
</body>
</html>

El codigo anterior es solo para "referencia" (puede tener errores y no esta sujeto a escala, osea pueden no ajustar xD) y podemos ver que existe un "contenedor" y en el los 2 elemtos posicionados 1 encima de otro por position:absolute de esta forma los 2 son visibles pero la imagen esta encima del texto, si no llegara a cargar la imagen se ve el texto.

Slds !!