Se você já entrou no Google PageSpeed Insights e se deparou com o aviso de que alguns elementos de imagem não possuem o atributo ALT, isso significa que seu site está com um problema de acessibilidade e SEO que precisa ser corrigido. Esse erro é muito comum em sites feitos no Blogger, principalmente na logo do site e em imagens do template.
Neste artigo, você vai entender de forma simples o que significa esse erro, por que ele acontece e principalmente como resolver passo a passo, sem precisar ser um programador avançado.
 |
| Problema de acessibilidade no PageSpeed Insights relacionado a imagens sem atributo ALT no Blogger. Exemplo prático da correção. |
O que significa o erro de imagem sem atributo ALT
O atributo ALT, também chamado de texto alternativo, é uma descrição que informa ao Google e a outros sistemas o que aquela imagem representa. Ele é essencial para o SEO porque ajuda os mecanismos de busca a entenderem o conteúdo visual do seu site, já que o Google não “enxerga” imagens como nós.
Além disso, o ALT também é importante para acessibilidade, pois leitores de tela utilizam essa informação para descrever imagens para pessoas com deficiência visual. Quando esse atributo não existe, o Google considera isso um problema e pode reduzir a pontuação do seu site no PageSpeed Insights.
Como identificar o problema no PageSpeed Insights
O primeiro passo para resolver esse problema é identificar onde ele está acontecendo. Para isso, você deve acessar o Google PageSpeed Insights, inserir a URL do seu site e iniciar a análise.
Depois que o resultado aparecer, você deve ir até a aba de acessibilidade e procurar pelo aviso relacionado a imagens sem atributo ALT. Ao clicar na seta de expansão, o sistema mostra exatamente quais imagens estão com problema.
Como encontrar a imagem com erro no seu site
Depois de identificar a imagem com problema, você precisa localizar ela dentro do código do seu site. Para isso, abra seu site normalmente, clique com o botão direito sobre a imagem e selecione a opção “Inspecionar”. Isso vai abrir o painel de desenvolvedor do navegador, onde você pode visualizar o HTML da página.
Dentro desse painel, você deve procurar a tag da imagem, que geralmente aparece como <img>. Em muitos casos, principalmente na logo do site, essa imagem está dentro de outras estruturas do template, como links ou divisões com classes específicas.
Como localizar o código da imagem no HTML do Blogger
Uma forma eficiente de encontrar o código correto é copiar a classe da imagem e usar a busca do navegador com Ctrl + F dentro do HTML do Blogger. Ao colar essa classe, você será levado diretamente ao trecho onde a imagem está localizada.
Em alguns templates do Blogger, pode ser necessário atenção com aspas simples e duplas, pois isso pode influenciar na hora de localizar o código corretamente.
Como corrigir o erro adicionando o atributo ALT
Depois de encontrar a imagem, a correção é simples. Você precisa adicionar o atributo ALT dentro da tag da imagem. Esse atributo deve conter uma descrição clara do que a imagem representa.
No caso da logo do site, por exemplo, o ideal é utilizar o nome do site ou uma descrição que represente a marca.
Um exemplo correto de código ficaria assim:
<img src="logo.png" alt="Nome do site ou descrição da logo">
Esse simples ajuste já resolve o erro de acessibilidade apontado pelo PageSpeed Insights.
Adicionando também o atributo TITLE na imagem
Além do ALT, também é recomendado adicionar o atributo TITLE. Ele não é obrigatório para SEO, mas ajuda a melhorar a experiência do usuário, pois exibe uma informação quando alguém passa o mouse sobre a imagem.
Um exemplo completo de imagem otimizada seria:
<img src="logo.png" alt="Nome do site" title="Nome do site">
Importante para sites responsivos
Se o seu site possui versões diferentes para mobile e desktop, é importante garantir que todas as imagens estejam corretamente configuradas. Isso significa aplicar o atributo ALT e TITLE em todas as versões da imagem, sem exceção.
Como verificar se o problema foi resolvido
Depois de fazer as correções, volte ao Google PageSpeed Insights e faça uma nova análise do seu site. Em seguida, acesse novamente a seção de acessibilidade e verifique se o erro de imagens sem atributo ALT desapareceu.
Se tudo estiver correto, seu site estará mais otimizado para SEO e com melhor desempenho em acessibilidade.
Vídeo explicativo
Se você quiser ver o processo na prática, você pode assistir ao vídeo abaixo onde explico todo o passo a passo dentro do Blogger e do HTML.
Mais videos recomendados: Como Corrigir Erros de ALT e TITLE nas Imagens – SEO Passo a Passo
Conclusão
Corrigir imagens sem atributo ALT é uma das otimizações mais importantes para qualquer site. Esse ajuste melhora diretamente o SEO, a acessibilidade e a pontuação no PageSpeed Insights, além de tornar seu site mais profissional aos olhos do Google.
Com esse pequeno ajuste no código, você já consegue melhorar significativamente a qualidade técnica do seu site e evitar erros comuns em auditorias de desempenho.
Se este problema foi resolvido no seu site, você pode deixar um comentário contando sua experiência ou compartilhar outras dúvidas que tiver sobre otimização.
Os comentários não é a nossa opinião e, portanto, o autor da mensagem é quem se responsabiliza pelo conteúdo postado.