Seja você um blogueiro ou escreva artigos para uma revista ou jornal online, é provável que você se pergunte se seu artigo precisa de uma imagem ou não. A resposta é sempre “Sim”. As imagens trazem vida ao artigo e também contribuem para o SEO do seu site. Este post explica como otimizar completamente uma imagem para o SEO e fornece algumas dicas sobre o uso de imagens para a melhor experiência do usuário.
Sempre use imagens
As imagens, quando usadas corretamente, ajudarão os leitores a compreender melhor seu artigo. A velha frase “Uma imagem vale mais do que mil palavras” provavelmente não se aplica ao Google, mas é certamente verdadeira quando você precisa animar 1.000 palavras chatas, ilustrar o que você quer dizer em um gráfico ou diagrama de fluxo de dados ou apenas tornar suas postagens nas mídias sociais mais atraentes.
É uma recomendação simples: adicione imagens a cada artigo que você escreve para torná-los mais atraentes. Além disso, desde que a pesquisa visual esteja ficando cada vez mais importante – como visto na visão do Google para o futuro da pesquisa – pode se mostrar que fornece tráfego. E se você tem conteúdo visual, faz sentido colocar o SEO de imagem um pouco mais alto na sua lista de tarefas.
Há algum tempo, o Google Images ganhou uma nova interface com novos filtros, metadados e até atribuição. Esses novos filtros legais mostram que o Google sabe cada vez mais o que há em uma imagem e como ela se encaixa no contexto maior.
Encontrando a imagem certa SEO de imagem: Esta imagem não está dizendo “Bem-vindo à nossa empresa”, está dizendo “Bem-vindo a uma empresa”. Sempre é melhor usar imagens originais – fotos que você tirou – do que fotos de banco. Sua página de equipe precisa de fotos de sua equipe real, não deste cara à direita ou de um dos seus amigos da foto de banco. Fora de tópico: além disso, esse cara realmente precisa de um corte de cabelo.
Seu artigo precisa de uma imagem relevante ao seu assunto. Se você está adicionando uma foto aleatória apenas para obter um bala verde no análise de conteúdo do plugin Yoast SEO, então você está fazendo isso errado. A imagem deve refletir o tópico do post ou ter propósitos ilustrativos dentro do artigo. Além disso, tente colocar a imagem perto do texto relevante. Se você tem uma imagem principal ou uma imagem que você está tentando classificar, tente mantê-la perto do topo da página, se isso for possível sem parecer forçado.
Há uma razão simples de SEO de imagem para tudo isso: uma imagem com texto relacionado é melhor classificada para a palavra-chave para a qual está otimizada. Mas discutiremos o SEO de imagem mais tarde neste artigo.
Alternativas Se você não tem imagens originais que possa usar, há outras maneiras de encontrar imagens únicas e ainda evitar fotos de estoque. O Flickr.com é uma boa fonte de imagens, por exemplo, pois você pode usar imagens Creative Commons. Lembre-se apenas de atribuir o fotógrafo original. Também gostamos das imagens fornecidas por sites como Unsplash. Temos um post de blog que lhe dá uma visão geral incrível de onde obter ótimas imagens. Mantenha-se longe de fotos de estoque óbvias e, se estiver usando fotos de estoque, escolha aquelas que parecem (bem, apenas um pouco) mais genuínas. Mas o que você usar, você provavelmente encontrará que as imagens com pessoas sempre parecem fotos de estoque. A menos que você tire as fotos você mesmo, o que (na nossa opinião) é sempre a melhor ideia.
Alternativas óbvias para fotos poderiam ser gráficos ou ilustrações, que é o que nós da Yoast usamos. Se você estiver interessado, nosso ilustrador residente Erwin escreveu um artigo divertido sobre a criação de ilustrações em nosso blog de desenvolvedor. Além disso, uma menção honrosa deve ir aos GIFs animados, já que eles são incrivelmente populares nos dias de hoje.
Mas mesmo que as imagens GIF animadas sejam populares, não as exagere. Isso vai tornar seu post mais difícil de ler, pois o movimento da imagem distrai a atenção de seus leitores. Eles também podem lentificar sua página.
Preparando imagens para uso em seu artigo Uma vez que você tenha encontrado a imagem certa, seja ela uma foto, ilustração ou gráfico, o próximo passo é otimizá-la para uso em seu site. Então, antes de adicionar sua imagem, há várias coisas que você precisa considerar:
Escolha o nome de arquivo correto
A otimização de imagens para motores de busca começa com o nome do arquivo. Você quer que o Google saiba sobre a imagem sem precisar olhá-la, então use sua palavra-chave de foco no nome do arquivo de imagem. É simples: se você estiver escrevendo um artigo sobre a Notre Dame e usar uma imagem mostrando o nascer do sol em Paris sobre a Catedral da Notre Dame, o nome do arquivo não deve ser DSC4536.jpg. Um nome de arquivo adequado seria notre-dame-paris-nascer-do-sol.jpg, garantindo que o assunto principal da foto (e do seu artigo) esteja no começo do nome do arquivo.
Escolha o formato correto Para imagens, o formato certo não existe; depende do tipo de imagem e de como você quer usá-la. Em resumo, recomendamos:
escolher JPEG para fotos ou ilustrações maiores: isso dará bons resultados em termos de cores e claridade com um tamanho de arquivo relativamente pequeno; usar PNG se você quiser preservar a transparência de fundo na sua imagem; ou, use WebP em vez de JPEG e PNG. Ele produzirá resultados de alta qualidade com tamanhos de arquivo menores. Você pode usar ferramentas como Squoosh para converter sua imagem em WebP. use SVG para logotipos e ícones. Com a ajuda do CSS ou JavaScript, você pode gerenciar imagens no formato SVG, por exemplo, redimensioná-las sem perda de qualidade. Se você souber que uma grande parte de sua audiência usa navegadores ou dispositivos específicos, certifique-se de verificar se o formato escolhido é suportado por esses navegadores no CanIuse.com.
Quando você escolheu o nome e o formato corretos, é hora de redimensionar e otimizar sua imagem!
Escalar para otimização de imagem
Os tempos de carregamento são importantes para UX e SEO. Quanto mais rápido o site, mais fácil é para os usuários e os motores de busca visitarem (e indexarem) uma página. As imagens podem ter um grande impacto nos tempos de carregamento, especialmente quando você faz upload de uma imagem enorme para exibí-la realmente pequena – por exemplo, uma imagem de 2500×1500 pixels exibida em 250×150 pixels – já que toda a imagem ainda precisa ser carregada. Portanto, redimensione a imagem da maneira como deseja que ela seja exibida. O WordPress ajuda a fazer isso fornecendo automaticamente a imagem em vários tamanhos depois do upload. Infelizmente, isso não significa que o tamanho do arquivo também esteja otimizado; apenas o tamanho de exibição da imagem é assim. Portanto, pense no tamanho com o qual você faz upload de suas imagens!
Usar imagens responsivas
Este é essencial para o SEO também e, se você estiver usando o WordPress, isso é feito para você desde que foi adicionado por padrão a partir da versão 4.4. As imagens devem ter o atributo srcset, o que torna possível fornecer uma imagem diferente por largura de tela – isso é especialmente útil para dispositivos móveis.
Reduzir o tamanho do arquivo
O próximo passo na otimização de imagem deve ser garantir que a imagem redimensionada seja comprimida para que seja servida no menor tamanho de arquivo possível.
Claro, você poderia apenas exportar a imagem e experimentar com porcentagens de qualidade, mas preferimos usar as imagens com a maior qualidade possível, especialmente dada a popularidade de telas retina e semelhantes nos dias de hoje.
Você ainda pode reduzir o tamanho de arquivo dessas imagens removendo os dados EXIF, por exemplo. Recomendamos usar ferramentas como ImageOptim ou sites como Squoosh, JPEGmini, jpeg.io ou Kraken.io.
Quando você otimizou suas imagens, pode testar sua página com ferramentas como Google PageSpeed Insights, Lighthouse, WebPageTest.org ou Pingdom.
Adicionando a imagem ao seu artigo Embora o Google esteja melhorando ao reconhecer o que está na imagem, você ainda não deve confiar completamente em suas habilidades. Tudo se resume a você fornecer o contexto para aquela imagem – então, preencha o máximo que puder! Discutiremos como abaixo.
Sua imagem está pronta para uso, mas não a coloque em qualquer lugar do seu artigo. Como mencionado anteriormente, adicioná-la perto de conteúdo textual relacionado ajuda muito. Isso garante que o texto seja tão relevante para a imagem quanto a imagem é para o texto, o que os usuários e o Google preferem.
Legendas
A legenda da imagem é o texto que acompanha a imagem na página – se você olhar para as imagens neste artigo, é o texto na caixa cinza abaixo de cada uma. Por que as legendas são importantes para o SEO de imagens? Porque as pessoas as usam ao escanear um artigo. As pessoas tendem a escanear títulos, imagens e legendas enquanto escaneiam uma página da web. Lá atrás, em 1997, Jakob Nielsen escreveu:
“Elementos que melhoram a escanear incluem títulos, tipos grandes, texto em negrito, texto destacado, listas com marcadores, gráficos, legendas, frases de tópico e índices.”
Você precisa adicionar legendas a todas as imagens? Não, porque às vezes as imagens servem para outros propósitos. Decida se você quer usar as suas também para SEO ou não. Levando em conta a necessidade de evitar a super-otimização, diríamos que você deve adicionar legendas apenas onde faria sentido para o visitante que houvesse uma. Pense no visitante em primeiro lugar e não adicione uma legenda apenas com fins de SEO de imagens.
Texto alternativo
O texto alternativo (ou tag alternativa) é adicionado a uma imagem para que haja um texto descritivo no lugar se a imagem não puder ser exibida ao visitante por qualquer motivo. Adicionando um texto alternativo à imagem Em situações em que a imagem não está disponível para o leitor, talvez porque eles desativaram as imagens no seu navegador da web ou estejam usando um leitor de tela devido a uma deficiência visual, o texto alternativo garante que nenhuma informação ou funcionalidade seja perdida.
O texto alternativo está lá para melhorar a acessibilidade do seu site. Portanto, certifique-se de adicionar texto alternativo às imagens que você usa e considere incluir a palavra-chave SEO para essa página, se isso for adequado. Não sobrecarregue o texto alternativo de todas as imagens com palavras-chave. Mais importante, descreva o que está na imagem para que os motores de busca e as pessoas possam entendê-lo. Quanto mais informações relevantes a imagem tiver, mais importante os motores de busca considerarão essa imagem.
No entanto, note que nem todas as imagens precisam ter um texto alternativo. Em vez disso, você deve pensar no texto alternativo como uma parte do seu conteúdo e adicioná-lo onde fizer sentido. Por exemplo, se você tiver uma imagem apenas por motivos decorativos, então essa imagem não precisa de um texto alternativo. Neste caso, ter um texto alternativo não traz nenhum valor aos seus leitores. Por outro lado, se você usar uma imagem com uma estatística, digamos o número de pessoas que procuraram sorvete no mês passado, isso deve ser refletido no texto alternativo.
Título de Texto
Quando pairar sobre uma imagem, alguns navegadores exibem o texto do título como uma “dica de ferramenta”. O Chrome exibe o texto do título como planejado. O texto do título para imagens é semelhante e muitas pessoas que usam títulos simplesmente copiam o texto alternativo, mas cada vez mais pessoas os deixam de lado por completo. Qual é a razão disso? Aqui está a visão da Mozilla:
“O título tem vários problemas de acessibilidade, principalmente baseados no fato de que o suporte de leitor de tela é muito imprevisível e a maioria dos navegadores não o exibirá a menos que você esteja pairando com um mouse (ou seja, sem acesso a usuários de teclado)”.
É melhor incluir essas informações de suporte no texto principal do artigo, em vez de anexadas à imagem.
Adicionar dados estruturados de imagem Adicionar dados estruturados às suas páginas pode ajudar os motores de busca a exibir suas imagens como resultados ricos. Embora o Google diga que os dados estruturados não ajudam a ranquear melhor, ajudam a obter uma listagem mais completa na pesquisa de imagem. Há mais, porém. Por exemplo, se você tem receitas em seu site e adiciona dados estruturados às suas imagens, o Google também pode adicionar uma insígnia às suas imagens mostrando que esta imagem pertence a uma receita. O Google Images suporta dados estruturados para os seguintes tipos:
- Produto
- Vídeo
- Receita
Google tem algumas diretrizes que você precisa seguir se quiser que suas imagens apareçam ricas na pesquisa de imagens. Por exemplo, ao especificar uma imagem como uma propriedade de dados estruturados, certifique-se de que a imagem realmente pertence à instância desse tipo. Além disso, sua imagem deve ter o atributo de imagem e suas imagens devem ser rastreáveis e indexáveis. Você pode encontrá-los em todas as Diretrizes gerais de dados estruturados do Google.
O Yoast SEO adiciona automaticamente os dados estruturados corretos em várias imagens do seu site, como seu logotipo ou as que você adiciona a seus artigos “como fazer” criados em nossos blocos. O plugin sempre encontra pelo menos uma imagem relevante em qualquer página para adicionar ao gráfico de dados estruturados. Dessa forma, o Yoast SEO pode descrever sua página corretamente para os mecanismos de busca. Quer aprender mais sobre dados estruturados? Inscreva-se em nosso curso gratuito de treinamento em dados estruturados se quiser aprender a adicionar dados estruturados às suas páginas!
OpenGraph e Twitter Cards
Anteriormente, mencionamos o uso de imagens para compartilhamento nas redes sociais. Se você adicionar a seguinte tag de imagem à seção <head> no HTML da sua página, assim:
<meta property=”og:image” content=”http://example.com/link-to-image.jpg” />
Isso garantirá que a imagem seja incluída em sua compartilhada no Facebook (e o OpenGraph também é usado para o Pinterest, por exemplo).
Nosso plugin Yoast SEO tem uma seção de Mídias Sociais, onde você pode configurar e – na versão Premium – até mesmo pré-visualizar suas postagens no Facebook e Twitter. Os usuários premium também podem usar a integração do Zapier para automatizar a postagem em plataformas de mídias sociais. Certifique-se de usar uma imagem de alta qualidade, como a imagem original usada na postagem, pois as plataformas sociais usam imagens de alta qualidade/maior tamanho com mais frequência. Se você configurou corretamente e a imagem não estiver sendo exibida corretamente, tente limpar o cache do Facebook no Depurador de URL. As Twitter Cards fazem o mesmo para o Twitter e também são geradas por nosso plugin.
Mapas de imagem XML
Se você é um desenvolvedor web, pode estar se perguntando sobre mapas de imagem XML. Eu prefiro descrever isso como imagens em mapas XML. O Google é claro sobre isso:
Além disso, você pode usar extensões de imagem do Google para mapas de sites para fornecer ao Google mais informações sobre as imagens disponíveis nas suas páginas. As informações do mapa de imagem ajudam o Google a descobrir imagens que poderíamos não encontrar de outra forma (como imagens que seu site alcança com código JavaScript), e permite que você indique as imagens em seu site que você quer que o Google rastreie e indexe.
De vez em quando, as pessoas nos perguntam sobre mapas de imagem XML. Não geramos esses em nosso plugin, mas seguimos o conselho do Google e os incluímos nos mapas de páginas ou posts. Basta rolar para baixo em nosso mapa de postagens e você verá que adicionamos imagens a todas as nossas postagens mais recentes (há uma coluna apenas para isso). Adicionar imagens aos seus mapas XML ajuda o Google a indexar suas imagens, então certifique-se de fazê-lo para uma melhor otimização de imagens.
Servindo imagens via um CDN de imagens
Todos nós conhecemos os CDNs como uma das otimizações de velocidade de site mais populares. Algumas das empresas que fornecem CDNs também possuem um CDN específico para imagens. Os CDNs de imagens são construídos em torno de tarefas básicas: otimizar suas imagens e entregá-las ao seu visitante o mais rápido possível. Executar um CDN de imagens pode acelerar a entrega de suas imagens muitas, muitas vezes.
Um CDN de imagens permite que você gerencie a transformação, otimização e entrega de imagens. Você pode determinar o que carrega quando e como isso deve funcionar. Por exemplo, você pode dizer que todas as suas imagens PNG devem ser convertidas para webp em tempo real, pois essas carregam mais rapidamente e oferecem a melhor qualidade de imagem. Um CDN de imagens possui muitas opções para ajustar finamente o processo, mas há frequentemente uma configuração padrão que é provavelmente a melhor para a maioria dos sites.
Existem muitos CDNs de imagens para escolher, como Sirv, Cloudinary e Imagekit. Além disso, plataformas como Cloudflare permitem que você determine como redimensionar, reformatar e servir imagens.
Resumo do SEO de imagens
O SEO de imagens é a soma de vários elementos. Com o Google ficando cada vez melhor em reconhecer elementos em imagens, faz sentido garantir que a imagem e todos os seus elementos contribuam para uma boa experiência do usuário, bem como para o SEO. Seria tolice tentar enganar o Google.
