Estratégias de crescimento para editoras em época de eleições | WEBINAR
Estratégias de crescimento para editoras em época de eleições | WEBINAR
Neste módulo, você aprenderá o que é otimização de imagens, sua importância para SEO, as melhores práticas para usá-la de forma eficaz e as armadilhas comuns a serem evitadas ao otimizar imagens.
Duração do vídeo
19:24
Responda ao questionário
Faça o teste do módulo atual
Materiais
Modelos prontos para usar
Recursos
Relatórios e Recursos
Não há questionários disponíveis para este módulo.
A otimização de imagens consiste em aplicar as melhores práticas às imagens utilizadas em sua página para que seu conteúdo tenha uma melhor classificação nas páginas de resultados dos mecanismos de busca (SERPs).
Os usuários da internet têm demonstrado uma crescente preferência por conteúdo mais visual . Isso significa que otimizar as imagens é tão importante quanto otimizar o texto do seu conteúdo.
A otimização de imagens é utilizada para produzir imagens no melhor formato, tamanho e resolução possíveis, a fim de aprimorar a experiência do usuário (UX). Para que o Google possa indexar e rastrear a imagem corretamente, exibindo-a nos resultados de pesquisa (SERPs), ela deve ser otimizada de acordo com as diretrizes do Google e identificada adequadamente com os metadados relevantes.
Neste módulo, vamos analisar mais detalhadamente os aspectos mais importantes da otimização de imagens.
As imagens também são conteúdo. Assim como o texto, elas aparecem nos resultados de busca e influenciam a utilidade que o leitor encontra na sua página. Veja por que otimizar imagens é importante para SEO.
Na maioria das páginas, as imagens representam mais de 70% do seu peso , o que significa que o uso de imagens não otimizadas pode tornar o carregamento mais lento. Como a velocidade do site é um fator importante para o ranqueamento, isso impacta diretamente o SEO. Além da velocidade do site, imagens não otimizadas também podem afetar a experiência do usuário, causando problemas como alterações no layout.
Esses fatores impactam os principais indicadores vitais da web (CWVs) do seu site, que o Google usa para medir a experiência da página.
Para mais informações sobre CWVs, consulte nosso módulo detalhado de experiência de página aqui .
A otimização de imagens envolve a identificação e rotulagem corretas das imagens usando texto alternativo e dados estruturados, a adição de imagens aos sitemaps e a criação de novos sitemaps para imagens . Tudo isso ajuda os rastreadores da web a identificar e processar as imagens em uma página de forma rápida e correta, melhorando assim a velocidade e a eficiência da indexação.
As buscas no Google estão se tornando mais visuais , em vez de se basearem apenas em palavras-chave textuais. O número de imagens no Google aumentou exponencialmente na última década, tornando a otimização de imagens mais importante do que nunca.
Já em 2018, o Google anunciou seu compromisso em tornar o conteúdo visual mais central para as buscas . Consequentemente, o Google lançou diversas novas funcionalidades — como Legendas, Informações Rápidas e Buscas Relacionadas — todas elas fortemente dependentes de imagens. Como editor, aproveitar esses recursos provavelmente impactará diretamente seu SEO e a visibilidade do seu conteúdo.
Veja o que acontece quando pesquisamos sobre a Copa do Mundo da FIFA no Catar.
Agora existe um painel lateral dedicado à direita que exibe imagens, localizado logo acima da entrada da Wikipédia para o termo de pesquisa.
Clicar na aba Imagens não apenas expande o número de opções de imagens disponíveis para visualização, mas, como podemos ver na caixa verde abaixo, agora oferece um carrossel de termos sugeridos que permitem filtrar as imagens por nome.
Ao rolar a página para baixo (como mostrado na imagem abaixo), você encontrará mais recomendações de pesquisas relacionadas que podem ajudar a refinar os resultados ou expandir a consulta.
Ter imagens do seu conteúdo entre as primeiras imagens é outra forma de os editores melhorarem a descoberta de conteúdo.
O Google também vem desenvolvendo e atualizando o Google Lens — sua tecnologia de reconhecimento de imagem com inteligência artificial, presente na barra de pesquisa do aplicativo Google para iOS e Android.
— para torná-lo ainda mais poderoso.
Com o Google Lens, os usuários podem pesquisar mais informações sobre imagens clicando em uma foto de algo ou enviando uma imagem armazenada em seu telefone e, em seguida, pedindo ao Google para exibir resultados correspondentes.
Um recurso poderoso do Google Lens é a busca múltipla, que permite aos usuários adicionar descrições de texto às buscas por imagens, facilitando a busca por informações visuais.
O Google também está trabalhando para tornar a busca múltipla mais local, o que significa que os usuários podem apontar suas câmeras para algo, fazer o upload para o Google Lens, digitar algumas perguntas e o Google mostrará os melhores resultados próximos à sua localização atual.
Apesar de sua óbvia importância, as editoras frequentemente enfrentam dificuldades com a otimização de imagens devido a alguns desafios comuns.
Quando se trata de otimizar conteúdo para texto, os editores geralmente sabem quais parâmetros monitorar e otimizar — palavras-chave, pilares e agrupamentos de conteúdo, cabeçalhos e títulos, etc.
No entanto, quando se trata de otimização de imagens, os editores podem não estar cientes de quais métricas monitorar e melhorar. Métricas comuns incluem tamanho da imagem, tipo de imagem e velocidade de carregamento, para citar algumas.
A otimização constante de imagens para os diversos artigos que você cria pode se tornar uma tarefa tediosa. Embora existam maneiras de otimizar imagens em massa, como o uso de plugins e CDN, manter a qualidade da imagem também é fundamental. É um equilíbrio que exige testes rigorosos.
Agora que entendemos o que é otimização de imagens e por que ela é importante para SEO, podemos começar a analisar como realizar o processo de otimização.
PNG e JPEG são os dois formatos de imagem mais populares e universalmente suportados . Saber qual dos dois usar em cada situação é importante.
Embora o PNG funcione bem para capturas de tela, gráficos e imagens com texto, o JPEG é ideal para fotografias. O PNG utiliza compressão sem perdas, o que ajuda a preservar a qualidade da imagem, enquanto o JPEG reduz a qualidade da imagem a cada vez que ela é salva nesse formato.
O formato SVG (formato vetorial escalável) é ideal para logotipos e formas geométricas simples com baixa complexidade de imagem.
Formatos mais recentes, como WebP e AVIF, estão ganhando popularidade rapidamente como alternativas aos formatos mencionados anteriormente. Embora ambos os formatos ofereçam resolução de maior qualidade e suporte a animações, o WebP, em particular, é compatível com todos os navegadores modernos, tanto web quanto móveis.
No geral, porém, PNG e JPEG/JPG continuam sendo, de longe, os formatos de imagem mais populares, usados por 81,3% e 76,6% de todos os sites, respectivamente, com o SVG logo atrás, em novembro de 2022.
O tamanho total das imagens na sua página tem um impacto direto na velocidade de carregamento. No entanto, a compressão não deve resultar em qualidade de imagem inferior.
Encontrar o equilíbrio certo entre qualidade e tamanho é essencial, mas pode ser complicado se você tentar fazer isso por tentativa e erro. No entanto, é aí que as ferramentas online realmente se destacam. Ferramentas como o Imagemin podem ser usadas para comprimir imagens em vários formatos, tanto com perda de qualidade quanto sem perda.
Usar o formato certo também pode ajudar a encontrar o equilíbrio ideal. Por exemplo, considere usar o WebP. O WebP é uma alternativa melhor ao JPEG , pois oferece um tamanho de imagem 30% menor sem comprometer a qualidade e a resolução.
Se o WordPress for o seu CMS preferido, você pode usar plugins como Smush , Optimus ou Imsanity para otimizar suas imagens. Eles ajudam a comprimir, redimensionar, carregar imagens de forma assíncrona e muito mais. Você também pode considerar substituir imagens animadas, como GIFs (que podem ser grandes), por CSS. Animações e efeitos em CSS podem ajudar a criar imagens complexas que mantêm a integridade da resolução e a qualidade mesmo com zoom elevado.
O nome de uma imagem ajuda o Google a entender o contexto da imagem ao classificá-la nos resultados de pesquisa. Para publicações maiores, pode não ser viável nomear cuidadosamente todas as imagens do site. Nesse caso, você pode criar um sitemap de imagens que ajudará o Google a localizar a imagem, entender sua finalidade e indexá-la.
Além de nomes de arquivo contextuais, também recomendamos adicionar um título e uma legenda para a imagem. Embora esses atributos sejam opcionais, eles complementam seu conteúdo, proporcionando ao mecanismo de busca uma compreensão mais completa do seu tópico e tema, ajudando-o, assim, a indexar melhor a imagem .
Como fazer isso
Os nomes das imagens precisam ser adicionados ao código-fonte da sua página. Isso é feito usando o atributo `src` da imagem, seja manualmente ou por meio de um plugin do CMS.
Se a sua imagem contiver uma bola de futebol, o código para a origem da imagem deverá ser algo como isto:<img src=”football.jpg”/> , o que ajuda o Google a entender o conteúdo da imagem. Por outro lado, um código como este<img src=”IMG11082022.jpg”/> É vago e não oferece nenhum contexto.
Quando as pessoas não conseguem ver suas imagens — um problema para quem tem deficiência visual ou quando a baixa largura de banda dificulta a renderização das imagens — os atributos de texto alternativo (Alt Text) ajudam a descrever a imagem para elas. Isso também ajuda os mecanismos de busca a rastrear e indexar suas imagens com mais facilidade.
Como fazer isso
Continuando com o exemplo do ponto anterior, o código para o texto alternativo deve aparecer assim:<img src=”football.jpg” alt=""mundo" cup official football on the ground”/> .
Se você for um desenvolvedor experiente, pode adicionar o texto alternativo manualmente no código da sua página. Se você usa o WordPress, pode seguir estes passos:
Ao adicionar dados estruturados às suas imagens, você fornece ao Google as informações necessárias para listá-las como resultados avançados e snippets. Isso oferece aos usuários mais informações, ajudando-os a escolher em qual link clicar e, consequentemente, aumentando o tráfego para sua página.
Atualmente, o Google oferece suporte a dados estruturados para imagens em de produtos , vídeos e receitas .
Como fazer isso
O Google recomenda o uso de JSON-LD para criar scripts de dados estruturados para seu conteúdo e imagens.
É possível adicionar dados estruturados facilmente usando um dos vários plugins gratuitos ou pagos, como Schema Pro , Schema.press , etc. Seja adicionando dados estruturados de imagem manualmente ou por meio de um plugin, as etapas envolvem adicionar valores para todas as propriedades e tipos de dados relevantes da imagem , validar o código usando o teste de Resultados Avançados e, em seguida, implementá-lo enviando o sitemap de imagens para o Google para que ele possa rastrear e indexar as imagens.
Para entender melhor os dados estruturados e como utilizá-los, consulte nosso módulo sobre esquemas .
Para aprender como criar e enviar sitemaps, consulte nosso módulo detalhado sobre sitemaps do Google Notícias.
A experiência do usuário na página é um critério importante que o Google utiliza para classificar páginas. Um dos elementos que compõem a experiência do usuário é a velocidade de carregamento.
Veja como você pode otimizar imagens para melhorar a velocidade de carregamento da página:
Nesse método, apenas os recursos críticos são carregados inicialmente, enquanto outros recursos de baixa prioridade são carregados conforme a necessidade. Os benefícios do carregamento lento incluem a redução do tráfego de rede e dos problemas de largura de banda e custos de uso de dados associados, melhor legibilidade de páginas longas, redução do carregamento de imagens embutidas que não agregam valor ao conteúdo, etc.
Criar imagens responsivas
Os usuários visualizam imagens em diversos dispositivos. Implementar o atributo srcset para diferentes dispositivos permite que a imagem seja exibida de forma legível em telas de tamanhos variados. Aqui está um exemplo do código srcset da imagem:
Já abordamos os pontos essenciais da otimização de imagens. No entanto, os pontos listados abaixo também contribuem significativamente para a otimização de imagens para SEO.
Por mais imagens que existam, elas não compensam conteúdo de baixa qualidade. O foco principal deve ser o conteúdo que atenda às necessidades dos usuários. As imagens devem ser uma extensão natural desse conteúdo e utilizadas como auxílio na narrativa geral. Encher sua página com imagens irrelevantes ou sem relação com o conteúdo não melhorará seu posicionamento nos mecanismos de busca.
Pelo contrário, o Google se opõe a essas práticas e recomenda o uso de conteúdo original sempre que possível. Conteúdo de alta qualidade é a maneira mais segura de garantir que sua página tenha um bom posicionamento na Busca do Google, incluindo as imagens que você utiliza.
O conteúdo ao redor da imagem fornece informações vitais para os usuários e para o mecanismo de busca sobre a relevância da imagem. O Google recomenda posicionar a imagem mais importante próxima ao topo da página.
Embora haja debate sobre se as imagens posicionadas mais abaixo na página têm o mesmo peso que as do topo, o melhor é seguir as diretrizes do Google sobre o assunto.
É improvável que todos os seus esforços para otimizar imagens produzam resultados se elas não estiverem acessíveis ao Googlebot devido a configurações no arquivo robots.txt ou no-index.
Essas configurações indicam ao Google que não deve indexar ou rastrear seu conteúdo, o que significa que ele não aparecerá nos resultados de pesquisa. Você pode usar o recurso "Inspecionar URL" no Google Search Console para testar a acessibilidade do conteúdo e das imagens.
Além disso, recomendamos verificar se filtro do SafeSearch se aplica ao seu conteúdo. O SafeSearch é uma configuração do Google que permite ou bloqueia imagens com conteúdo explícito e exige que os sites rotulem o conteúdo adequadamente .
Os testes são importantes não apenas para a visibilidade do conteúdo, mas também para verificar como suas imagens serão exibidas em diferentes dispositivos antes de publicá-las na página. O Google também oferece conteúdo visual imersivo com histórias como parte do formato Web Stories . Embora esse formato seja projetado especificamente para oferecer conteúdo visual otimizado para dispositivos móveis, as imagens e o texto também aparecem no Google Imagens e no Discover. Você pode usar o recurso "Visualização para desenvolvedores" para testar seu conteúdo e criar uma narrativa mais envolvente.
Imagens livres de direitos autorais estão disponíveis em diversas fontes, como Pixabay, Unsplash e Pexels, para citar algumas. Embora o uso dessas imagens seja gratuito, lembre-se de que a mesma imagem pode ter sido utilizada por vários outros criadores de conteúdo.
Segundo John Mueller, do Google, isso pode dificultar o ranqueamento da imagem na busca de imagens do Google. Sempre que possível, tente usar imagens originais.
Além de seguir as orientações anteriores, também é importante evitar essas armadilhas comuns para otimizar melhor suas imagens.
Como mencionado anteriormente, usar um texto alternativo descritivo torna suas imagens mais acessíveis aos usuários. O Google levará em consideração os atributos do seu texto alternativo e tenderá a classificá-las em posições mais altas.
No entanto, é fácil se deixar levar pela tentação de incluir palavras-chave em excesso com o objetivo de obter uma boa classificação nos resultados de busca. Isso é conhecido como "keyword stuffing" (excesso de palavras-chave) e pode ser prejudicial aos seus esforços. Além de poder levar a uma experiência ruim para o usuário, o Google também pode considerar sua página como spam .
Aqui estão alguns exemplos de erros a evitar e de como usar o texto alternativo corretamente.
Veredito: Ruim, pois está faltando o atributo de texto alternativo.
Veredito: Ruim, devido ao excesso de palavras-chave.
Veredito: Bom, mas deveria ser mais descritivo.
Veredicto: Ideal
Embora o Google possua tecnologia de reconhecimento óptico de caracteres (OCR) integrada para ler o texto impresso em imagens, ela pode não ser 100% precisa em todos os casos. Além disso, tanto usuários quanto mecanismos de busca podem ter dificuldades para decifrar o texto incorporado na imagem.
Se você precisa transmitir informações importantes, é melhor usar texto em vez de uma imagem.
Provavelmente não será possível usar imagens originais em todos os casos. Nessas situações, você pode se sentir tentado a usar a busca do Google para encontrar novas imagens. No entanto, algumas dessas imagens podem ter direitos autorais, restringindo seu uso. Isso significa que você precisa verificar os termos de reutilização da imagem antes de usá-la em sua página.
O Google Imagens oferece um filtro chamado "Direitos de Uso" para buscar imagens que vêm com informações de licença atribuídas pelo site de hospedagem ou pelo provedor da imagem. Esse recurso está disponível na seção "Ferramentas", abaixo da caixa de pesquisa.
Após selecionar a imagem, você pode verificar os detalhes da licença para entender as implicações, os custos (se houver) e os requisitos de uso da imagem.
Como você pode ver na captura de tela acima, em "Direitos de Uso", as opções de licença Creative Commons e Comercial ou outras são exibidas.
Em geral, imagens com licença Creative Commons são gratuitas para uso, mas podem exigir que os créditos sejam dados e a fonte citada. Imagens com licença comercial geralmente têm um custo de uso. O Google recomenda revisar os detalhes da licença antes de usar qualquer imagem em sua página.
A configuração `max-image-preview` permite definir o tamanho máximo da pré-visualização da imagem quando ela aparece nos resultados de pesquisa. Se não houver um valor definido para essa configuração, o Google exibirá a imagem em seu tamanho padrão.
Embora isso se aplique a todas as plataformas do Google, como Imagens, Pesquisa e Discover, é mais pertinente ao usar o Discover, onde formatos maiores proporcionam uma experiência do usuário mais rica.
O uso do atributo `max image preview` comprovadamente melhora a taxa de cliques (CTR) e o tráfego para diversos editores. Esse atributo permite que o Google exiba imagens grandes na pré-visualização em seu tamanho original, sem tentar comprimi-las ou alterar suas configurações. Ter imagens grandes e de alta qualidade na pré-visualização aumenta a probabilidade de despertar o interesse dos usuários.
As redes de distribuição de conteúdo (CDNs) são plataformas de hospedagem terceirizadas que funcionam como repositórios de imagens e outros arquivos de mídia. Graças à sua infraestrutura avançada, focada em latência e largura de banda, elas podem oferecer velocidades de carregamento de página mais rápidas do que o conteúdo hospedado internamente. No entanto, os benefícios de uma CDN precisam ser avaliados de acordo com as suas necessidades específicas.
Embora uma CDN possa ajudar a resolver alguns problemas técnicos, ela pode prejudicar seu perfil de backlinks. Backlinks são um dos fatores de SEO mais importantes e são valiosos para a aparência do seu site nos resultados de busca. Você pode aprender mais sobre o valor dos backlinks em nosso módulo sobre o assunto.
Ao hospedar uma imagem em uma CDN em vez de em seu próprio site, quaisquer backlinks para ela levarão o usuário ao caminho da imagem na CDN, reduzindo assim as visitas diretas ao seu site que um backlink eficaz teria proporcionado.
Um pacote de imagens é uma colagem de imagens de diferentes sites que podem aparecer nos resultados de pesquisa do Google. Eles têm uma aparência semelhante a esta.
Ao clicar em qualquer uma das miniaturas, você não é automaticamente redirecionado para o site de origem. Em vez disso, uma janela do Google Imagens é exibida com uma versão ampliada da imagem, como esta.
Somente ao clicar na imagem novamente — como mostrado no painel direito da captura de tela acima — você sairá do Google e chegará à página original. Em outras palavras, o Google Imagens atua como intermediário antes que o redirecionamento seja concluído.
Se a sua imagem fizer parte de um pacote de imagens, o Google Search Console (GSC) registrará uma impressão para essa imagem sempre que o pacote for carregado em uma página de resultados de pesquisa (SERP). Isso ocorre graças ao atributo `title` da sua tag de imagem, que contém o seu URL.
Mas, embora você possa registrar um grande número de impressões, o número real de cliques no seu site provavelmente será muito menor, devido ao fato de os pacotes de imagens conterem links de refinamento de consulta que geram um novo resultado de pesquisa de imagens do Google, em vez de direcionar os usuários para fora da plataforma.
Devido à forma como os links de refinamento de pesquisa funcionam, bem como à maneira como o Google Search Console contabiliza impressões e cliques, os pacotes de imagens podem distorcer drasticamente sua taxa de cliques (CTR) para imagens.
Agora, vamos analisar um estudo de caso de um site para desconstruir como ele implementou as diretrizes mencionadas neste módulo para otimizar imagens.
Kirbie Cravings é um blog de culinária de San Diego que já publicou centenas de receitas em seu site. Cada receita é acompanhada por imagens vibrantes e de alta qualidade.
Ao clicarmos com o botão direito do mouse na página e visualizarmos seu código-fonte, vemos o atributo max-image-preview:large no<head> elemento logo no início do código-fonte.
Como resultado, as imagens de alta qualidade da editora aparecem nas pré-visualizações nas plataformas do Google.
Ao mesmo tempo, apesar de serem grandes, essas imagens não tornam o carregamento da página mais lento.
Clicamos com o botão direito do mouse na imagem e selecionamos "Inspecionar". Isso abre um painel no lado direito da página, no qual podemos inspecionar as propriedades do elemento selecionado. Vemos o seguinte para a imagem acima:
Observamos aqui duas coisas interessantes:
Como já discutimos anteriormente, as imagens contribuem significativamente para o tamanho do arquivo de uma página, portanto, mantê-las leves é essencial para acelerar o carregamento da página.
Também discutimos a importância de usar o formato de arquivo correto. Recomendamos .jpg/.jpeg para fotografias, enquanto .png deve ser usado para gráficos e imagens digitais. Podemos ver abaixo que a Kirbie Cravings usa .png sempre que utiliza imagens digitais, como logotipos e ícones.
Em seguida, dentro desse mesmo painel de inspeção, ao clicarmos em “Propriedades”, podemos ver que a página utilizou carregamento lento (lazy loading), apesar do tamanho relativamente leve das imagens.
Esta página otimizou meticulosamente suas imagens da seguinte forma:
À medida que evolui para melhor atender às necessidades de seus usuários, o Google certamente adicionará/atualizará recursos e políticas relacionados à otimização de imagens e seu impacto nos resultados de pesquisa.
Ao manter em mente as melhores práticas atuais de imagem para o seu site, você estará em melhor posição para oferecer a melhor experiência do usuário (UX), alcançar posições mais altas nos resultados de busca (SERPs) e, consequentemente, atrair mais tráfego para o seu site.
Ativo agora
Veja mais
