A importância dos atributos alternativos – alt – e otimização de imagem

a person sitting in front of a laptop computer
dmendes40 Avatar

O que é o atributo alt?

O atributo alt é um atributo que pode ser incluído no elemento img e é o texto que é exibido em vez da imagem até que a imagem seja exibida, como quando a velocidade da linha de rede é lenta. Os leitores de tela leem o texto do atributo alternativo. O atributo alt alt significa alternativo em inglês e também é chamado de texto alternativo.

Ao colocar uma imagem diretamente na página, você pode usar <img> ou <picture> e especificar o atributo alt dentro da tag img.

<img src=”URL da imagem” alt=”Nome da imagem” largura=”○” altura=”○” />

<picture> pode especificar várias fontes de imagem correspondentes ao tamanho da tela preparada para a página responsiva.

<picture>
<source srcset=”Image URL pattern 1” media=”(min-width: 600px)”>
<img src=”Image URL pattern 2” alt=”MDN”>
</picture>

Valor intrínseco que pode ser fornecido pelos atributos alt

O atributo alt fornece os seguintes valores:

  • lido por um leitor de tela
  • Mostrar texto alternativo entre as imagens

lido por um leitor de tela

O texto especificado para a imagem com o atributo alt pode ser lido por um leitor de tela. Vamos escrever o atributo alt da imagem assumindo que pessoas com deficiência visual usam a web.

seo, webpage, back links

Mostrar texto alternativo entre as imagens

Se a imagem demorar para carregar, o texto especificado no atributo alt será exibido até que o carregamento seja concluído.

Os mecanismos de pesquisa também usam texto alternativo

Para o Google, usar texto no atributo alt tem os seguintes efeitos.

  • Efeito de texto âncora para links
  • Ajuda a entender o conteúdo
  • Maiores chances de aparecer na Pesquisa de imagens do Google

Efeito de texto âncora para links

Ao definir um link para uma imagem, o texto do atributo alt parece ser considerado o texto âncora. Mas use texto onde for apropriado. O excesso de links de imagens dificulta o uso da navegação.

O texto âncora é explicado em ” Efeito de SEO por texto âncora e design de backlink entre as páginas dentro do site “.

Além disso, algumas páginas da web usam imagens com fontes bonitas porque fontes adequadas para o design da página não podem ser usadas.

  • Texto é mais adequado para copiar e colar do que imagens (por exemplo, para uso em e-mails)
  • Difícil para os mecanismos de pesquisa entenderem seu conteúdo

Nesses casos, recomendamos o uso de fontes da web.

Ajuda a entender o conteúdo

Como não é possível determinar o conteúdo da imagem, parece que o atributo alt é usado para entender a imagem. Além do atributo alt, parece que o atributo title e o texto ao redor da imagem também são usados ​​como critérios de julgamento.

Maiores chances de aparecer na Pesquisa de imagens do Google

Não é necessário usar atributos alt para imagens que são necessários para o design do layout, mas escrever um texto de atributo alt para imagens importantes é um método de otimização eficaz para a Pesquisa de imagens do Google.

Pontos-chave da descrição do atributo alternativo e otimização de imagem

Pontos-chave da otimização do atributo alternativo

  • Mantenha o texto do atributo alternativo curto
  • Sempre inclua texto de atributo alternativo em links de imagem

Mantenha o texto do atributo alternativo curto

Não há limite específico para o número de caracteres no atributo alt.
Se você incluir texto no atributo alt, forneça uma breve descrição do que é a imagem em vez de uma frase longa.Sempre inclua texto de atributo alternativo em links de imagem

Como tem um efeito de texto âncora, defina o atributo alt para um texto que explique claramente sobre o que é a próxima página, como um link de texto.

Fundamentos da otimização de pesquisa de imagens

  • Usa formatos de imagem padrão
  • Permite a indexação de rastreamento do arquivo de imagem e da página que contém a imagem
  • Nomes de arquivos curtos e descritivos
  • Use Lazy-load nativo
  • Torne as imagens e páginas relevantes e contextuais
  • Otimização de texto em torno de imagens
  • Otimize o posicionamento da imagem
  • Use max-image-preview:large
  • Adicionar informações de licença

