¿Cómo obtengo imágenes que contienen texto para que los motores de búsqueda las indexen?


20

Estoy construyendo un pequeño sitio web de cartera para una amiga, y al estar en publicidad y todo, odia las fuentes estándar y quiere que todo esté escrito en una fuente personalizada.

Como la incorporación de fuentes CSS no es realmente una opción por el momento, todos los textos (afortunadamente, no hay muchos) se colocarán como imágenes.

¿Cómo podría seguir indexando el contenido de las imágenes? Para textos pequeños (enlaces, menú, etc.), pongo el texto en el atributo alt, pero por algo más largo, no creo que esa sea la solución. Que puedo hacer ? ¿Poner el texto en un div oculto al lado de la imagen?


77
¿Por qué las fuentes web no son una opción? ¿Es este un portafolio profesional? Si es así, desembolse los $ 50 y obtenga un buen conjunto de fuentes web integrables. Diablos, podría dividir el costo con ella y obtener una licencia de sitio ilimitada que podrá reutilizar en sitios futuros. También hay fuentes web gratuitas que son bastante agradables. Es mucho mejor que usar imágenes para el texto del cuerpo.
Lèse majesté

+1 @ Lèse Realmente, ese es el único camino a seguir.
Virtuosi Media

Bueno, no es una opción porque no es compatible con los principales navegadores, ¿verdad?
Wookai

1
Sí lo es, todo el camino de regreso a IE5.5 ... lea mi respuesta a continuación :)
Oscar Godson

Wow, qué desastre, este es un buen ejemplo de por qué los profesionales del software nunca se volverán obsoletos ... alguien tiene que evitar que las personas de negocios cometan errores trágicos.
Mark Rogers

Respuestas:


17

Incrustado las fuentes!

No, pero en realidad, las fuentes incorporables funcionan en todos los navegadores actuales (FF, Chrome, Safari, Opera) e IE5.5 + (sí, ha estado funcionando en IE desde los años 90).

Obtenga su TTF, cárguelo aquí: http://www.kirsle.net/wizards/ttf2eot.cgi

Le devolverá el código y los 2 archivos (un TTF y luego un EOT [fuente web M $]). Copiar, pegar, cargar, listo. ¡Gana, gana!

Y por favor, por favor, no uses imágenes :)

Sin embargo, si lo hace, escriba su marcado como si NO estuviera usando imágenes y luego agregue imágenes de fondo a todos los elementos y use text-indent: -9999px para ocultar el texto. Pero por favor, solo use fuentes incrustables. Además, si su cliente / amigo es fotógrafo, probablemente (no debería) usar un navegador antiguo (es decir, REALMENTE antiguo, como IE4 ...)


1
¡Gracias, realmente pensé que la incrustación de fuentes aún no era compatible! ¡Voy a probar tu sitio web!
Wookai

¡Cosa segura! Espero que ayude: D
Oscar Godson

Debe tenerse en cuenta que no puede simplemente ir y usar CUALQUIER fuente debido a problemas de derechos de autor: ¡consulte primero los términos de la licencia!
DisgruntledGoat

6

A menos que esté vendiendo sus propias fuentes en este sitio web, creo que ambos podrían trabajar más en la incorporación de CSS (sí, leí que esta no es una opción para ustedes ahora, pero insisto).

Si el caso es un trabajo gráfico más pesado sobre las fuentes (colores degradados, alineación retorcida, glosado, relieve, grabado ...), lo que hace que sea realmente imposible procesar las opciones CSS a medida que lo necesita, entonces recomendaría hacer lo siguiente:

use imágenes a través de CSS (quizás un sprite) y oculte el texto de anclaje con text-ident. html

<a href="work1.html" title="My first work" id="firstWork">My first work</a>

css

#firstWork {display: block; width: 200px; height: 150px; background-image:url('img/firstwork.jpg'); text-ident: -999em;}

Esta es una técnica. Sí, lo sé, Google puede castigar eso, pero ya sabes, nunca escuché sobre un solo sitio penalizado por usar esto.

Otra forma sería usar la etiqueta img dentro de la etiqueta de anclaje JUNTO con el texto, y luego usar CSS para ocultar el texto y corregir el posicionamiento img si es necesario. Esta última opción le brinda la posibilidad de agregar alt, title, longdesc a la imagen, aumentando la cantidad de información y la calidad que se indexa.

