Image SEO

Image Seo

Esta skill capacita o Claude a otimizar imagens digitalmente para SEO, focando em performance, visibilidade em buscas e experiência do usuário.

Keywords

otimização de imagens, alt text, lazy loading, srcset, webP, schema markup imagem, compressão de imagem, nome de arquivo imagem, imagem responsiva, sitemap de imagens, CDN imagens, Core Web Vitals imagens, LCP imagem, CLS imagem.

Quick Start

1. Comprimir Imagens Existentes: Utilize TinyPNG ou Squoosh para reduzir o tamanho de todas as imagens, priorizando o formato WebP.
2. Renomear Arquivos Descritivamente: Altere nomes genéricos como IMG001.jpg para tenis-corrida-masculino-nike-air.webp antes de subir.
3. Preencher Alt Text Otimizado: Adicione descrições concisas e ricas em palavras-chave no atributo alt de cada imagem.
4. Implementar Lazy Loading: Ative o carregamento preguiçoso para imagens fora da dobra, utilizando loading="lazy" ou um plugin.
5. Especificar Dimensões: Adicione os atributos width e height para todas as tags <img> e picture.

Core Workflows

Workflow 1: Otimização de Imagens para Produtos de E-commerce

Este workflow foca em garantir que as imagens de produtos contribuam para a visibilidade em buscas de produtos e melhorem a experiência de compra.

Passos Detalhados:

1. Padronização de Dimensionamento e Formato:

   • Dimensão: Defina uma largura máxima padrão para imagens de produto (ex: 1200px para a imagem principal, 800px para miniaturas). Mantenha a proporção original.
   • Formato: Priorize WebP para todas as imagens. Se não for possível, utilize JPEG progressivo com compressão entre 80-85%.
   • Ferramentas: Use ferramentas como Squoosh (web), ImageOptim (macOS) ou plugins de CMS (ex: Imagify para WordPress) para automação.
   • Exemplo: Uma imagem de 1920x1080px deve ser redimensionada para 1200px de largura (mantendo a proporção) e convertida para .webp.

2. Nomenclatura de Arquivos Otimizada:

   • Formato: Use hífens para separar palavras, minúsculas e inclua a palavra-chave principal do produto, SKU e, se relevante, cor ou modelo.
   • Evitar: Nomes genéricos, caracteres especiais, espaços.
   • Exemplo: Em vez de DSC00123.jpg, use tenis-corrida-nike-air-zoom-pegasus-38-azul-sku12345.webp.

3. Preenchimento de Alt Text Estratégico:

   • Objetivo: Descrever a imagem de forma concisa para usuários cegos e mecanismos de busca, incluindo a palavra-chave principal do produto.
   • Conteúdo: A descrição deve ser natural e não uma lista de palavras-chave.
   • Exemplo: <img src="tenis-corrida-nike-air-zoom-pegasus-38-azul-sku12345.webp" alt="Tênis de corrida masculino Nike Air Zoom Pegasus 38 azul, vista lateral">. Para diferentes ângulos, varie a descrição: alt="Detalhe da sola do Tênis Nike Air Zoom Pegasus 38".

4. Implementação de Imagens Responsivas (srcset e sizes):

   • Objetivo: Entregar o tamanho de imagem mais adequado para cada dispositivo, melhorando a velocidade de carregamento.
   • Uso: Utilize os atributos srcset e sizes na tag <img>.
   • Exemplo:

     <img src="tenis-corrida-padrao.webp"
          alt="Tênis de corrida masculino Nike Air Zoom Pegasus 38 azul"
          width="1200" height="800"
          srcset="tenis-corrida-320w.webp 320w,
                  tenis-corrida-640w.webp 640w,
                  tenis-corrida-1200w.webp 1200w"
          sizes="(max-width: 600px) 320px,
                 (max-width: 1024px) 640px,
                 1200px">
     

5. Uso de Schema Markup para Produtos:

   • Objetivo: Fornecer dados estruturados aos mecanismos de busca, aumentando a chance de rich results na busca de imagens e produtos.
   • Implementação: Inclua a propriedade image dentro do Product Schema.
   • Exemplo: Veja o template de Schema Markup abaixo.

Workflow 2: Otimização Semântica de Imagens para Conteúdo (Blogs/Artigos)

Este workflow otimiza imagens inseridas em artigos de blog ou páginas de conteúdo, visando relevância contextual e performance.

Passos Detalhados:

1. Seleção e Contextualização da Imagem:

   • Relevância: Escolha imagens que complementem e ilustrem o texto adjacente, não apenas decorativas.
   • Qualidade: Prefira imagens de alta resolução e relevância visual para o tópico do parágrafo.
   • Exemplo: Em um artigo sobre "Melhores Estratégias de SEO 2024", insira um infográfico sobre "SEO On-Page Checklist" ao lado da seção correspondente.

