Blogger - Lighthouse - Script para corrigir ALT inexistente
Deixe um comentário, no fim do post
|
|
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.