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

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?

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 ...)

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.

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.

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.

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.

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.

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:

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.

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. 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:])

¡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.

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.

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!

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.