Incluso puede ir más allá con esta última opción e ir por una solución aún mejor y más fresca: usando la etiqueta de figura, disponible para HTML5, junto con figcaption. La idea es mantener el ancla-> figura-> img + figcaption.

Figcaption haría que el texto de anclaje fuera un rol y puede usar CSS para ocultarlo.

Bueno, 3 soluciones. Elegir uno. Yo iría con el último.


Muchas gracias por su respuesta ! Sus soluciones son realmente interesantes, especialmente la última.
Wookai

5

Yuck Realmente necesita superar sus problemas de fuente, ya que está eliminando la accesibilidad de su sitio y está causando todo tipo de problemas, como ralentizar el procesamiento de sus páginas, etc.

Dicho esto, puedes intentar agregar el longdescatributo a tus imágenes. Es difícil decir cuánto peso, si alguno, le dan los motores de búsqueda, pero probablemente sea más que cero.


Bueno, ¿no hay etiquetas alt aquí para accesibilidad? Sin embargo, gracias por el consejo de Longdesc, no estaba al tanto de su existencia.
Wookai

1
+1 Suena como una oportunidad para educar al cliente sobre cómo sus fuentes ideales no obtendrán resultados ideales ... aunque, desafortunadamente, algunos clientes son muy resistentes a aceptar cómo se supone que funcionan los documentos HTML.
danlefree

3

Si bien las fuentes web son bastante estándar en todos los principales navegadores ahora, descubrir las complejidades del navegador cruzado de los diferentes formatos de fuente puede ser complicado.

Google proporciona una buena API de fuentes web y un directorio de fuentes para ayudar aquí que pueden serle útiles.


2

El uso de imágenes incluso con etiquetas alt como su única forma de acceder a otras páginas del sitio no proporcionará mucha claridad a Google.

Su mejor opción es convencer a su amigo de que necesita enlaces de texto en algún lugar de la página o del sitio para resolver el problema. Por ejemplo, si puede configurar una página de Sitemap con todos los enlaces de texto o un menú desplegable en cada página con todos los enlaces de texto que deberían funcionar. No causará ningún daño tener eso además de las imágenes del enlace.

Sugeriría no usar enlaces ocultos ya que Google puede ver esto como algo nefasto y reducir el rango de su sitio o marcarlo como spam.


Definitivamente voy a establecer un mapa del sitio, pero esto no solucionará el problema de la indexación de contenido ...
Wookai

@wookai: Google indexará enlaces de imágenes que tal vez no sepa tanto sobre ellos. Por lo tanto, si tiene una página de Sitemap con texto completo en cada enlace, le dará a Google más información sobre las páginas de su sitio.
Ben Hoffman el

2

Como otros han sugerido, no tiene que usar las fuentes estándar "seguras para la web". Hay muchas técnicas de reemplazo de fuentes disponibles ahora que funcionarán de manera cruzada. Para obtener una buena descripción general, consulte: La Guía del diseñador web sobre métodos de reemplazo de fuentes . No tiene que renunciar al SEO o recurrir al SEO de imágenes. Puedes tener tu pastel y comértelo también.


2

Solía ​​hacer esto con imágenes de fondo y tramos anidados ocultos. Se ve muy bien para los navegadores de texto y los motores de búsqueda, y tiene fuentes personalizadas para navegadores más ricos.

HTML:

<h1><span>Welcome to Hell on Wheels</span></h1>

CSS:

h1 {
    background: url(welcome.gif) no-repeat;
    display: block;
    height: 68px;
    width: 415px;
}
h1 span { display: none; }

Salida:

Bienvenido a Hell on Wheels

Véalo en acción .

Realmente no hay límite para la cantidad de texto que puede reemplazar con este método (etiquetas apropiadas y estilos ocultos de manera inteligente), pero honestamente, la fuente personalizada que su cliente desea usar es mucho menos legible que todas las fuentes web comunes. Realmente deberías tratar de convencerla.


¿Has probado esto en navegadores de texto? Sé que muchos lectores de pantalla ignoran el display: nonetexto, y creo que los navegadores de solo texto también lo hacen.
Lèse majesté

