Fri Mar 27 2026 20:00:00 GMT-0400 (北美东部夏令时间)

Tamanho de Imagem e Checklist de Pré-visualização do Twitter Card

Escolha o tamanho correto da imagem do Twitter card, metadados, exportação WebP e verificações de solução de problemas para que links compartilhados sejam exibidos perfeitamente no X e outras redes sociais.

Tamanho de Imagem e Checklist de Pré-visualização do Twitter Card

Última atualização: June 28, 2026

Uma imagem de cartão Twitter é a imagem de pré-visualização que aparece quando alguém compartilha um URL no X. Ela deve ser grande o suficiente para parecer nítida, pequena o suficiente para os crawlers buscarem rapidamente e declarada com metadados que funcionem mesmo quando uma plataforma recorrer às tags Open Graph.

Este guia fornece uma checklist prática de publicação: dimensões, tags, formato do arquivo, verificações de CDN e correções para cartões que se recusam a atualizar.

Resposta rápida: qual imagem de cartão Twitter você deve usar?

Use um WebP ou JPEG de 1200 por 630 pixels para a maioria dos links compartilhados, especialmente quando você deseja um grande cartão de imagem. Mantenha o assunto importante longe das bordas, faça o texto ser legível no tamanho miniatura e use um URL HTTPS absoluto tanto em twitter:image quanto em og:image.

Para X, defina twitter:card como summary_large_image quando a imagem for o destaque principal. Mantenha o arquivo confortavelmente abaixo dos limites documentados de imagem de cartão e verifique se o URL final do CDN retorna HTTP 200 antes de publicar.

A configuração confiável é simples:

  • Exporte uma imagem de 1200 por 630 pixels para a pré-visualização.
  • Use um URL final do CDN, não um caminho relativo.
  • Adicione twitter:title, twitter:description e twitter:image.
  • Adicione os correspondentes og:title, og:description e og:image como fallback.
  • Teste o URL ao vivo após a implantação, e depois atualize os caches da plataforma se a imagem antiga ainda aparecer.

O que é uma imagem de cartão Twitter?

Uma imagem de cartão Twitter é o URL de imagem declarado nos metadados da página para que o X possa construir uma pré-visualização rica. Não é a mesma coisa que a primeira imagem do seu artigo. Um crawler lê o cabeçalho HTML, encontra as tags de cartão, busca a imagem e armazena uma pré-visualização em cache para o URL compartilhado.

Os próprios exemplos de marcação de cartão do X ainda descrevem os tipos de cartão summary e summary_large_image em sua documentação e exemplos para desenvolvedores. A diferença prática é o tamanho da pré-visualização: summary_large_image dá à imagem espaço suficiente para carregar um blog, produto, ferramenta ou link de campanha.

Open Graph é importante porque muitas plataformas sociais, aplicativos de chat e sistemas de pré-visualização de links leem og:image. O Protocolo Open Graph define og:title, og:type, og:image e og:url como metadados centrais. Use tanto as tags Twitter/X quanto as tags Open Graph para que um parser ausente não quebre todas as pré-visualizações.

Campo de metadado Para usar Nota prática
twitter:card Escolhe o layout summary ou large-image Use summary_large_image para a maioria dos compartilhamentos de artigos e páginas de destino
twitter:image Imagem principal de pré-visualização do X Use um URL de imagem HTTPS absoluto
og:image Imagem de pré-visualização fallback para aplicativos sociais e de mensagens Geralmente corresponder a twitter:image, a menos que uma plataforma precise de um corte diferente
og:url URL canônico para a página compartilhada Corresponda ao URL da página canônica pública
tags title e description Contexto do navegador e busca Mantenha-as consistentes com os metadados sociais

Para trabalhos de metadados de imagem relacionados, combine isso com o guia Image Optimization for SEO e a Complete Image Optimization Checklist.

Qual tamanho deve ter uma imagem de cartão Twitter?

Comece com 1200 por 630 pixels. Isso corresponde ao corte comum de pré-visualização social de 1.91:1, dá às plataformas pixels suficientes para redimensionar de forma limpa e funciona bem quando a mesma imagem é reutilizada como og:image.

Evite projetar um cartão que só funcione no tamanho completo. Feeds cortam, redimensionam e colocam texto ao redor da imagem. Rótulos pequenos, capturas de tela finas de UI e fundos movimentados muitas vezes parecem bons em uma ferramenta de design, mas se tornam ilegíveis em um cartão de compartilhamento real.

Gráfico mostrando uma imagem de cartão Twitter de 1200 por 630 pixels com WebP, tamanho do arquivo, HTTPS e notas de design seguro nas bordas

