{"id":257,"date":"2018-07-19T16:04:12","date_gmt":"2018-07-19T19:04:12","guid":{"rendered":"https:\/\/www.postdigital.cc\/blog\/tag-alt-como-otimizar-imagens-para-seo\/"},"modified":"2023-10-25T23:02:37","modified_gmt":"2023-10-26T02:02:37","slug":"tag-alt-como-otimizar-imagens-para-seo","status":"publish","type":"post","link":"https:\/\/www.postdigital.cc\/blog\/artigo\/tag-alt-como-otimizar-imagens-para-seo","title":{"rendered":"Tag Alt: Como otimizar imagens para SEO"},"content":{"rendered":"

Provavelmente voc\u00ea j\u00e1 ouviu falar ou j\u00e1 utilizou o Google Imagens<\/em>, correto? Para aqueles que n\u00e3o conhecem, \u00e9 a plataforma do Google<\/em> que realiza buscas a partir de palavras-chave apenas em imagens que est\u00e3o presentes nos websites.<\/p>\n

Digamos que voc\u00ea realize uma busca pela palavra-chave “avenida paulista”. O resultado dessa pesquisa, provavelmente ser\u00e1 uma lista de imagens da avenida Paulista, e se voc\u00ea clicar sobre uma das imagens, ser\u00e1 direcionado para a p\u00e1gina onde ela est\u00e1 sendo exibida, ou seja, \u00e9 mais uma possibilidade do seu site ser encontrado.<\/p>\n

Em contrapartida, os computadores n\u00e3o conseguem interpretar o contexto de uma imagem. Ent\u00e3o como ser\u00e1 que o Google faz para interpretar o que uma imagem representa e em seguida classific\u00e1-la em um resultado de busca?<\/p>\n

Para ajud\u00e1-lo nessa tarefa, devemos informar ao Google o significado da imagem atrav\u00e9s do uso do tag Alt. Confira no artigo de hoje como otimizar imagens para o SEO<\/a>. Aproveite e baixe gratuitamente nosso\u00a0“Manual de SEO<\/a>” e saiba mais!<\/p>\n

Mas afinal, o que \u00e9 o tag Alt?<\/h2>\n

\"Tag<\/p>\n

\u00c9 um atributo (c\u00f3digo HTML) que \u00e9 aplicado especificamente dentro de uma tag que faz refer\u00eancia a imagem de uma p\u00e1gina HTML, com o intuito de facilitar o entendimento de imagens pelo Google Images<\/em>. Sua principal incub\u00eancia \u00e9 conceder uma descri\u00e7\u00e3o alternativa para a imagem ou servir de texto \u00e2ncora quando a mesma for utilizada como link dentro de uma p\u00e1gina.<\/p>\n

Muitos usu\u00e1rios confundem o tag Alt<\/em> com o tag Title<\/em>, que \u00e9 respons\u00e1vel por apresentar uma pequena janela com um texto descritivo quando se passa e\/ou coloca o mouse sobre uma imagem, recurso que \u00e9 conhecido tecnicamente como “hint” ou “tooltip”.<\/p>\n

O tag Title<\/em>, al\u00e9m de ser respons\u00e1vel pelo “tooltip”, possu\u00ed uma toler\u00e2ncia maior com descri\u00e7\u00f5es mais longas (tenha bom senso) contribuindo com a navega\u00e7\u00e3o do usu\u00e1rio em seu site.<\/p>\n

Por que usar?<\/h2>\n

\"Por<\/p>\n

O tag Alt<\/em> ajuda a determinar a coloca\u00e7\u00e3o da p\u00e1gina no ranking do Google Images<\/em> em uma pesquisa com base palavras usadas na descri\u00e7\u00e3o da imagem. Hoje, o p\u00fablico busca os mais diferentes tipos de informa\u00e7\u00f5es na internet e quer consultar com agilidade nos resultados que desejam.<\/p>\n

Al\u00e9m de aumentar o interesse pelo endere\u00e7o virtual, o tag alt<\/em> tem outra finalidade bastante relevante. O recurso tem um papel fundamental para garantir a acessibilidade de pessoas com defici\u00eancia visual nas p\u00e1ginas. Abre-se assim uma nova possibilidade de integra\u00e7\u00e3o para esses indiv\u00edduos.<\/p>\n

Tal processo d\u00e1-se quando a imagem tem fun\u00e7\u00e3o de link no site, j\u00e1 que o alt tag<\/em> passa ser um texto \u00e2ncora para o conte\u00fado. Tamb\u00e9m \u00e9 pelo alt tag<\/em> que os programas como o Jaws conseguem fazer a leitura da p\u00e1gina para quem n\u00e3o pode enxergar. \u00c9 esse recurso que permite, at\u00e9 mesmo, que as ferramentas de acessibilidade diferenciem entre links e imagem enquanto leem para os visitantes.<\/p>\n

Por \u00faltimo, o texto do alt tag<\/em> ser\u00e1 exibido no lugar de uma imagem quando ela n\u00e3o for carregada pelo browser. Sabe quando a imagem n\u00e3o carrega e aparece o “X” no lugar? Se voc\u00ea estiver utilizando o alt tag<\/em> o texto ser\u00e1 apresentado no lugar da imagem.<\/p>\n

Dicas de como usar<\/h2>\n