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

20

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?

Wookai
fonte
7
Por que as fontes da web não são uma opção? Este é um portfólio profissional? Nesse caso, pague US $ 50 e obtenha um bom conjunto de fontes da web incorporáveis. Caramba, você pode dividir o custo com ela e obter uma licença de site ilimitada que poderá reutilizar em sites futuros. Também existem fontes da web gratuitas que são bastante legais. É muito melhor do que usar imagens para o corpo do texto.
Lèse majesté 19/11/10
+1 @ Lèse Realmente, esse é o único caminho a percorrer.
Virtuosi Media
Bem, não é uma opção porque não é suportada pelos principais navegadores, é?
Wookai
11
Sim, é, todo o caminho de volta para IE5.5 ... leia minha resposta abaixo :)
Oscar Godson
Uau, que desastre, este é um bom exemplo de por que os profissionais de software nunca se tornarão obsoletos ... alguém precisa impedir os empresários de cometer erros trágicos.
Mark Rogers

Respostas:

17

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

Oscar Godson
fonte
11
Obrigado, eu realmente pensei que a incorporação de fontes ainda não era suportada! Vou tentar o seu site!
Wookai
Coisa certa! Espero que ajude: D
Oscar Godson
Note-se que você não pode simplesmente usar QUALQUER fonte devido a problemas de direitos autorais - verifique primeiro os termos da licença!
usar o seguinte
6

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.

Dave
fonte
Muito obrigado pela sua resposta ! Suas soluções são realmente interessantes, especialmente a última.
Wookai
5

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.

John Conde
fonte
Bem, as tags alt não estão aqui para acessibilidade? Obrigado pela dica longdesc, porém, eu não estava ciente de sua existência.
Wookai
11
+1 Parece uma oportunidade de educar o cliente sobre como suas fontes ideais não obterão resultados ideais ... embora, infelizmente, alguns clientes sejam altamente resistentes a aceitar como os documentos HTML "devem" funcionar.
Danlefree 19/11/2010
3

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.

Phil Mander
fonte
2

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.

Ben Hoffman
fonte
Definitivamente vou definir um mapa do site, mas isso não vai resolver o problema de indexação de conteúdo ...
Wookai
@ wookai - o Google indexará links de imagens que talvez não saibam muito sobre eles. Portanto, se você tiver uma página de Sitemap com texto completo em cada link, ele fornecerá ao Google mais informações sobre as páginas do seu site.
Ben Hoffman
2

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.

Virtuosi Media
fonte
2

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:

Bem-vindo ao inferno sobre rodas

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.

Annika Backstrom
fonte
Você já testou isso em navegadores de texto? Sei que muitos leitores de tela ignoram o display: nonetexto e acho que os navegadores somente de texto também.
Lèse majesté
Ambos lynxe linksexibir o texto. Se for um problema com os leitores de tela, eu usaria h1 span { position: absolute; left: -9999px; }. No entanto, não tenho um leitor de tela à mão para testar.
Annika Backstrom
Acho que você está certo, mas saiba que isso não funcionará na maioria dos leitores de tela: css-discuss.incutio.com/wiki/Screenreader_Visibility Além disso, uso o NVDA para testar no Windows. É um leitor de tela FOSS, se você quiser conferir.
Lèse majesté
1

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.

danlefree
fonte
11
Ainda assim, é 100% melhor do que ter imagens como texto no corpo. Isso é provavelmente uma das coisas menos profissionais que você pode fazer em um site - sem destaque, sem copiar e colar, sem pesquisa, sem redimensionamento ...
lesa majestade
1
  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:])
Alex Bolotov
fonte
1

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.

Ricket
fonte
11
Brilhante, mas altamente ilegal na maioria dos casos. = P Existem muito poucas fontes comerciais legais para serem incorporadas diretamente nas páginas da web, mesmo que você tenha adquirido uma licença. Suponho que parte da razão pela qual as fundições de tipo finalmente concedidas às fontes da Web seja para que as fontes incorporadas não sejam (facilmente) utilizáveis ​​para outros fins. Mas se você fizer o upload de uma fonte OTF ou TTF, qualquer pessoa que visitar seu site receberá uma cópia com a qual poderá fazer o que quiser.
Lèse majesté
1

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.

folclore
fonte
ah, e aqui está o meu voto contra o sifr e o cufon.
folktrash
1

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!

Lèse majesté
fonte
0

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!

David Heffernan
fonte
3
isso parece um pouco irresponsável para mim, embora ..
Jeff Atwood
OK, que tal criar um clone de seu site favorito usando imagens para texto e modificar seu hostsarquivo para apontar para o clone e forçá-la a usar esse site por 2 semanas?
Lèse majesté
@ Jeff bem, eu estava sendo um pouco tongue-in-cheek ......
David Heffernan