2. Dimensionamento e Compressão para Conteúdo:

   • Dimensão: Redimensione imagens para se adequarem à largura do layout do conteúdo (ex: 800px para imagens de corpo de texto, 1200px para imagens de destaque).
   • Compressão: Use WebP sempre que possível. Para gráficos e ilustrações com poucas cores, PNG otimizado pode ser uma alternativa, mas WebP é preferencial.
   • Exemplo: Um gráfico explicando um conceito de marketing digital deve ter 800px de largura e ser salvo como grafico-ciclo-de-vida-cliente.webp.

3. Nomenclatura de Arquivos com Palavras-Chave de Conteúdo:

   • Formato: Use palavras-chave relevantes ao tema do artigo ou parágrafo onde a imagem está inserida.
   • Exemplo: Para um gráfico em um artigo sobre "SEO Técnico", use auditoria-seo-tecnico-checklist.webp. Evite grafico1.webp.

4. Alt Text Descritivo e Semântico:

   • Objetivo: Descrever o conteúdo visual da imagem de forma útil, incorporando palavras-chave do contexto do artigo.
   • Conteúdo: Vá além da simples descrição. Pense no que a imagem representa para o leitor e para o tópico.
   • Exemplo: Para uma imagem de um gráfico: alt="Gráfico de barras mostrando o crescimento do tráfego orgânico após a implementação de SEO técnico em um site de e-commerce".

5. Uso de Legendas (Captions):

   • Objetivo: Fornecer contexto adicional visível para o usuário, que também pode ser lido pelos mecanismos de busca, reforçando a relevância da imagem.
   • Implementação: Use a tag <figcaption> dentro de <figure>.
   • Exemplo:

     <figure>
       <img src="auditoria-seo-tecnico-checklist.webp" alt="Checklist para auditoria de SEO técnico com 15 itens principais" width="800" height="500">
       <figcaption><em>Checklist detalhado para a realização de uma auditoria completa de SEO técnico em seu website.</em></figcaption>
     </figure>
     

6. Lazy Loading para Todas as Imagens Fora da Dobra:

   • Objetivo: Melhorar o Largest Contentful Paint (LCP) e o tempo total de carregamento da página, carregando imagens apenas quando o usuário rola a página até elas.
   • Implementação: Adicione loading="lazy" à tag <img>.
   • Exemplo: <img src="imagem-do-meio-do-artigo.webp" alt="..." loading="lazy" width="800" height="600">.

Templates

Nome de Arquivo e Alt Text para Produto (Exemplo: Blusa Feminina)

Nome do arquivo: blusa-feminina-malha-algodao-azul-marinho-p-sku789.webp
Alt Text: Blusa feminina de malha de algodão azul marinho, tamanho P, vista frontal

Schema Markup para Imagem (dentro de Product Schema)

{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Smartphone Samsung Galaxy S24 Ultra 5G 512GB",
  "image": [
    "https://www.exemplo.com.br/imagens/galaxy-s24-ultra-frontal-titanio-preto.webp",
    "https://www.exemplo.com.br/imagens/galaxy-s24-ultra-traseira-titanio-preto.webp",
    "https://www.exemplo.com.br/imagens/galaxy-s24-ultra-lateral-caneta.webp"
   ],
  "description": "O novo Samsung Galaxy S24 Ultra 5G com inteligência artificial Galaxy AI, câmera de 200MP e S Pen integrada na cor Titânio Preto.",
  "sku": "SM-S928BZKLZTO",
  "brand": {
    "@type": "Brand",
    "name": "Samsung"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://www.exemplo.com.br/produto/galaxy-s24-ultra-512gb",
    "priceCurrency": "BRL",
    "price": "7299.00",
    "itemCondition": "https://schema.org/NewCondition",
    "availability": "https://schema.org/InStock"
  }
}

Checklist

• Imagens comprimidas para WebP ou JPEG progressivo (<150KB para a maioria)?
• Nomes de arquivo são descritivos, em minúsculas, com hífens e palavras-chave?
• Alt text preenchido em todas as imagens com descrições relevantes e palavras-chave (não stuffing)?
• Atributos srcset e sizes implementados para imagens responsivas?
• Lazy loading ativado para todas as imagens fora da dobra da página (loading="lazy")?
• Imagens principais (LCP) com preload implementado?
• Dimensões de imagem explícitas (width e height) na tag HTML?
• Imagens incluídas no sitemap XML de imagens, se aplicável?
• URLs de imagem são amigáveis, consistentes e estruturadas?
• Schema Markup (Product, Article, ImageObject) referenciando as imagens?
• Legendas (captions) utilizadas para contextualizar imagens em artigos?
• Conteúdo visual relevante ao texto adjacente, não apenas decorativo?

