Como faço para que imagens contendo texto sejam indexadas pelos mecanismos de pesquisa?

Estou construindo um site de portfólio pequeno para um amigo e, como publicitário e tudo, ele odeia as fontes padrão e quer tudo escrito em uma fonte personalizada.

Como a incorporação de fontes CSS não é realmente uma opção no momento, todos os textos (felizmente, não existem muitos) serão colocados como imagens.

Como ainda pude indexar o conteúdo das imagens? Para textos pequenos (links, menu, etc ...), coloquei o texto no atributo alt, mas por algo mais, não acho que essa seja a solução. O que eu posso fazer ? Coloque o texto em uma div oculta ao lado da imagem?

EMBUTIDO AS FONTES!

Não, mas realmente, as fontes incorporáveis ​​funcionam em todos os navegadores atuais (FF, Chrome, Safari, Opera) e IE5.5 + (sim, ele está trabalhando no IE desde os anos 90).

Faça o upload do seu TTF aqui: http://www.kirsle.net/wizards/ttf2eot.cgi

Ele fornecerá o código e 2 arquivos de volta (um TTF e depois um EOT [M $ web font]) de volta. Copie, cole, envie, pronto. Win win!

E por favor, por favor, não use imagens :)

No entanto, se fizer isso, escreva sua marcação como se não estivesse usando imagens e adicione imagens de plano de fundo a todos os elementos e use o recuo do texto: -9999px para ocultar o texto. Mas, por favor, basta usar fontes incorporáveis. Além disso, se você é cliente / amigo é um fotógrafo, ela provavelmente (não deveria) usando um navegador antigo (quero dizer, REALMENTE antigo, como o IE4 ...)

A menos que ela esteja vendendo suas próprias fontes neste site, acho que vocês dois poderiam trabalhar mais na incorporação de CSS (sim, li que isso não é uma opção para você agora, mas insisto).

Se o caso for um trabalho gráfico mais pesado sobre fontes (cores gradientes, alinhamento torcido, brilho, gravação em relevo, gravação ...), tornando realmente impossível renderizar as opções CSS conforme necessário, recomendamos o seguinte:

use imagens através de CSS (talvez um sprite) e oculte o texto âncora com o identificador de texto. 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;}

Essa é uma técnica. Sim, eu sei, o Google pode punir isso, mas você nunca ouviu falar de um único site penalizado por usar isso.

Outra maneira seria usar a tag img dentro da tag anchor ALONG com o texto e, em seguida, usar CSS para ocultar o texto e corrigir o posicionamento da img, se necessário. Esta última opção oferece a possibilidade de adicionar alt, título, longdesc à imagem, aumentando a quantidade e a qualidade das informações indexadas.

Você pode ir além com essa última opção e buscar uma solução ainda melhor e mais recente: usando a tag figure, disponível para HTML5, junto com a figcaption. A idéia é manter anchor-> figure-> img + figcaption.

O Figcaption criaria o papel de âncora e você pode usar CSS para ocultá-lo.

Bem, 3 soluções. Escolha um. Eu iria com o último.

Que nojo. Ela realmente precisa superar os problemas de fonte, pois está matando a acessibilidade do site e está causando todos os outros tipos de problemas, como diminuir a renderização de suas páginas, etc.

Dito isto, você pode tentar adicionar o longdescatributo às suas imagens. É difícil dizer quanto peso, se houver, os mecanismos de pesquisa atribuem a ele, mas provavelmente é mais do que zero.

Embora as fontes da Web sejam praticamente padrão em todos os principais navegadores agora, descobrir as complexidades entre navegadores dos diferentes formatos de fontes pode ser complicado.

O Google fornece uma boa API de API e diretório de fontes para ajudar aqui, que você pode achar útil.

Usar imagens mesmo com tags alt como sua única maneira de acessar outras páginas do site não fornecerá muita clareza ao Google.