Caso de uso Imagem recomendada Por que funciona Fique atento a
Artigo ou guia de blog WebP de 1200 x 630 Corte de pré-visualização grande, ampla compatibilidade com plataformas Texto de título pequeno demais
Lançamento de produto WebP ou JPEG de 1200 x 630 O produto permanece visível após o redimensionamento Cortar a borda do produto
Página de ferramenta Gráfico baseado em captura de tela de 1200 x 630 Mostra o que a ferramenta faz antes do clique Texto da UI muito pequeno para ler
Página apenas com logo 1200 x 630 com preenchimento generoso Impede que o logo pareça apertado Pré-visualização com aparência vazia
Campanha amigável ao quadrado Variante separada de 1200 x 1200 quando necessário Útil para plataformas com cortes quadrados Não reutilizá-lo cegamente como cartão X

Use o artigo Best Image Resizer for Social Media quando precisar de vários cortes para diferentes plataformas e use Facebook Ad Image Sizes quando o mesmo material criativo também alimentar mídias sociais pagas.

Como você escreve os metadados?

Coloque as tags em HTML renderizado no servidor, dentro do <head> da página. Não dependa de JavaScript client-side para injetar tags sociais após o carregamento. Crawlers de pré-visualização de links podem não executar seu aplicativo da mesma forma que um navegador faz.

Diagrama de metadados de três linhas mostrando tags twitter card, twitter image e open graph image para pré-visualizações sociais

Use este padrão para um artigo ou página de ferramenta normal:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size and Preview Checklist">
<meta name="twitter:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta name="twitter:image" content="https://cdn.example.com/blog/twitter-card-image.webp">

<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size and Preview Checklist">
<meta property="og:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta property="og:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:url" content="https://example.com/blog/twitter-card-image">

Mantenha estas verificações na revisão de código:

  1. O URL da imagem é absoluto e começa com https://.
  2. O URL da imagem é o URL final do CDN, não um caminho de build local.
  3. O título da página e o título social descrevem a mesma página.
  4. A descrição social é curta o suficiente para ser escaneada em uma pré-visualização.
  5. O URL canônico e og:url apontam para a mesma página pública.
  6. A imagem do cartão não está bloqueada por robots.txt, autenticação ou regras de hotlink.
  7. A resposta do servidor inclui um tipo de conteúdo de imagem correto.

O guia de SEO de imagens do Google também recomenda contexto descritivo da imagem, URLs de imagem rastreáveis e formatos suportados em Google Images best practices. Esse conselho não é específico do Twitter, mas é a mesma disciplina de publicação: tornar fácil para os crawlers descobrir, buscar e entender a imagem importante.

Você deve usar WebP, JPEG ou PNG para uma imagem de cartão Twitter?

Use WebP quando sua plataforma e os alvos de pré-visualização o suportarem, especialmente para gráficos de artigos, pré-visualizações de produtos e capturas de tela com cores mistas. Use JPEG para ampla compatibilidade ou cartões com muitas fotos. Use PNG apenas quando a transparência ou bordas sem perdas forem importantes o suficiente para justificar o arquivo maior.

O guia de tipos de arquivos de imagem da MDN explica que WebP suporta compressão tanto com perdas quanto sem perdas. Essa flexibilidade é útil para cartões sociais porque uma única imagem pode conter textura fotográfica, cor sólida de marca e texto.

Para este artigo, eu codifiquei e testei quatro gráficos WebP de 1200 por 630 pixels localmente com ImageMagick e verifiquei os tamanhos de saída antes de publicar. Eles ficaram entre 14 KB e 28 KB porque são gráficos limpos com textura limitada. Fotos de produtos reais e capturas de tela detalhadas geralmente serão maiores.

Formato Bom para Risco típico Ponto de partida prático
WebP A maioria dos gráficos de pré-visualização social e cartões de imagem mistos Algumas ferramentas mais antigas podem não visualizar rascunhos locais Exporte WebP com perdas em torno da qualidade 80-85
JPEG Pré-visualizações com muitas fotos e necessidades conservadoras de compatibilidade Sem transparência, possível halo ao redor do texto Exporte em torno da qualidade 82-88
PNG Logos, transparência, gráficos planos nítidos Tamanho de arquivo grande Use apenas quando sem perdas for necessário
AVIF Imagens modernas muito pequenas O ecossistema de pré-visualização pode ser menos previsível Teste cuidadosamente antes de usar como a única imagem do cartão

Se a imagem do cartão também for um hero da página, siga o guia Image Compression Ratio para que a pré-visualização pareça limpa sem tornar a página pesada. Se estiver comparando formatos modernos, leia AVIF vs WebP Comparison.

Como você torna a imagem legível no feed?