Usa formatos de imagem padrão

Use o formato abaixo que a maioria dos navegadores suporta como padrão.

  • JPEG
  • GIF
  • PNG
  • BMP
  • WebP

Permite a indexação de rastreamento do arquivo de imagem e da página que contém a imagem

Se você excluir ou ocultar a página na qual a imagem foi postada, não poderá pesquisar a imagem na pesquisa de imagens.Use nomes de arquivo concisos e descritivos

O nome do arquivo da imagem também é usado para entender o conteúdo da imagem. Vamos tornar o nome do arquivo conciso no alfabeto em vez do arquivo com o nome japonês.Use Lazy-load nativo

Para acelerar sua página, você pode usar o atributo loading=”lazy” em suas imagens para carregar lentamente imagens que não estão visíveis na tela.

<img src=”URL da imagem” alt=”Nome da imagem” loading=”lazy” width=”○” height=”○” />

É suportado pelo Chrome e alguns navegadores, e também suporta o bot do Google, por isso é essencial para SEO para Google e conveniente para usuários do Chrome. Além disso, como é um atributo padrão da Web, será suportado pela maioria dos navegadores no futuro. Você pode verificar a compatibilidade do navegador na página seguinte.

Carregamento lento via atributo para imagens e iframes Torne as imagens e páginas relevantes e contextuais

Forneça uma imagem da página, seu título, manchetes e outros conteúdos relacionados a ela.texto ao redor da imagem

Coloque o texto relevante perto da imagem e coloque a legenda ao lado da imagem.Posicionamento da imagem

Coloque imagens importantes no topo da página.visualização máxima da imagem: grande

Use max-image-preview-:large para usar visualizações de imagem de tamanho grande.Informações da licença

Adicione informações de licença às imagens . Dados estruturados ou metadados de fotos IPTC são métodos compatíveis para comunicar metadados de imagens ao Google.

Pontos avaliados pelo algoritmo de busca de imagens do Google

  • autoridade da página
  • conteúdo novo
  • onde a imagem é exibida
  • qualidade da imagem

De acordo com a postagem no blog do Google em 24 de setembro de 2018, eles melhoraram para avaliar os seguintes pontos. Parece que o algoritmo de busca de imagens não julga apenas imagens, mas utiliza de forma abrangente vários fatores relacionados a todo o site.autoridade da página

Por exemplo, se você pesquisar materiais de prateleiras de bricolage, os sites especializados em projetos de bricolage serão favorecidos.conteúdo novo

Será dada preferência a sites que foram atualizados recentemente.onde a imagem é exibida

Se a imagem a ser pesquisada estiver localizada no centro e no topo da página, a imagem terá prioridade no ranking. Se você estiver navegando para comprar um sapato específico, uma página de produto focada nesse sapato será preferida a uma página de categoria que mostre uma ampla variedade de estilos de calçados.qualidade da imagem

Use imagens de alta qualidade.

Coisas a evitar na otimização de imagem

Coisas a evitar com atributos alternativos

Omitir o atributo alt ・O texto do atributo alt está em branco

Não omita o atributo alt ou deixe o texto do atributo alt em branco para aumentar suas chances de ser listado na Pesquisa de imagens do Google.

Se você deixar o atributo alt em branco para todas as imagens em seu site, isso parece ter um impacto significativo no tráfego de pesquisa de imagens do Google.

Só porque o texto é muito longo não significa que seja um fator negativo no ranqueamento, mas vamos escrevê-lo com o propósito de transmitir o conteúdo da imagem corretamente aos visitantes e ao Google, atentando para o seu uso original que não o SEO. Por outro lado, se você inserir muitas palavras-chave, pode ser considerado spam.

Uma observação sobre otimização de pesquisa de imagens

Tenha cuidado ao incorporar fotos do Instagram

Mesmo se você usar o código de incorporação do Instagram para incorporar a imagem em sua página, parece que a própria imagem não será indexada devido ao uso da metatag noindex. O Google está rastreando e reconhecendo, e parece bom quando testado com a ferramenta de teste de compatibilidade com dispositivos móveis, mas parece mostrar noindex no conteúdo do iframe. A situação é a mesma de 2021/04/10.

