Um tema muito abordado em nossa área de SEO, principalmente nos últimos meses, é a otimização de imagens, que pouco a pouco tem ganhado sua importância na otimização de sites. A otimização de imagens vai desde o uso de tags (alt, title e londesc) até o nome da imagem, conteúdo onde a imagem está inserida e links.
Tag “alt”
O atributo alt é utilizado para facilitar a leitura de imagens em sites pelo Google, sendo, assim, de vital importância para o rankeamento de seu site no Google Images. A função principal desta tag é fornecer uma descrição alternativa para a imagem e funciona, também, como texto âncora quando a imagem é usada como link.
O alt text é exibido pelos browsers quando eles por algum motivo não mostram as imagens de determinados sites, ou enquanto estas imagens são carregadas ou, até mesmo, por não estarem mais disponíveis, sendo mostrado o texto na tela no lugar de tais imagens desativadas.
Além disso, a tag alt também é utilizada pelos bots do Google que juntamente com a tag title interpreta melhor o significado da imagem e sua relação com a página em questão. Como esse texto alternativo serve para representar uma imagem (lembre-se de que não é uma descrição em si, e sim um equivalente do que a imagem significa), é de vital importância que se tenha total bom senso em produzir um texto curto e coeso com o conteúdo apresentado, além de evitar o uso de stop words (para, de, com, etc.).
Em um de seus vídeos, Matt Cutts recomendou que sejam usadas até 5 palavras no alternate text de uma imagem. Como exemplo, podemos usar um site que vende casas: ao invés de usar uma tag alt com o texto “Casas baratas em toda cidade de São Paulo”, fica melhor: “Casas baratas São Paulo”.
Um ponto que muitos usuários confundem quando se trata da tag “alt”, é atribui-la como a responsável pela exibição do hint ou tooltip (pequena janela geralmente de fundo amarelo que aparece quando se passa o mouse por cima de uma imagem mostrando algum tipo de descrição da mesma). Esse papel é, na verdade, realizado pela tag title, como pode ser visto na imagem abaixo.
Um exemplo de uso errado da tag alt é comumente encontrado em sites de notícias. Abaixo, um exemplo de uma imagem do site Globo Esporte, onde o alternate text está com o crédito para o autor da foto, e não com palavras relacionadas ao conteúdo da foto.
A solução, nesse caso, poderia ser simplesmente uma frase que reforçasse a idéia da imagem e do conteúdo em si, como por exemplo: “Adriano marca gol garantindo vitória”.
A tag alt é obrigatória para o uso de imagens de quaisquer naturezas e, ao contrário do que muitos fazem (ou podem pensar em fazer), ela não deve ser utilizada como um meio de spam com as keywords de seu site.
Tag “longdesc”
Quando a imagem for um pouco complexa para se descrever em poucos caracteres ou os atributos alt e title não forem suficientes, como para descrições de arquivos de vídeo, áudio ou até mesmo animações, o atributo longdesc deve ser usado.
O atributo longdesc fornece ao usuário um campo onde é inserido um link para uma URL com uma descrição mais completa e relevante da imagem (ou vídeo, áudio, …) que se procura definir. Como é uma URL (página) nova, pode-se utilizar a quantidade de caracteres que for necessária.
Tag “title”
Esta tag é um complemento para a tag alt . É ela quem origina o hint já citado anteriormente e não a tag alt como às vezes as pessoas confundem. A tag title permite o uso de quantos caracteres forem necessários para completá-la (mas não é bom abusar) e por isso pode ajudar na navegação de usuários em seu site.
Assim como nas outras tags, a tag title enfrenta os mesmos problemas relacionados a spam e o mau uso desta tag representa um problema para o usuário, como pode ser visto na imagem abaixo, um texto grande demais no title da imagem:
O bom uso destas tags é crucial para quem quer otimizar bem suas imagens, porém, abusar do uso destes campos pode trazer problemas para seu site, pois o Google tem se apurado cada vez mais nesse setor. Em especial, o atributo alt é fundamental para otimização de imagens e deve ser bem montado.
Tags a parte, alguns outros pontos também são interessantes de se considerar sobre otimização de imagens:
- Nome da imagem
- Formatos, Qualidade e Resolução
- Rankeamento no Google
- Evitar cópias
- Relacionar conteúdos próximo à imagem
- Imagens de fundo
- Indexação x Robots.txt
Nome da Imagem
Encare como uma otimização de url, evitando nomes genéricos como “Image1.jpg” ou “foto8.jpg” e, além disso, sempre use hífens ao invés de underlines quando o nome passar de uma palavra. Exemplo: mestre-seo.jpg ou otimização-de-imagens.jpg.
Formatos, Qualidade e Resolução
É importante focar em formatos padrão, tais como: jpg, gif, bmp e png. Sempre lembrando que, além disso, a qualidade de uma imagem pode interferir na velocidade de carregamento, ou seja, quanto maior a qualidade, mais devagar o carregamento da página e isso vai ser determinante para o usuário continuar ou não no seu site.
O mesmo pode se dizer da resolução: quanto maior for, melhor. Mas isso também pesa sobre o tempo de carregamento da página. É importante considerar um meio termo entre qualidade e tamanho da imagem.
Rankeamento no Google
Duas ações podem ser decisivas em relação ao rankeamento das imagens de seu site no Google: uma delas é o cuidado de ter as imagens guardadas no mesmo domínio de seu site (muitos estudos tem mostrado isso, comprovando sua eficácia no ranking); e a outra é incluir o site no Google Image Labeler.
O Google Image Labeler, criado pelo Google, visa dar nome a todas as imagens existentes no seu banco de dados com ajuda dos próprios internautas.
Evite Cópias
Se você utiliza uma imagem que pegou em outro site, evite copiar os atributos da mesma,tais como dimensão e posicionamento pois pode ser considerado como conteúdo duplicado.
Relacione Conteúdos Próximos a sua Imagem
Técnica pouco conhecida, porém comprovada. A inserção de conteúdo logo abaixo e acima de sua imagem contendo keywords relacionadas a suas tags alt e title é de grande importância para uma maior relevância entre imagem, conteúdo na página e consequente ranking na busca por imagens.
Imagens de Fundo
Uma questão interessante é o tratamento com as imagens de fundo de seu site. Muitos devem se perguntar se seria interessante otimizá-las, e a resposta é não. Foque seus esforços em imagens que se relacionam ao seu conteúdo, ou seja, é interessante deixar as tags em branco e não se preocupar com o nome dos arquivos (formas como bg1.jpg ou background.png são aceitos neste caso).
Indexação x Robots.txt
Analise seu robots.txt e confira se os bots estão chegando até suas imagens e se o mesmo não impede de alguma forma a indexação de cada uma delas. Confira quais imagens de seu site estão indexadas através do Google Images, utilizando o comando “site: domínio.com.br”. Por exemplo: site:mestreseo.com.br no Google Images.
Tenha sempre em mente a importância de se otimizar imagens. O Google vem trabalhando cada vez mais nessa área, que ainda hoje é um diferencial entre as técnicas de SEO. É importante frisar que o bot do Google responsável por rastrear imagens ainda não visita páginas com muita frequência, por isso a importância de manter todas as imagens otimizadas. Uma vez que ele passe por seu site ele certamente não voltará tão rápido.
O bot de imagens tem esse comportamento devido ao próprio fato de imagens não serem atualizadas com tanta frequência, logo, não faz sentido ficar solicitando todas imagens do site a cada visita.
Então faça testes, relacione imagens que traduzam o seu conteúdo utilizando de humor, ironia ou quem sabe até algo que choque seus leitores. Em nossa área, atualmente, estão em destaque todos aqueles que pesquisam, estudam e aplicam cada uma das alternativas que os sistemas de busca disponibilizam. Então, o que está esperando? Saiba encontrar o melhor caminho para seguir.
![Black Friday: Estratégias Para Vender Mais [2024]](https://www.agenciamestre.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2022/10/black-friday-guia-definitivo-270x173.jpg.webp)
Olá Bruno,
Parabéns pelo artigo.
Na parte de Rankeamento no Google você informa que estudos comprovam um melhor posicionamento quando as imagens estão no próprio domínio.
Porém algumas técnicas de otimização de servidores sugerem que seja criado outros domínios ou subdomínios e apontem para outros servidores que hospeda apenas as imagens.
Como poderia se acoplar estas duas soluções ?
Abraços.
surgiu-me uma duvida como é prejudicial utilizar outros domínios para alojar as imagens então o uso de um cdn que acelera o carregamento das imagens é prejudicial no seo das imagens visto que o máximo que se consegue é utilizar um subdomínio?
SHOW DE BOLA!!!
Tenho penado muito com a ausência de minhas imagens no google…meu site vive de imagens e elas sumiram e nunca amis voltaram…Usando algumas dicas daqui já voltaram algumas, com mais essas dicas, acho que consigo tê-las de volta finalmente!!
@erichkist
Olá, que bom que gostou do artigo. Então, a solução de sua pergunta exige primeiramente saber o quanto está sobrecarregado o servidor. Por exemplo, você têm um servidor que hospeda 20 sites e outro que hospeda apenas 1 site.No servidor com 20 sites a melhor solução seria perder um pouco em SEO colocando as imagens em um outro servidor e com isso ganhar desempenho que é crucial para o carregamento da página.Já no servidor que contém apenas um site, você não teria motivos para mandar as imagens para um outro,podendo mante-lás, e com isso ganhar relevãncia no rankeamento das imagens.Afinal, não adianta estar bem posicionado nas buscas se seu site apresenta um baixo desempenho.
@theworst
Boa Noite amigo!Primeiramente, não é prejudicial não manter as imagens em servidores diferentes, até porque, isso jogaria por terra algumas ações relacionadas a otimização de servidores. Utilizar esta técnica ajuda a reforçar a relevância da imagem no Google, mais não usa-lá não irá prejudicar seu site.Seu caso é bem parecido com o caso acima, e concluo que se você está utilizando cdn, é porque seu servidor está bem carregado e neste caso o melhor a se fazer é usá-lo para ganhar desempenho e consequentemente perder um pouco em SEO.Porém, os benefícios do cdn serão maiores que os benefício da hospdagem de imagens em outro domínio neste caso.
@Alexandre Brendim
Que bom que gostou Alexandre!Algumas dessas dicas com certeza ajudarão a obter suas imagens de volta.
Abraços a todos!
Bruno, muito bom o artigo.
Tenho uma dúvida: É interessante colocar no tag da imagem o mesmo texto do link de texto que fica ao lado? Ou é melhor colocar diferente?
Exemplo: A imagem de uma bandeira da Alemanha com a tag “Bandeira da Alemanha” e o texto ao lado igual? Ou o texto ao lado como “Bandeira alemã”?
Abraços.
Estou percebendo um aumento de visitas ao meu site, justamente vindo do google images, acho que o trabalho está dando certo, excelente matéria.
@fdccosta
Boa Tarde! Sim, no caso seria interessante o uso de um texto relacionado e não igual. Ou seja, se encaixaria melhor o texto “Bandeira alemã”.É importante criar uma relação forte entre tag e conteúdo, e a partir deste ponto as variações que você poderá criar serão inúmeras.
@Walter
Olá Walter! É muito válida sua colocação. Hoje temos sites que possuem aproximadamente 12% de tráfego vindos apenas do Google Images, o que já faz uma diferença enorme para a nossa área. E que bom que seu trabalho está dando resultados.
Abraços a todos!
Nossa, doze porcento. Aqui recebo apenas dois. Vou tentar as dicas e ver se melhora.
Somente para efeito de sugestão, troque o título de Tag “alt” para Atributo “alt”, já que alt não é uma tag e sim um atributo de uma tag.
Bem observado, são vícios da fala.
Olá, de grande ajuda este post e realmente eu estava quebrando a cabeça pelo fato de eu colocar o comando alt e não aparecer a janelinha descritiva quando eu passava o mouse sobre a imagem.
Meu site é basicamente de fotos então espero conseguir uma boa subida com essas dicas
Mas me ficou uma dúvida
qual a vantagem de cadastrar as imagens no http://images.google.com/imagelabeler/ e como eu faço
valeu
Tenho uma cliente que trabalha com convites artesanais (casamento, debutantes, chá de bêbe, chá de panela e etc). O público que esta buscando o serviço dela é “muito visual” então a otimização das imagens deve fazer parte da estrategia de SEO, alem do trabalho convencional de SEO precisei otimizar a parte de imagens porque a busca no Google Imagem pelas palavras chaves do negocio e conteúdo públicado. Os numeros são consideraveis.
Nos primeiros dois meses o proveniência de visitas do google.com.br / referral (que é o google imagem em sua maioria) era de 32,08%. Passando para 49,75% nos dois meses posteriores. Nos últimos 20 dias o indicador esta em 52,21%.
Esse trafego gerado através do google image é de alta qualidade vou usar os dados dos últimos 20 dias para exemplificar.
1.905 Visitas – Porcentagem do total do site: 52,21%
4,08 Páginas/visita – Média do site: 4,76 (-14,35%) Obs: Utilizo no partifolio de produtos dela uma galeria que utiliza o mootool e cada imagem que é visualizada não é registrada pelo analytcs porque muda apenas o arquivo de imagem para não demorar a visualização e carregamento de uma nova pagina para visualizar a próxima imagem.
00:02:16 Tempo médio no site – Média do site: 00:03:14 (-29,73%)
92,55% % Novas visitas – Média do site: 88,74% (4,29%)
18,06% Taxa de rejeições – Média do site: 16,94% (6,62%)
Bem dependendo do público as imagens são uma grande aliada.
Tenho um website para farmacêuticos, nesse as imagens já não importam tanto, somente quando se refere há algum tipo de conhecimento, exemplo estrutura química de um medicamento, fora isso quase não vêm visitante do google imagens para este portal. Já minha noiva trabalha muito com imagens em um website para casamento, onde cerca de 20% do tráfego vem de pessoas que procuram modelos de vestidos, paletas de cores de decorações no caso otimizar imagens desse tipo de website é muito bom.
Muito bom Bruno. Parabéns pela matéria.
Você citou um exemplo de utilizar hifens no lugar de underlines no nome das imagens ok, está era minha dúvida. Mas em contrapartida você deu um exemplo conforme acima: otimização-de-imagens.jpg
Então surgiu outra dúvida: Pode-se utilizar acentos e pontuações em nomes de imagens? Isso não é prejudicial nas buscas?
Grato.
Bruno, parabéns pela matéria, estou tentando inserir nossas imagens nas primeiras pgs. no Google Images mas está complicado. O pior é que não consigo achar “o furo”… parabéns pea matéria, muito boa.
Cara me da uma força, eu criei um jquery-plugin para fazer carregamento preguiçoso das imagens (o famoso lazyload, usado pelo Youtube.com e pelo Facebook.com), mas a estrutura HTML usada por outros plugins do gênero é assim:
Porém assim os buscadores indexam a imagem gray.png e não a imagem “photo-mundial-basket.jpg”.
Então reformulei o HTML usando noscript (assim se o javascript também estiver desabilitado as imagens sempre serão exibidas):
Quando o javascript está habilitado, o plugin pega os noscripts que aparecem no view-port e carregam as imagens. Após carregar o plugin transforma o html, deixando ele assim:
Mas me diga, usar noscript ajuda ao o google enxergar as imagens? Se não me diga qual a melhor estrutura HTML para eu poder colocar isso em prática?
Desculpem os comentários sumiram com meus códigos html.
De novo…
Cara me da uma força, eu criei um jquery-plugin para fazer carregamento preguiçoso das imagens (o famoso lazyload, usado pelo Youtube.com e pelo Facebook.com), mas a estrutura HTML usada por outros plugins do gênero é assim:
<img class=”lazy” src=”gray.png” data-src=”photo-mundial-basket.jpg” alt=”descrição”>
Porém assim os buscadores indexam a imagem gray.png e não a imagem “photo-mundial-basket.jpg”.
Então reformulei o HTML usando noscript (assim se o javascript também estiver desabilitado as imagens sempre serão exibidas):
<span class=”lazy”>
<noscript><img src=”gray.png” data-src=”photo-mundial-basket.jpg” alt=”descrição”></noscript>
</span>
Quando o javascript está habilitado, o plugin pega os noscripts que aparecem no view-port e carregam as imagens. Após carregar o plugin transforma o html, deixando ele assim:
<span class=”lazy”>
<img src=”photo-mundial-basket.jpg” alt=”descrição”>
<noscript><img src=”gray.png” data-src=”photo-mundial-basket.jpg” alt=”descrição”></noscript>
</span>
Mas me diga, usar noscript ajuda ao o google enxergar as imagens? Se não me diga qual a melhor estrutura HTML para eu poder colocar isso em prática?
Excelente artigo!!! Eu uso o “alt tag” nas minhas imagens mas gostaria de colocar uma questão. Há algum tempo eu alojava as fotos do meu site no “midia” do WordPress mas o site estava lento e então decidi mudar as imagens para o Picasa colocando o respetivo url no post, claro que perdi muitos visitantes mas estou agora a ganhar de novo. A minha pergunta é se há alguma vantagem ou desvantagem em ter as fotos alojadas no “midia” do WordPress ou num servidor externo como o Picasa. O Google e outros motores de busca indexam imagens de programas como o Picasa?
Grato por futuras respostas.
Gente estou com uma dúvida que em todo blog que eu leio eu acho uma informação diferente, uns dizem que tem que usar palavra chave na tag alt e outros já não…. Como devo pensar?
Vamos lá:
O atribulto alt serve para quando o navegador do usuário não rendenrizar a imagem, mostrar uma descrição daquela imagem, o que ela quer dizer. A minha dúvida é se devemos ou não usar palavra-chave junto com esta descrição, e se caso não consiga usar porque o conteúdo da imagem não tem muito a ver com a palavra chave em questão, se tem algum peso mais ou menos de não seu usar (ou usar a palvra chave), ou seja se isso é um dos fatores primordiais; Se devo 1uebrar a cabeça para encontrar uma forma de adaptar o conteudo do que aquela imagem quer dizer junto a palavra chave. Ou se devo pensar mais mesmo na usabilidade em si, quer dizer se o navegador não renderizar a imagem eu consiga passar com clareza a informação do que aquela imagem quer dizer.
Tag Title : Devo usar sempre com o atributo ALT? Vejo até mesmo em alguns sites de empresas de SEO que em alguns lugares eles usam o ALT e TITLE junto e já em outras partes do site só o atributo ALT. O que é recomendável nesse caso, usar sempre ou de vez em quando?
Devo usar a palavra chave na tag Title? Faz sentido?
Obrigado galera, essa dúvida não sai da minha cabeça, pois cada lugar dizem uma coisa .
Otimização de imagem é show…vale lembrar que existem ferramentas online como tinypng, minijpg e minimg com ótimo desempenho em otimização de imagens. Entre elas, o minimg.net geralmente consegue a melhor taxa de compactação, com a vantagem de otimizar imagens jpg e png ao mesmo tempo e opção de conversão do jpg em progressivo.
Olá Bruno, vejo que tem um tempo que não responde o pessoal aqui no post, mas espero que volte a comentar, pois o tira dúvida é de suma importância para aprendizes :-).
Vamos lá:
1) como você usaria da melhor forma conjugando o atributo alt e title da imagem com o title de um link. Ou seja, eu tenho uma imagem que ela é um link. Se eu aplicar o title da imagem e title do link, o title da imagem será prevalecido pelo navegador, ou seja, o tooltip será da imagem e não do link. Isso para o Goolge também?
2) Qual seria a melhor forma de uso entre alt X title para que não haja repetição. Vejo muitos casos por aí que o pessoal acaba repetindo o texto. Exemplo: title=”Adriano marca gol garantindo vitória” e alt=”Adriano marca gol garantindo vitória”.
Neste caso, qual seria a melhor opção se fazer pensando no SEO?
Muito bom artigo, aprende bastante com vocês.