Título da imagem vs. Texto alternativo: Qual é melhor?

Mesmo com as novas tendências de otimização de mecanismos de busca, a afirmação de que uma imagem vale mais que um milhão de palavras ainda se mantém. Uma única imagem de alta qualidade pode potencialmente dar vida ao conteúdo de um site. Além disso, um título img HTML bem escrito é uma maneira segura de melhorar a experiência do usuário.

Mas se você pensou que as imagens são sobre combinar conteúdo e imagens, você terá uma surpresa. Você pode usar imagens para atrair não apenas os visitantes da web, mas também os mecanismos de pesquisa. Mas para liberar todo o poder que uma imagem apresenta, você deve espiar um pouco sob o capô e entender o código HTML que exibe as imagens em seu site.

Depois de revisar os componentes de uma tag de imagem, você pode seguir em frente para otimizar aqueles que afetarão suas classificações nos mecanismos de pesquisa. Normalmente, os itens a serem segmentados são img src title e HTML img alt title. Você sabe o papel que esses dois desempenham em seu site? A resposta será o tema deste artigo.

Entendendo o título da imagem e o texto alternativo da imagem

A maneira mais fácil de saber a diferença entre um título e um texto alternativo é observar uma tag de imagem HTML. Digamos que seu site seja uma loja on-line que vende móveis, uma tag de amostra sobre uma imagem de cadeira de balanço pode ter a seguinte aparência:

img src=”cadeira de balanço.jpg” alt=”cadeira de balanço marrom à venda” title=”cadeira de balanço marrom”

No web design, os itens com sinal de igual recebem os atributos de nome. Observe que o exemplo acima é apenas uma ilustração. Em aplicações do mundo real, os atributos são muito mais e podem incluir uma classe, um id, altura, largura, etc.

A partir da tag, identificar o texto alternativo e o título é simples. Você pode notar que o atributo alt é mais informativo em comparação com a tag de imagem de título HTML. Uma olhada nos usos de ambos os atributos revela por que isso acontece.

Para que serve o título da imagem?

O título aparece quando um usuário passa o mouse sobre uma imagem em seu site. Assim, ele aparece somente após o carregamento das imagens. Quando um usuário vê o título, ele já visualizou a imagem. Como tal, não precisa ser muito descritivo. Por exemplo:

No entanto, os títulos são bastante importantes quando se trata de melhorar a experiência do usuário. Acredite ou não, os visitantes podem ter dificuldade em entender por que algumas imagens em seu site aparecem em determinadas partes do site. Um título vem a calhar para fornecer uma resposta.

Alguns navegadores não exibem o título depois de passar o mouse sobre uma imagem. Mas como você nunca sabe o que seus visitantes usarão para navegar em seu site, é melhor incluir um atributo de título em sua tag de imagem.

Para que serve o texto alternativo?

O texto alternativo serve a mais de um propósito. Você pode decompô-lo da seguinte forma:

• O texto alternativo é exibido sempre que uma imagem falha ao carregar. Quase todos os navegadores permitem descrições alternativas para representar imagens vazias. Pode ser devido a um nome de arquivo de imagem incorreto ou a um URL quebrado. Conexões de internet ruins também podem impedir o carregamento adequado de fotos. Nesse caso, o título alt da img aparece e explica ao visitante tudo sobre a imagem.
• O texto alternativo também é exibido quando os usuários desativam as imagens. Por mais que as imagens embelezam as páginas da web, alguns usuários preferem versões somente de texto. Assim, eles podem saber sobre imagens lendo o texto alternativo.
• Usuários cegos também se beneficiam de títulos img alt bem escritos. Os leitores de tela os usam para descrever uma imagem para visitantes que não podem vê-la. Geralmente, os textos alternativos ajudam a aumentar a acessibilidade do seu site. A importância da acessibilidade máxima é tão grande que o W3C defende textos alternativos. Uma linha de suas diretrizes diz: “Ao usar o elemento img, especifique uma alternativa de texto curto com o atributo alt.”
• Por fim, os mecanismos de pesquisa usam textos alternativos para entender melhor sobre o que é uma imagem. Assim, os textos alternativos são rastreáveis, assim como outros conteúdos em seu site. A imagem abaixo mostra um exemplo de texto alternativo:

(Crédito da imagem: MDN-Mozilla)

O que é mais importante: título da imagem ou texto alternativo?

É seguro rotular o atributo alt como mais importante depois de examinar as listas de usos de títulos e textos alternativos. No entanto, seria um erro pensar que os títulos são inúteis. Na verdade, qualquer item pode ser significativo dependendo de seus objetivos.