Sua melhor aposta é convencer seu amigo de que você precisa de links de texto em algum lugar da página ou do site para resolver o problema. Por exemplo, se você pode configurar uma página de Sitemap com todos os links de texto ou uma lista suspensa em cada página com todos os links de texto que devem funcionar. Não causará nenhum dano além das imagens do link.

Sugiro não usar links ocultos, pois o Google pode ver isso como nefasto e reduzir a classificação do seu site ou marcá-lo como spam.

Como outros sugeriram, você não precisa usar as fontes "seguras para a Web" padrão. Existem muitas técnicas de substituição de fontes disponíveis agora que funcionarão de maneira entre navegadores. Para uma boa visão geral, confira: O Guia do Web Designer para métodos de substituição de fontes . Você não precisa desistir do SEO ou recorrer ao SEO de imagem. Você pode ter seu bolo e comê-lo também.

Eu costumava fazer isso com imagens de fundo e extensões aninhadas ocultas. É ótimo para navegadores de texto e mecanismos de pesquisa e possui fontes personalizadas para navegadores mais sofisticados.

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; }

Saída:

Veja em ação .

Não há realmente nenhum limite para a quantidade de texto que você pode substituir por esse método (tags apropriadas e estilos ocultos de maneiras inteligentes), mas honestamente a fonte personalizada que seu cliente deseja usar provavelmente é muito menos legível do que todas as fontes comuns da Web. Você realmente deveria tentar convencê-la.

O sFIR pode funcionar com essa finalidade, mas usá-lo consumirá muitos recursos do lado do cliente e poderá ser complicado se você precisar incorporar links no texto.

1. Basta usar webfonts . Praticamente qualquer navegador os exibirá corretamente (se você os colocar em formatos alternativos). Apenas hospede-os como arquivos regulares (o que são). Aqui está realmente um bom tutorial . Mais uma vantagem: você não precisa pensar em como enganar o google

2. sIFR , Cufón , FLIR ou outros sprites de imagem - esse é realmente o caranguejo de estilo antigo que foi inventado por razões desconhecidas;) não use isso.

3. Muito texto digitado em algumas imagens é:

   • longo tempo de carregamento
   • anti-seo (é claro que você pode usar camuflagem e exibir conteúdo diferente para o bot e o usuário do google, mas é apenas mais trabalho e teste e também é arriscado [os proprietários de sites rivais podem informar sobre o google:])

Tente usar a biblioteca typeface.js ! Você pode usar qualquer fonte TrueType ou OpenType personalizada, incluindo a biblioteca na parte superior da página e atribuindo uma classe especial aos elementos com fonte especial. É gratuito, de código aberto, multiplataforma e os mecanismos de pesquisa também verão seu texto. Nenhuma imagem é necessária; a biblioteca lida com tudo isso e você simplesmente a cria como uma página da Web típica.

Muitas ótimas opções aqui para respostas. Parece que o Font Squirrel (http://www.fontsquirrel.com/fontface/generator) merece uma menção. E sim, as APIs de fontes do Google também são ótimas.

Quanto à substituição da imagem, pessoalmente eu recomendaria uma extensão em um elemento, com a imagem como plano de fundo no pai da extensão. Mas, em vez de exibir: nenhum no intervalo, posição: absoluto fora da tela. Dessa forma, os leitores de tela ainda recebem esse conteúdo.

Parece que me lembro de sair da tela vencendo o travessão, mas talvez eu esteja com minhas calças bobas.

Mas duplique também - incorpore essas fontes.

Use um dos kits Font-Face da Font Squirrel . O kit fornece 4 formatos de fonte diferentes e o CSS correto necessário para usá-los. Funciona em todos os navegadores modernos e também nas versões herdadas do IE!

Crie o site com imagens. Depois, nos meses de orvalho, quando ela volta reclamando por não ter sido encontrada pelos motores, reconstrua o site com texto e cobra outra taxa!