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

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.

Compartilhe

0FansLike
3,912FollowersFollow
0SubscribersSubscribe