Diferença entre alt e título de img - qual usar - e impacto

10

Há anos que escrevo meu HTML para imagens como esta:

<img src="picture.jpg" alt="my picture" >

Recentemente, porém, fiz uma auditoria no meu site usando as ferramentas de SEO da Raven e ele relatou muitos erros com os quais fiquei realmente surpreso.

Quando examinei o relatório, 99% desses erros ocorreram devido à falta do texto do título da imagem.

Sei que o texto do título de uma imagem pode aparecer um pouco quando você passa o mouse sobre uma imagem, mas, além disso, qual é o objetivo e isso afeta o SEO?

Além disso, se você fosse implementá-lo, o que você colocaria lá? Você colocaria a mesma informação que está no altatributo? iealt="my picture" title="my picture"

sam
fonte
"Qual deles usar" - acho que não há dúvida sobre se você deve usar o altatributo - isso é obrigatório e suas páginas falharão na validação sem ele (a menos que talvez em alguns casos extremos com HTML5?).
precisa saber é o seguinte
11
O "Raven SEO" está relatando um "erro" definitivo ou um aviso / aviso?
precisa saber é o seguinte
@ W3D sua relatando um aviso / notícia
sam

Respostas:

12

A tag ALT é uma tag de acessibilidade que foi introduzida para pessoas com dificuldades de visão, mesmo através do Google, para determinar o que é uma imagem. Você nunca deve considerar colocar tags alt para fins de SEO antes de seus visitantes.

Muitas pessoas e até Matt Cutts, que trabalha no Google, falam sobre tags alt como se elas fossem especificamente projetadas para os Mecanismos de Pesquisa para informar aos robôs sobre o que é a imagem, isso simplesmente não é verdade.

No entanto, você pode informar o Google sobre o que é a imagem enquanto cuida do seu público, nunca apenas inserir palavras-chave na tag alt, ela diminui a experiência do usuário e é muito antinatural.

Um excelente exemplo disso é que muitas vezes dizem que alguém deseja classificar para a palavra-chave 'Bournemouth'; eles terão Bournemouth no título; no H1, a meta descrição e cria uma imagem com a tag alt 'Bournemouth'. Embora isso funcione para O SEO amortece a experiência do usuário e perde todo o sentido da tag alt. A tag alt é para pessoas com problemas de visão ou que desabilitam todas as imagens. Portanto, a tag ALT foi projetada para informar ao usuário o que é a imagem.

Um bom exemplo disso pode ser visto abaixo

<img src="i.jpg" alt="Bournemouth" />

vs

<img src="i.jpg" alt="Birdseye view of Bournemouth" />

O exemplo acima ainda inclui sua palavra-chave, enquanto explica ao Google e ao seu público sobre o que é a imagem.

E a tag Title?

A tag title foi projetada para fornecer mais informações quando você passa o mouse sobre um elemento, não é muito útil para IMG, porque se você pretende usar as mesmas informações para ALT e TITLE, pode usar um script para ler a tag alt e fazer com que você passe o mouse sobre JS usando JS. Eu recomendaria apenas a tag title se você fornecer mais informações do que a tag ALT, como uma descrição mais longa - não é necessário fornecer as informações exatas nos dois elementos, pois isso apenas incha o código.

A tag title é realmente útil para links, pois, ao passar o mouse, ela pode fornecer ao seu público mais informações sobre o link no qual eles estão prestes a clicar. Vale a pena ler mais sobre o título aqui .

Simon Hayter
fonte
11
"se nenhum título for encontrado, ele lerá a tag alt como passar o mouse" - O altatributo não é usado como "passar o mouse sobre" em nenhum navegador moderno. Somente o IE7 e versões anteriores mostraram o texto alternativo como uma dica de ferramenta pop-up (quando o titleatributo é omitido).
precisa saber é o seguinte
Desculpe, não foi isso que eu quis dizer. Quero dizer, para o texto fora, você recebe a tag alt. Para passar o mouse, basta usar um jquery para ler a tag alt e criar o título. Não há necessidade de escrever alt e title se forem iguais, apenas incham o seu código.
Simon Hayter
11
@ resposta editada pelo w3d;)
Simon Hayter
11
Mas, quanto ao título em termos de título de SEO, pouco oferece aos rankings, matt cutts fala um pouco sobre o título deste vídeo googlewebmastercentral.blogspot.co.uk/2007/12/…, mas mais se concentra na tag ALT. Pessoalmente, acredito que isso possa contribuir para a experiência do usuário, mas não de maneira significativa, como seria de esperar, milhões de sites importantes são classificados sem títulos nas imagens.
Simon Hayter
Apenas pensei que valia a pena esclarecer ... os atributos alte titlenunca deveriam ser "os mesmos", pois isso confundiria as pessoas que usam o alttexto para acessibilidade. A solução jQuery cria um evento de mouseover, não copia simplesmente o alttexto no titleatributo.
precisa saber é o seguinte
3

altfornece uma descrição alternativa da imagem. Este atributo é necessário para img.

titlefornece informações adicionais sobre a imagem. Este atributo é opcional para img.

Nunca dependa de informações no title. Se a informação é realmente importante, inclua-a em seu próprio elemento.

Esses dois atributos não devem ter o mesmo conteúdo.

unor
fonte
0

Sua confusão é normal e sim, cada tag (título, ALT) representa seu próprio potencial, o que ajuda o mecanismo de pesquisa e o usuário a saber do que se trata a imagem.

Algum tempo, o texto ALT não é suficiente para descrever a imagem; portanto, é melhor atribuir mais informações na medida do possível; use variações nas palavras de atribuição, o que é mais eficaz também do ponto de vista do SEO.

Rajesh Magar
fonte