Ambos lynxy linksmostrar el texto. Si es un problema con los lectores de pantalla, lo usaría h1 span { position: absolute; left: -9999px; }. Sin embargo, no tengo un lector de pantalla a mano para probar.
Annika Backstrom

Supongo que tiene razón, pero tenga en cuenta que esto no funcionará en la mayoría de los lectores de pantalla: css-discuss.incutio.com/wiki/Screenreader_Visibility Además, uso NVDA para realizar pruebas en Windows. Es un lector de pantalla FOSS si quieres echarle un vistazo.
Lèse majesté

1

sFIR podría funcionar para este propósito, pero usarlo requerirá muchos recursos del lado del cliente y puede ser complicado si necesita incrustar enlaces en el texto.


1
Aún así, es 100% mejor que tener imágenes como texto del cuerpo. Esa es probablemente una de las cosas menos profesionales que puede hacer en un sitio web: no resaltar, copiar y pegar, no buscar, cambiar el tamaño ...
Lèse majesté

1
  1. Solo usa webfonts . Prácticamente cualquier navegador los mostrará correctamente (si los coloca en formatos alternativos). Simplemente guárdelos como archivos normales (que son). Aquí hay un muy buen tutorial . Una ventaja más: no necesitas pensar cómo engañar a google

  2. sIFR , Cufón , FLIR u otros sprites de imágenes: ese es realmente el viejo cangrejo de toro inventado por razones desconocidas;) no lo uses.

  3. Una gran cantidad de texto escrito en un par de imágenes es:

    • largo tiempo de carga
    • anti-seo (por supuesto, puede usar el encubrimiento y servir contenido diferente al robot de Google y al usuario, pero es solo más trabajo y pruebas y también es arriesgado [los propietarios de sitios rivales pueden decirle que busque en google:])

1

¡Intenta usar la biblioteca typeface.js ! Puede usar cualquier fuente TrueType u OpenType personalizada con solo incluir la biblioteca en la parte superior de su página y otorgar a sus elementos con fuentes especiales una clase especial. Es gratis, de código abierto, multiplataforma, y ​​los motores de búsqueda también verán su texto. No se necesitan imágenes; la biblioteca maneja todo eso y simplemente lo diseñas como una página web típica.


1
Brillante, pero altamente ilegal en la mayoría de los casos. = P Hay muy pocas fuentes comerciales que sean legales para incrustar directamente en páginas web, incluso si compró una licencia para ello. Supongo que parte de la razón por la cual las fundiciones de tipos finalmente se conceden a las fuentes web es para que las fuentes que se están incrustando no sean (fácilmente) utilizables para otros fines. Pero si carga una fuente OTF o TTF, cualquiera que visite su sitio recibirá una copia con la que ahora puede hacer lo que quiera.
Lèse majesté

1

Muchas opciones geniales aquí para obtener respuestas. Parece que Font Squirrel (http://www.fontsquirrel.com/fontface/generator) merece una mención. Y sí, las API de fuentes de Google también son geniales.

En cuanto a la sustitución de imágenes, personalmente recomendaría un intervalo en un elemento, con la imagen como fondo en el elemento primario del intervalo. Pero en lugar de mostrar: ninguno en el intervalo, posición: absoluto fuera de la pantalla. De esa forma, los lectores de pantalla aún obtienen ese contenido.

Me parece recordar que me salí de la pantalla ganando la sangría, pero tal vez me he puesto los pantalones tontos.

Pero doble también, sí, incrusta esas fuentes.


Ah, y aquí está mi voto contra Sifr y Cufon.
folktrash

1

Utilice uno de los kits Font-Face de Font Squirrel . El kit proporciona 4 formatos de fuente diferentes y el CSS correcto requerido para usarlos. ¡Funciona en todos los navegadores modernos y también en versiones heredadas de IE!


0

Construye el sitio con imágenes. Luego, en unos meses de rocío, cuando regresa quejándose de que los motores no la encontraron, reconstruye el sitio con texto y cobra otra tarifa.


3
Sin embargo, esto me parece un poco irresponsable ...
Jeff Atwood

Bien, ¿qué tal si creas un clon de su sitio web favorito usando imágenes para texto y modificando su hostsarchivo para que apunte al clon, y obligarla a usar ese sitio durante 2 semanas?
Lèse majesté

@Jeff bueno, estaba siendo un poco irónico ......
David Heffernan el
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.