Ultimas do CanalQb

Blogger - Lighthouse - Script para corrigir ALT inexistente

@CanalQb

Blogger - Lighthouse - Script para corrigir ALT inexistente





Deixe um comentário, no fim do post
CanalQb Lighthouse - Script para corrigir ALT inexistente
Canal Qb

Se você é como eu e já cometeu alguns deslizes na hora de criar suas postagens, provavelmente não sabia das técnicas necessárias para garantir a aprovação nos sistemas de busca, como o Google Search e o Bing, entre outros.

Mas não se preocupe, estou aqui para ajudar! Uma ótima solução é usar o sistema SEO chamado Lighthouse, que valida os requisitos do seu blog/site para que ele seja aceito no Adsense e alcance um bom ranqueamento no Google.

Você sabia que muitos sistemas que cobram mensalidades para auditar blogs/sites seguem todas as regras estabelecidas pelo Google? E acredite, é interessante notar que o próprio Google criou o Lighthouse, o que nos dá ainda mais confiança em sua eficácia, rs.

Com mais de 1700 postagens, é compreensível que seja difícil determinar quantas imagens foram criadas em cada uma delas. Essa tarefa pode se tornar um trabalho árduo, especialmente quando pensamos em corrigir cada imagem adicionando o atributo "ALT".

Mas lembre-se, ao investir tempo e esforço para configurar corretamente o atributo "ALT" em todas as suas imagens, você estará aumentando significativamente a acessibilidade do seu conteúdo para pessoas com deficiência visual e melhorando o desempenho do SEO do seu site. Essa é uma prática valiosa para impulsionar o tráfego orgânico e a visibilidade da sua página nos resultados de pesquisa.

Não se preocupe se parece uma tarefa trabalhosa, com dedicação e o uso de ferramentas adequadas, como o Lighthouse, você estará no caminho certo para melhorar a qualidade do seu site e alcançar ótimos resultados nos sistemas de busca. Mãos à obra e bons resultados para você!

Aqui estão algumas razões pelas quais o atributo "ALT" é essencial:

Acessibilidade: O atributo "ALT" descreve o conteúdo da imagem para pessoas com deficiência visual ou para aqueles que utilizam leitores de tela. Ao fornecer uma descrição significativa da imagem, você torna o conteúdo mais acessível a todos os usuários, independentemente de suas capacidades visuais.

SEO: Os mecanismos de busca não podem "ver" imagens da mesma forma que os seres humanos. Eles dependem do texto para entender o conteúdo da página. Ao incluir o atributo "ALT", você fornece informações aos motores de busca sobre o que a imagem representa. Isso ajuda a melhorar a relevância da página nos resultados de pesquisa relacionados ao conteúdo da imagem.

Experiência do usuário: Quando uma imagem não é carregada corretamente ou leva tempo para ser carregada, o texto alternativo (ALT) é exibido no lugar da imagem. Isso melhora a experiência do usuário, pois eles ainda recebem informações relevantes mesmo que a imagem não seja exibida.

Indexação de conteúdo visual: O texto alternativo também permite que os motores de busca indexem o conteúdo visual das imagens. Isso pode ser útil para exibir suas imagens em pesquisas de imagens específicas, aumentando a visibilidade do seu site.

Penalizações evitadas: Além disso, alguns mecanismos de busca podem penalizar ou diminuir a classificação de páginas que não possuem o atributo "ALT" configurado corretamente, pois isso é considerado uma prática de SEO inadequada.

Em resumo, o atributo "ALT" é uma prática recomendada em termos de SEO e acessibilidade. Ele permite que os motores de busca entendam melhor o conteúdo das imagens e ajuda a melhorar a experiência do usuário. Portanto, é importante configurar corretamente o atributo "ALT" em todas as imagens do seu site.

Mas eu sou o Qb, e estou aqui para deixar a sua vida mais simples. Que tal um Script que simplesmente você aplica no <head></head> e ele adiciona os ALT que nos IMG que estão ausentes.

Bora:
  <script>
    // <![CDATA[
    // Função para executar após a página ser carregada
    window.onload = function () {
      // Selecionar todas as imagens na página
      const imagens = document.querySelectorAll('img');

      // Percorrer todas as imagens encontradas
      imagens.forEach(function (imgElement) {
        // Remover os atributos style e alt
        imgElement.removeAttribute('style');
        imgElement.removeAttribute('alt');

        // Definir o novo atributo alt com o valor "CanalQb"
        imgElement.setAttribute('alt', 'CanalQb');

        // Definir o atributo cls com o valor 0
        imgElement.setAttribute('cls', '0');

        // Definir os atributos width, height e sizes conforme especificado
        imgElement.setAttribute('width', '100%');
        imgElement.setAttribute('height', '100%');
        imgElement.setAttribute('sizes', '(max-width: 320px) 280px, (max-width: 480px) 440px, 800px');
      });
    };
    // ]]>
  </script>

 Este simples script, vai pegar todos os IMG, e verificar se possui ALT configurado, em caso negativo, ele insere um para você, isso irá fazer todos os buscadores aprovarem essa questão.

Vamos as provas.

Sem o Script, potuação de performance 62


Com o Script, potuação de performance 71


Perceba que mesmo subindo a pontuação, ainda sim existe IMG sem ALT, isso acontece por que no meu caso, outros scripts carregam algumas imagens, e infelizmente ainda não consigo prever a inclusão deste script dentro dos outros para que isso seja evitado, mas note que só com esse Script eu já subi a qualidade das resposta da consulta do SEO.

Também esse script corrige outra falha na criação de imagens, que é o redimensionamento adequado de cada uma


Que é outro ponto importante para que tenha uma resposta adequada com os navegadores.

Basicamente o script cria imagens para tamanhos de celulares de acordo com a tela, fazendo com que ao clicar em determinado ponto do layout não cause problemas de sobreposição, criando os sizes, e também redefine o tamanho de width e heigth para 100% do tamanho da div ou outro elemento que ela está vinculada.

Bom esse post resolve 2 problemas, sem grandes esforços, é logico que é importante vocês a medida do possivel revisar seus posts e ir corrigindo manualmente para otimizar ainda mais o carregamento.

O script é apenas uma pré solução.

Se gostou, comente!

Nenhum comentário

Comente só assim vamos crescer juntos!

Observação: somente um membro deste blog pode postar um comentário.