Se sua principal preocupação é melhorar a experiência do usuário, os títulos seriam sua principal área de foco. Conforme mencionado, você pode fornecer detalhes adicionais sobre uma imagem usando títulos. Quando um usuário passar o mouse sobre ele, a descrição deve aparecer.

Mas por que os mecanismos de busca não prestam muita atenção aos títulos das imagens?

Bem, a resposta tem muito a ver com o desenvolvimento dos motores de busca. Os desenvolvedores escreveram a maior parte do código-base do Google em 1999. Também houve adições significativas no ano seguinte. No entanto, eles nunca consideraram elementos HTML impopulares e desconhecidos. Como os web designers não usavam títulos com frequência, não havia razão para fornecê-los. Atualizações no código principal nunca tornaram a tag de imagem de título HTML tão importante quanto outros atributos.

Se você está pensando em SEO, seu foco deve ser o texto alternativo. Lembre-se de que o Google trata as informações dentro do atributo alt como conteúdo normal de uma página da web. Assim, ele o indexa. Além disso, os mecanismos de pesquisa podem ter problemas para rastrear uma imagem. Os textos alternativos apresentam uma excelente maneira de saber do que se trata uma imagem.

Além disso, os textos alternativos levam a acessibilidade do site a um nível totalmente novo. Apesar de técnicas como carregamento lento, é quase impossível garantir que todas as imagens do seu site sejam carregadas 100% do tempo. Um visitante pode desligar as imagens ou ter uma conexão tão lenta que as imagens nunca carregam. Armado com um texto alternativo, você pode ter certeza de que um usuário saberá sobre o que é uma imagem, quer ela seja carregada ou não.

Conclusivamente, a importância do texto alternativo supera de longe os atributos do título. Seus usos são relativamente numerosos e seu impacto no ranking de um site é notável. Embora seja importante otimizar tanto o título quanto o texto alternativo, é bom colocar mais peso nas informações do atributo alt.

Otimizando o Alt Text para SEO

O SEO continua sendo um dos meios mais seguros para direcionar o tráfego de alta qualidade organicamente. Embora existam várias maneiras de otimizar um site, aperfeiçoar o texto alternativo é ideal para configurar as imagens do seu site para maior tráfego. Felizmente, o processo é simples. Algumas das práticas a serem consideradas são:

Teste o SEO e o desempenho do seu site em 60 segundos!

Um bom design do site é fundamental para o engajamento e as conversões do visitante, mas um site lento ou erros de desempenho podem fazer com que até mesmo o site mais bem projetado tenha um desempenho inferior. Diib é uma das melhores ferramentas de monitoramento de desempenho de sites e SEO do mundo. A Diib usa o poder do big data para ajudá-lo a aumentar de forma rápida e fácil seu tráfego e classificações. Como visto em Empreendedor!

• Ferramenta de SEO automatizada fácil de usar
• Monitoramento de palavras-chave e backlinks + ideias
• Garante velocidade, segurança, + rastreamento de Core Vitals

• Sugere de forma inteligente ideias para melhorar o SEO
• Mais de 250.000 mil membros globais
• Benchmarking integrado e análise de concorrentes

Por exemplo “www.diib.com”

Inscreva-se gratuitamente

Usado por mais de 250 mil empresas e organizações:

• 
• 
• 
• 

Sincroniza com

Escreva para humanos

Quando se trata de escrever textos alternativos, a regra geral é: “escreva como se estivesse escrevendo para uma pessoa cega”. Considerando as ocasiões em que o texto alternativo é exibido, observar a regra o tempo todo não faz mal. Como mencionado, as informações contidas no título img alt aparecem quando as imagens não podem ser exibidas. Assim, você quer que ele conte tudo sobre a imagem oculta.

Como tal, escreva uma declaração que um humano possa ler e entender. Mais importante, componha uma frase descritiva. Uma pessoa cega pode estar navegando em seu site, e o que você digitou seria a única coisa a seguir. A imagem abaixo mostra um bom e um mau exemplo de texto alternativo para a mesma imagem:

(Crédito da imagem: Web Hosting Hub)

Escreva para motores de busca

Um texto alternativo não fornece apenas uma descrição da imagem aos usuários, mas também aos mecanismos de pesquisa. Assim, inclua uma palavra-chave nele. Como outros conteúdos, certifique-se de observar que ele contém uma palavra-chave que rima com o fluxo geral da página da Web em que a imagem está.

Na mesma nota, evite práticas ruins de SEO, como preenchimento de palavras-chave. Os mecanismos de pesquisa sinalizarão seu conteúdo como spam, o que mantém sua classificação baixa. É melhor escrever um texto alternativo mal do que enchê-lo com palavras-chave. Como verificação, certifique-se de não usar a palavra-chave em mais de 70% de suas imagens.