Projete o cartão para o menor lugar onde ele será visto, não para a área de trabalho do seu editor. Uma pré-visualização de feed pode ser mais estreita que o original e a UI circundante compete pela atenção.

Use estas regras de design:

  • Coloque o assunto principal ou o título na área segura central.
  • Deixe preenchimento ao redor de rostos, produtos, logos e texto.
  • Use uma mensagem curta, não um título completo do artigo mais subtítulo mais selo.
  • Verifique a imagem com 600 pixels de largura antes de aprovar.
  • Evite capturas de tela com rótulos minúsculos, a menos que a própria UI seja a história.
  • Mantenha o contraste alto o suficiente para um olhar rápido.
  • Não use uma imagem de estoque genérica quando a página for sobre uma ferramenta, produto ou fluxo de trabalho técnico.

Uma imagem de cartão útil deve responder "sobre o que é este link?" antes que o leitor estude o título. Para um artigo de blog, pode ser um diagrama simples. Para um guia de e-commerce, pode ser um exemplo de foto de produto. Para um conversor ou redimensionador, pode ser uma captura de tela da ferramenta recortada.

Por que minha imagem de cartão Twitter não está aparecendo?

A maioria das imagens de cartões quebradas vem de uma das quatro causas: o crawler não consegue buscar o URL, os metadados apontam para a imagem errada, a plataforma armazenou em cache uma versão antiga ou a imagem é tecnicamente válida, mas um candidato de pré-visualização ruim.

Gráfico de checklist de solução de problemas mostrando URLs de imagem relativos, bloqueios de crawler, cartões cacheados obsoletos e arquivos grandes demais

Execute esta sequência antes de alterar o material criativo:

  1. Abra a fonte da página final e confirme se a tag twitter:image existe.
  2. Copie o URL exato da imagem do HTML renderizado.
  3. Execute curl -I contra o URL da imagem e confirme HTTP 200.
  4. Confirme que o tipo de conteúdo da resposta é um tipo de imagem.
  5. Verifique se o URL da imagem não está redirecionado através de uma parede de autenticação.
  6. Certifique-se de que o arquivo de imagem não é enorme.
  7. Confirme que robots.txt não bloqueia a imagem ou a página.
  8. Mude o nome do arquivo da imagem quando precisar forçar um cache novo.
  9. Re-teste a página implantada, não um URL de pré-visualização local.
  10. Verifique as tags Open Graph se o cartão funcionar em um aplicativo, mas não em outro.
Sintoma Causa provável Correção
Nenhuma imagem aparece twitter:image faltando ou relativo Use um URL CDN HTTPS completo
Imagem antiga aparece Pré-visualização cacheada Publique um novo nome de arquivo e atualize o URL compartilhado
A imagem aparece cortada mal Composição insegura Reexportar com mais preenchimento e um assunto central
O título da pré-visualização está errado Descasamento de metadados Alinhar twitter:title, og:title e o título da página
Funciona localmente, mas não ao vivo Caminho local, autenticação ou CDN bloqueado Testar o URL de produção com curl -I

O Crop Image Online Guide é útil quando o assunto precisa de um corte mais seguro, e Image Aspect Ratio Changer cobre a mudança de material criativo de quadrado ou retrato para um quadro de pré-visualização social.

Checklist pré-publicação

Antes de enviar uma página que depende do compartilhamento social, revise a imagem e os metadados juntos. Um arquivo WebP perfeito ainda falhará se a tag apontar para o URL de ontem. Metadados perfeitos ainda decepcionarão se a imagem for ilegível no feed.

Use esta checklist final:

  • O frontmatter ou a imagem do CMS é a mesma imagem usada para metadados sociais.
  • A imagem é única da página ou claramente relevante para a página.
  • O URL da imagem é HTTPS e público.
  • A extensão do arquivo corresponde ao formato de resposta real.
  • A imagem retorna HTTP 200 do CDN.
  • O título e a descrição não estão cheios de palavras-chave.
  • A imagem de pré-visualização tem texto alternativo descritivo onde aparece no corpo do artigo.
  • A imagem é verificada visualmente em tamanhos de pré-visualização desktop e mobile.
  • A página tem um URL canônico estável.
  • O cartão é retestado após a implantação.

Uma boa imagem de cartão Twitter é um pequeno sistema de publicação: um visual claro, metadados estáveis, um URL CDN rápido e uma verificação final de busca. Uma vez que essas peças estejam no lugar, a pré-visualização tem muito menos probabilidade de falhar durante um lançamento ou atualização de conteúdo.

Use as ferramentas gratuitas enquanto segue o guia.

Comprimir uma imagemRemover um fundo

Continue lendo