Guia de prévia social
Imagens Open Graph: teste o link antes de publicar
Imagens Open Graph definem como sua página aparece quando alguém compartilha um link. Este guia mostra tamanho prático, tags, checagens de design, correções de cache e checklist para manter prévias úteis.
Resposta rápida
Escolha uma imagem Open Graph e teste o link antes de compartilhar
Para a maioria das páginas, comece com uma imagem 1200 x 630, mantenha textos e logos importantes longe das bordas, use URLs absolutas HTTPS e teste a URL final nas ferramentas de depuração da plataforma. Esse fluxo simples evita prévias quebradas.
Função da prévia
Trate a imagem Open Graph como um ativo da página
A imagem Open Graph não é decoração. Ela representa a página quando crawlers criam um cartão de link para redes sociais, apps de chat e ferramentas de trabalho. Deve combinar com o título, descrição, tema visível e imagem dos dados estruturados.
Vende o clique
A imagem, título e descrição formam a primeira impressão antes do visitante acessar sua página.
Deve combinar com o conteúdo
Uma boa imagem de prévia combina com o título da página, o tema visível e a principal promessa ao usuário, em vez de usar um gráfico genérico da marca.
Pertence aos dados de SEO
Imagens Open Graph, imagens do Twitter card, URLs canônicas e imagens JSON-LD devem descrever a mesma página.
Precisa de uma regra de nomeação
Um nome de arquivo claro e uma regra de atualização evitam caches desatualizados e imagens antigas de campanhas retornando depois.
Plano de tamanho
Escolha dimensões que resistam às prévias reais
Plataformas diferentes cortam e armazenam prévias de formas ligeiramente diferentes. Um arquivo 1200 x 630 é um padrão forte para prévias Open Graph, mas a regra mais segura é projetar com uma área segura centralizada e testar a URL final nas plataformas importantes para a página.
| Plataforma ou uso | Plano prático de imagem | Fique atento a | Verificação antes da publicação |
|---|---|---|---|
| Open Graph geral | Use 1200 x 630 como padrão prático para uma imagem grande de compartilhamento. | Imagens pequenas podem parecer desfocadas ou aparecer como miniaturas menores. | Veja a URL final no depurador da plataforma antes de compartilhar. |
| Facebook e LinkedIn | Use a mesma imagem no estilo 1,91:1, a menos que a página precise de um ativo específico da plataforma. | As bordas podem ser cortadas de forma diferente em layouts de feed e dispositivos. | Mantenha textos e logos importantes dentro da área segura central. |
| Cartão X grande | Use summary_large_image e mantenha o visual centralizado; o X suporta uma imagem larga para cartão grande. | Textos pequenos e detalhes nas bordas podem desaparecer quando o cartão é cortado ou redimensionado. | Defina twitter:image e teste com as ferramentas de cartão do X. |
| Apps de chat e ferramentas de trabalho | Mantenha o arquivo pequeno e o design simples porque prévias aparecem em painéis compactos. | Capturas de tela carregadas, títulos longos e baixo contraste ficam ilegíveis rapidamente. | Cole o link final nas ferramentas que seu público realmente usa. |
Mantenha a mensagem principal no centro da imagem. As bordas são áreas de risco porque cartões de feed, prévias de chat e layouts móveis podem cortar diferente.
HTML
Defina as tags que os crawlers precisam antes da página ser publicada
Tags Open Graph pertencem ao head do HTML. Use URLs absolutas de imagem, declare largura e altura, adicione texto alt útil e mantenha a URL canônica consistente com a página que os usuários realmente compartilharão.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| Tag | Por que isso importa | Erro comum |
|---|---|---|
| og:image | Aponta os crawlers para a imagem que deve representar a página. | Usar um caminho relativo ou uma imagem bloqueada por login, redirecionamentos ou regras de robots. |
| og:image:width / og:image:height | Informa às plataformas o tamanho da imagem antes de buscar e inspecionar o arquivo. | Omitir dimensões e deixar cada crawler adivinhar como renderizar a prévia. |
| og:image:alt | Descreve a imagem da prévia para acessibilidade e dá mais contexto aos crawlers. | Repetir o título da página em vez de descrever o que é visível na imagem. |
| og:url | Conecta a prévia à URL canônica da página que deve ser compartilhada. | Usar uma URL de rastreamento, staging ou com cultura errada como identidade permanente da página. |
| twitter:card / twitter:image | Dá ao X uma instrução explícita para cartão grande e imagem opcional específica da plataforma. | Assumir que o X sempre renderizará a imagem Open Graph exatamente como outras plataformas. |
Se você usa Blazor, o Componente de Metadados SEO para Blazor mantém as tags Open Graph, tags do Twitter card, URLs canônicas e metadados JSON-LD juntos.
Regras de design
Projete primeiro para um cartão pequeno no feed
A maioria não verá a imagem completa. Vê um cartão comprimido no feed, mensagem ou painel de prévia. Layouts simples ganham: um assunto claro, contraste legível e sem texto minúsculo que só funciona no arquivo de design.
Fluxo de trabalho
Um fluxo simples para cada página importante
- 1
Escreva a promessa da prévia
Decida o que o cartão deve dizer num olhar: tema, benefício, produto ou ângulo do artigo.
- 2
Crie a imagem na proporção planejada
Use 1200 x 630 para o arquivo padrão e mantenha o conteúdo importante centralizado.
- 3
Otimize o arquivo
Use JPG ou PNG para a imagem social, mantenha o arquivo razoavelmente pequeno e evite danos visíveis por compressão.
- 4
Defina metadados e esquema
Atualize as tags Open Graph, tags do Twitter card, URL canônica e referências de imagem JSON-LD juntas.
- 5
Publique com nome de arquivo estável
Use um nome de arquivo significativo e mude-o ao substituir a imagem se caches da plataforma provavelmente manterem a versão antiga.
- 6
Teste a URL final
Execute a URL pública da página nas ferramentas de depuração e verifique a prévia real, não só o código-fonte.
Dica
Use PixelPress após decidir o tamanho da prévia
Quando o plano de imagem nomeia os arquivos finais, PixelPress pode ajudar na conversão local para WebP ou AVIF. Mantenha os originais intactos, revise a saída e atualize a URL Open Graph.
Depuração
Atualize os caches da plataforma antes de confiar na prévia
Plataformas sociais armazenam em cache dados de prévia. Se você substituir uma imagem mantendo a mesma URL, a plataforma pode continuar mostrando a prévia antiga. Use as ferramentas oficiais e, se necessário, mude o nome do arquivo ou adicione uma URL versionada.
Checklist
Checklist de imagem Open Graph antes de publicar
Use esta lista antes de um artigo, página de produto, ferramenta ou landing page entrar no ar. Ela detecta problemas de prévia que são caros para notar depois que o link já foi compartilhado.
Perguntas frequentes
Qual o tamanho ideal para uma imagem Open Graph?
Use 1200 x 630 como padrão prático para a maioria das prévias Open Graph. É grande o suficiente para telas de alta densidade e próximo da forma comum 1,91:1. Ainda teste a URL final porque cada plataforma pode cortar ou armazenar prévias de forma diferente.
Posso usar a mesma imagem Open Graph para todas as páginas?
Você pode, mas geralmente é menos eficaz. Uma imagem genérica da marca é melhor que nenhuma, mas artigos importantes, páginas de produto e ferramentas devem ter uma imagem de prévia que combine com a página específica.
Por que minha imagem Open Graph antiga ainda aparece?
A razão mais comum é o cache da plataforma. Use o Facebook Sharing Debugger, LinkedIn Post Inspector ou ferramentas de cartão do X para atualizar a URL. Se o arquivo antigo continuar aparecendo, publique a nova imagem com um nome de arquivo novo ou URL versionada.
Qual a diferença entre og:image e twitter:image?
og:image é a imagem padrão Open Graph usada por muitas plataformas. twitter:image é específica para cartões X. Se fornecer twitter:image, o X pode usar essa imagem em vez de recorrer ao og:image.
A imagem JSON-LD deve combinar com a imagem Open Graph?
Não precisa ser idêntica, mas deve contar a mesma história da página. Metadados de busca, tags Open Graph, Twitter cards e JSON-LD não devem apontar para imagens irrelevantes ou desatualizadas.
Onde o PixelPress se encaixa nas imagens Open Graph?
PixelPress entra depois que você decide o tamanho da imagem, nome do arquivo e função. Pode ajudar a converter os arquivos finais localmente mantendo os originais intactos. A página ainda precisa de metadados corretos e teste de prévia depois.