Nomes de arquivo de imagem concisos são recomendados.A exibição de imagens indexadas importantes é especificada por CSS

As imagens especificadas como planos de fundo em CSS não são indexadas. As imagens especificadas por <img> ou <picture> são indexadas. (Parece indexar muito bem na Pesquisa Universal.)

https://www.youtube.com/embed/1r0bTfhR49g?start=1253&feature=oembed&enablejsapi=1&origin=https%3A%2F%2Fwww.allegro-inc.comAté o texto vira imagem

Exibir imagens e texto separadamente. Os mecanismos de pesquisa não podem ler texto em imagens.Não altere o URL da imagem

Defina um redirecionamento com 301 se quiser alterá-lo.

Perguntas frequentes sobre otimização de imagem

Perguntas frequentes sobre o atributo alt

É melhor incluir a palavra-chave no atributo alt?

Você não precisa otimizar para uma palavra-chave de destino específica, como faz com tags de título. Escreva uma breve descrição da imagem.

Perguntas frequentes sobre pesquisa de imagens

É possível exibir o URL da imagem sozinho nos resultados da pesquisa de imagens em vez do URL da página?

Na pesquisa de imagens, as páginas e imagens que são realmente usadas e exibidas em páginas da web são postadas como um conjunto. Não é possível exibir apenas a URL de um arquivo de imagem específico nos resultados da pesquisa sem a URL da página.
Isso significa que a imagem deve ser usada em uma página da Web pública e disponibilizada ao Google para recuperação.Os arquivos de imagem devem ser colocados no mesmo domínio da página que exibe a imagem?

Recentemente, parece que cada vez mais sites estão colocando arquivos de imagem em CDNs com o objetivo de reduzir a carga do servidor e melhorar a velocidade de exibição do site (porque os custos ficaram mais baratos).
A questão aqui é se os arquivos de imagem devem ser colocados no mesmo host (domínio) ou colocados em um domínio completamente diferente e se isso causará problemas de SEO. .

De acordo com John Mueller, do Google, colocar um arquivo de imagem no mesmo domínio da página em que a imagem foi postada não oferece nenhum benefício específico de SEO.
Colocar a imagem em um domínio diferente da página também não é problema.

Por outro lado, se os arquivos de imagem forem fornecidos no mesmo domínio, será mais fácil controlar ao usar um CDN no futuro.Posso incorporar a mesma imagem em várias páginas?

Sem problemas, claro. Usar a mesma imagem em várias páginas é uma prática comum em qualquer site.

Não parece ter qualquer impacto neste momento. A situação está sendo considerada há algum tempo, mas de acordo com o comentário de John Mueller no Twitter em setembro de 2017, ele disse que a situação não mudará.

O Google também pode exibir dados estruturados e informações de licença e direitos autorais incluídos no IPTC na pesquisa de imagens, mas isso não parece ser um fator que afeta a classificação.


Se você usar a função ” Site SEO Inspection ” do SE Ranking , ele rastreará todas as páginas do seu site e extrairá problemas relacionados a tamanhos de arquivo de imagem e atributos alternativos de uma só vez. Ele também apontará a URL onde a imagem está localizada e a URL da própria imagem, então vamos corrigir o problema o máximo possível.

A “Inspeção de SEO do site” verifica e relata regularmente muitos fatores que afetam o SEO, incluindo problemas com imagens e atributos alternativos.https://www.youtube.com/embed/VkRizDlx9MM?enablejsapi=1

Você pode usar uma avaliação gratuita por 2 semanas, então por que não tentar descobrir apenas os problemas no momento? Você pode criar uma conta de avaliação gratuita na página abaixo.

Tagged in :

dmendes40 Avatar

Leave a Reply

Your email address will not be published. Required fields are marked *

FOTAWP

Check out our new font generator and level up your social bios. Need more? Head over to Glyphy for all the fancy fonts and cool symbols you could ever imagine.