Mantenha breve

O texto alternativo descreve uma imagem e pode ser tentador colocar muitas palavras nas aspas do atributo alt. Mas evite fazê-lo. Os motores de busca não irão puni-lo por isso, mas o interesse deles está nas primeiras dezesseis palavras da descrição alternativa. Um texto alternativo de 125 caracteres deve descrever adequadamente uma imagem sem comprometer a experiência do usuário.

No entanto, se você achar que uma imagem requer uma descrição longa, é aconselhável usar o atributo “longdesc”. HTML4 e seus sucessores permitem este atributo na tag de imagem.

Exemplos de texto alternativo

Quando você está apenas começando com SEO, pode ser um pouco difícil entender a diferença entre um texto alternativo bom e um texto alternativo mal escrito. Assim, olhar para exemplos vem a calhar. Para fins de ilustração, imagine uma imagem de um carro vermelho em alta velocidade em seu site.

Sua tag de imagem pode ser algo como:

img src=”speeding-car.jpg” alt=”carro vermelho” title=”carro”

Nesse caso, o texto alternativo não é o ideal. Ele fornece muito pouca informação sobre a imagem. Uma versão melhor pode aparecer como:

img src=” speeding-car.jpg” alt=”carro vermelho em alta velocidade em uma rodovia” title=”carro”

Se você souber o nome da rodovia, não há mal nenhum em mencioná-lo no texto alternativo. A todo custo, evite comprometer suas palavras-chave ou o preenchimento de palavras-chave. Por exemplo, se a frase-chave da sua página da web for “carro vermelho”, evite uma descrição como:

img src=”speeding-car.jpg” alt=”Este é um carro vermelho. O carro vermelho está se movendo muito rápido e é um carro vermelho tão bonito” title=”carro”

Embora a descrição acima se concentre apenas na imagem, o preenchimento de palavras-chave a mancha. Os motores de busca vão desaprovar essas frases com spam. A segunda frase não fornece informações úteis sobre a imagem para o usuário. Assim, a coisa astuta a fazer é excluí-lo.

Como adicionar um texto alternativo

O procedimento de incluir um texto alternativo na tag de imagem depende do que você usou para criar um site. Se você escreveu o código físico do site, é melhor adicionar o atributo alternativo manualmente. Por exemplo:

No entanto, o desenvolvimento web de hoje dificilmente envolve qualquer código rígido. As chances são de que você tenha usado um sistema de gerenciamento de conteúdo (CMS) ou um construtor de sites. Certifique-se de descobrir qual processo sua ferramenta de web design usa ao adicionar todos os textos. Normalmente, a metodologia apresenta duas ou três etapas.

No CMS mais popular do mundo, o WordPress, adicionar um título HTML img alt é um passeio no parque. Depois de fazer login na sua conta, localize a imagem em questão e clique no botão “Editar”. Um campo de entrada aparece pronto para receber os dados do atributo alternativo.

Você pode incluir textos alternativos na biblioteca de mídia do WordPress. Depois de selecionar uma imagem, localize o campo de entrada de descrição alternativa exibido abaixo dos detalhes do anexo da imagem. Por exemplo:

(Crédito da imagem: WPBeginner)

Quando deixar o atributo Alt vazio

Dada a parte significativa que os atributos alt desempenham no SEO, você pode achar difícil acreditar que às vezes é uma boa ideia deixá-los vazios. Imagine uma imagem colocada em um site apenas para fins posicionais. A imagem não rima com o conteúdo nem agrega valor a ele. Um web designer pode usar essas imagens com o único propósito de decorar uma página.

Essas imagens somente de design podem ter um atributo alternativo nulo. Descrevê-los seria imprudente, pois não agregam valor ao conteúdo disponível. Os leitores de tela pularão as imagens, o que está em ordem, pois não ajudam o usuário a entender melhor a página.

Também é uma boa prática excluir o texto alternativo para imagens que contenham palavras. Todas as informações estão na imagem. Uma descrição das palavras seria, portanto, irrelevante.

Otimizando o título

Como o título não afeta o ranking de busca, não há muito o que fazer a respeito. Na maioria dos casos, é mais curto e menos descritivo que o texto alternativo. Em vez de fornecer mais informações sobre uma imagem, um título lhe dá um nome.

No entanto, o W3C defende abertamente a inclusão de um título em uma tag de imagem. Seu código HTML pode ser inválido para W3C se você não nomear suas fotos.

Ao escrever o título, componha um texto que não seja apenas curto, mas também cativante. Dito isto, títulos de uma única palavra são um não-não. Uma frase que descreva uma imagem e consista em não mais de dez palavras deve ser suficiente. Por exemplo:

Ao contrário da tag alt, que você pode deixar de fora às vezes, não há ocorrências especiais que justifiquem a exclusão dos títulos das imagens. Imagens sem título servem apenas para comprometer a experiência do usuário. Consequentemente, é do interesse de qualquer especialista em SEO não renderizar uma tag de imagem de título HTML nula.

Esperamos que você tenha achado este artigo útil.

Se você quiser saber mais sobre a saúde do seu site, obter recomendações e alertas pessoais, escaneie seu site pela Diib. Leva apenas 60 segundos.

Digite seu site

Por exemplo “www.diib.com”

Inscreva-se gratuitamente

Eu não me canso de DIIB!! Melhor ferramenta e estou muito grato por encontrá-lo. Eu absolutamente amo!! Dedos cruzados, você não aumenta seus preços porque isso é tão perfeito.

Katarina Gage
Diretor de Operações em ahoymatey.com.au

Outras considerações de imagem

Indubitavelmente, há mais nas imagens do que textos alternativos e títulos. Otimizar o primeiro e aperfeiçoar o segundo é apenas parte da equação. Para explorar totalmente o impacto das imagens no SEO, considere as seguintes práticas recomendadas de imagens da Web:

Mantenha os dados de texto vitais fora das imagens

É melhor escrever palavras do que pintá-las em uma imagem. Lembre-se, os mecanismos de pesquisa não rastreiam uma imagem em profundidade e não podem acessar palavras em uma imagem. A menos que o HTML falhe em produzir dados de texto da maneira que você deseja, por exemplo, ao escrever equações químicas complexas, evite imagens cheias de palavras.

No entanto, não há mal nenhum em usar imagens para exibir gráficos. HTML pode fornecer a funcionalidade, mas as imagens são uma solução superior.

Cuidado com o Contexto

A imagem exibida deve combinar com as informações fornecidas por uma seção. Seria uma má ideia incluir uma imagem de carro em uma página que discute roupas para atividades ao ar livre. Ao mesmo tempo, deixe suas imagens o mais originais possível. Os motores de busca valorizam as imagens originais, pois valorizam o conteúdo autêntico.

Escreva um bom nome de arquivo de imagem

Os nomes dos arquivos aparecem no atributo de título img src da tag de imagem. Os mecanismos de pesquisa o usam para saber mais sobre as imagens do seu site.

Por padrão, as imagens têm nomes de arquivos alfanuméricos, como:

A00002.jpg

Certifique-se de alterar os nomes para que reflitam o conteúdo da imagem. Enquanto isso, lembre-se de hifenizar nomes de arquivos que excedam uma palavra. Um nome como red-car-on-highyway.jpg seria difícil para os motores de busca lerem se os hífens estivessem faltando. No entanto, não altere o formato da imagem, ou seja, letras após o ponto. Os navegadores podem ficar confusos se um formato for diferente daquele fornecido pelo nome do arquivo.

Deixe suas imagens criarem a diferença de SEO

Quando se trata de SEO, não há argumento de que o conteúdo é rei. Mas as imagens fazem parte do conteúdo do seu site tanto quanto as palavras. Ao aprender a arte de aperfeiçoar o título HTML img e otimizar o título HTML img alt, você pode começar a usar imagens para aumentar a classificação do seu site.

Diib: Otimize seus títulos de imagem hoje!

Se você ficar preso ao uso de imagens para SEO, lembre-se de conferir as centenas de ferramentas dedicadas à otimização de imagens. Você também pode contratar um especialista em SEO para ajudar com seu site enquanto se concentra em seus negócios. Mas antes que você pense tão longe, pegue o primeiro e comece a usar imagens para aumentar o tráfego por conta própria. Em seguida, faça parceria com a Diib Digital para tirar o máximo proveito de seus títulos de imagem. Nosso Painel de Usuário lhe dará alertas e objetivos projetados para otimizar, entre outras coisas, seus títulos de imagem.

Aqui estão algumas das características que nos diferenciam da multidão:

• Objetivos personalizados projetados para melhorar o desempenho do site
• Alertas que informam sobre sua Autoridade de Domínio e outros problemas técnicos de SEO
• Páginas quebradas onde você tem backlinks (verificador 404)
• Ferramentas de monitoramento e rastreamento de palavras-chave, backlinks e indexação
• Experiência do usuário e otimização de velocidade móvel
• Otimização do título da imagem
• Desempenho de postagem específico da plataforma

Clique aqui para fazer uma varredura gratuita ou simplesmente ligue para 800-303-3510 para falar com um de nossos especialistas em crescimento.