¿Es posible tener enlaces de anclaje sin texto dentro que tenga una imagen de fondo y dimensiones fijas y que aún sean buenos para SEO?Enlace de anclaje XHTML con imagen de fondo y sin texto
Ejemplo CSS:
a{display:block;width:50px;height:20px;background-image:url('images/background.jpg');background-repeat:no-repeat;background-position:0 0;}
a:hover img{background-position:0 -20px;}
Ejemplo HTML:
<a href="#"></a>
Si la imagen tiene texto o simplemente desea agregar su descripción, una cosa que puede hacer para ayudar a SEO y accesibilidad es darle al ancla un título y contenido con un texto de sangría grande negativo, como agregar esto a su a CSS:
display:block;
text-indent:-9999em;
... con el código HTML siguiente:
<a href="#" title="IMAGE TEXT">IMAGE TEXT</a>
Eso es algo que podría hacer gracias, sin embargo, nunca fui fan de hacer este tipo de ocultamiento de texto. ¡Gracias de nuevo! – Francisc
Si el texto está en la imagen de fondo pero no se esconde, lo está proporcionando a los lectores de pantalla que de otra manera no lo verían sin afectar su diseño. – mVChr
Sí, conozco bien este método, simplemente se me olvidó. Simplemente no me gusta demasiado, pero podría ser la mejor manera de hacerlo ahora. – Francisc
El motor de búsqueda no puede leer, así que ¿cómo podría ser bueno para el SEO? Más importante aún, ¿por qué quieres hacer esto, qué estás tratando de hacer?
Quiero usar sprites, siendo este el objetivo principal. Muy buen punto sobre motores que no pueden leer el contenido, pensé que seguirían el enlace y leerían el contenido de la página, no pensaron en cómo lo pones. ¡Gracias! – Francisc
Después de leer tus otros comentarios, solo un pensamiento rápido. Podrías quizás poner tu imagen de fondo/sprite en el enlace, como un img dentro de la a, y luego compensar la imagen dentro de la etiqueta a usando CSS en vuelo estacionario. (No he pensado en esto, pero podría ser algo para mirar si quieres tomar este camino).Solo estoy usando sprites para botones/enlaces cuando el sitio no se puede buscar personalmente. – plebksig
uso alt y el título atributo, pero que no tiene contenido dentro de las etiquetas es pointless.I pensar que hay una seria ¡arriesgue que sea penalizado en los resultados de búsqueda!
De nuevo, ¿por qué estás intentando esto. ¿Estás haciendo botones que están vinculando a otra página o que ejecuta una función javascript?
Básicamente son enlaces con imágenes, solo quería que las imágenes fueran sprites debido a un problema con el ancho de banda del cliente y las grandes cantidades de dichos enlaces. Normalmente pongo imágenes dentro de los enlaces y dejo que JavaScript cambie las imágenes. – Francisc
Además, son botones regulares, pero el texto está en la imagen y quiero tener sprites en los que el control deslizante cambie la posición de fondo. – Francisc
Inspirado por el comentario de neXib en otra respuesta.
HTML:
<a href="/home" title="Homepage" class="home">
<div><img src="/images/sprite.png" alt="Home" /></div>
</a>
CSS:
a {
display: block;
}
.home div {
width: 84px;
height: 27px;
overflow: hidden;
position: relative;
}
.home div img {
position: absolute;
top: -65px;
left: -20px;
}
En tanto que el div tiene 'overflow: hidden' y dimensiones fijas de la imagen en el interior se puede colocar dentro de mostrar sólo la parte de la sprite que quieras.
SEO también me preocupaba y creo que esta solución funcionará bien.
El único problema con esto es que si las imágenes están apagadas o no se pueden encontrar, entonces el texto alternativo se ocultará debido a la posición. Pero sigue siendo mejor que una etiqueta de ancla vacía y usa el posicionamiento de la imagen de fondo CSS. – benjovanic
¿No solucionó esto el problema?
<a href="#"> </a>
Bueno, esta es una pregunta un poco vieja, pero solo quiero opinar sobre esto!
Mi enfoque inicial era incorrecto, ningún texto no tiene sentido, tan malo para la accesibilidad y los motores de búsqueda. Agregar ' ' no ayuda, solo anuncia algunos caracteres adicionales. – Francisc
Si es un enlace, hace algo cuando hace clic en él. Si hace algo, el usuario necesita saber qué hace. Por lo tanto, necesita contenido. Una imagen de ** fondo ** no es contenido. Use un '![]()
' con un atributo 'alt' y deje de obsesionarse con las micro-optimizaciones contra los algoritmos secretos. –
Quentin
Tengo razones para pedir eso, gracias por tu comentario. – Francisc