Métricas de Referência

Erros Comuns

1. Alt text genérico ou ausente: Utilizar alt="imagem" ou deixar o atributo vazio. Isso impede que os mecanismos de busca e leitores de tela compreendam o contexto da imagem.

   • Como evitar: Descreva o conteúdo visual da imagem de forma concisa e inclua palavras-chave relevantes.
   • Exemplo: Em vez de <img src="grafico.webp" alt="imagem">, use <img src="grafico-desempenho-seo.webp" alt="Gráfico de barras mostrando o desempenho de SEO do último trimestre com aumento de tráfego">.

2. Imagens não comprimidas ou em formato pesado: Uploadar imagens em formatos como PNG para fotos complexas ou JPEG sem otimização, resultando em arquivos grandes que atrasam o carregamento da página.

   • Como evitar: Converta imagens para WebP sempre que possível. Para JPEGs, use compressão de 80-85%. Use ferramentas como Squoosh, TinyPNG ou plugins de otimização de imagem.
   • Exemplo: Evite imagens de 2MB. Otimize para que fiquem abaixo de 150KB para a maioria dos casos.

3. Não especificar dimensões (width, height) no HTML: Isso causa o "Cumulative Layout Shift" (CLS), pois o navegador precisa recalcular o layout da página após o carregamento das imagens.

   • Como evitar: Sempre inclua os atributos width e height nas tags <img> e <picture>.
   • Exemplo: Em vez de <img src="produto.webp" alt="Produto">, use <img src="produto.webp" alt="Produto" width="800" height="600">.

Dicas Avançadas

1. CDNs Otimizados para Imagens: Implemente um CDN (Content Delivery Network) que ofereça otimização automática de imagens (ex: Cloudinary, Imgix, Akamai). Esses serviços podem redimensionar, comprimir e converter imagens para o formato ideal (ex: WebP) em tempo real, baseado no dispositivo e navegador do usuário, além de entregá-las a partir do servidor mais próximo.

   • Exemplo: Ao invés de dominio.com/img/original.jpg, use cloudinary.com/minha-conta/image/upload/f_auto,q_auto,w_800/original.jpg.

2. Sitemap de Imagens Dedicado: Para sites com um grande volume de imagens (e-commerce, galerias de fotos), crie um sitemap XML exclusivo para imagens. Isso ajuda o Google a descobrir e indexar todas as suas imagens de forma mais eficiente, especialmente aquelas que não estão diretamente ligadas a uma página indexável.

   • Estrutura: <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"><url><loc>https://www.exemplo.com.br/pagina-do-produto.html</loc><image:image><image:loc>https://www.exemplo.com.br/imagens/produto-principal.webp</image:loc><image:title>Smartphone X</image:title><image:caption>Smartphone X com tela OLED</image:caption></image:image></url></urlset>.

3. Preload de Imagens LCP: Identifique a imagem que contribui para o Largest Contentful Paint (LCP) da sua página e adicione um link rel="preload" no cabeçalho HTML. Isso instrui o navegador a carregar essa imagem com alta prioridade, melhorando significativamente a métrica LCP.

   • Exemplo: <link rel="preload" as="image" href="/imagens/hero-banner-otimizado.webp"> (coloque antes de qualquer tag de script bloqueadora).

4. Uso da Tag <picture> para Controle Fino de Formatos/Resoluções: A tag <picture> oferece controle granular sobre a entrega de diferentes formatos de imagem (ex: WebP para navegadores modernos, JPEG para fallback) ou diferentes resoluções para diferentes viewports, garantindo a melhor imagem para cada cenário.

   • Exemplo:

     <picture>
       <source srcset="imagem-desktop.webp" media="(min-width: 1024px)" type="image/webp">
       <source srcset="imagem-mobile.webp" media="(max-width: 1023px)" type="image/webp">
       <source srcset="imagem-desktop.jpg" media="(min-width: 1024px)" type="image/jpeg">
       <source srcset="imagem-mobile.jpg" media="(max-width: 1023px)" type="image/jpeg">
       <img src="imagem-fallback.jpg" alt="Descrição da imagem responsiva" width="1200" height="800">
     </picture>
     

5. Análise e Monitoramento com Lighthouse e Search Console: Use o Google Lighthouse para auditar regularmente o desempenho das imagens em suas páginas, prestando atenção às recomendações de "Properly size images", "Defer offscreen images", e "Serve images in next-gen formats". Monitore o relatório "Experiência da página" no Google Search Console para identificar problemas de Core Web Vitals relacionados a imagens.