A tag og:image é uma das metatags de maior impacto da sua página: é a miniatura que aparece quando alguém compartilha sua URL no Facebook, LinkedIn, WhatsApp, Slack, Discord ou X. Mas há uma regra que confunde desenvolvedores o tempo todo: a URL que você coloca em og:image **precisa ser absoluta**. Um caminho relativo falha silenciosamente e sua prévia não exibirá imagem alguma. Este guia explica por que esse requisito existe, o que "URL absoluta" realmente significa e como configurá-la corretamente.
O que é og:image e por que ele importa?
Open Graph é um protocolo introduzido pelo Facebook em 2010 que permite controlar como uma URL aparece quando é compartilhada em plataformas sociais. A metatag `og:image` define a imagem de prévia: a miniatura grande que chama atenção em um feed, uma mensagem de chat ou um cartão de link. Hoje ela é suportada por praticamente toda plataforma que renderiza prévias: Facebook, LinkedIn, WhatsApp, Telegram, Discord, Slack, iMessage e outras.
Sem um og:image válido, as plataformas ou não mostram imagem alguma ou tentam extrair uma aleatória da página, geralmente algo irrelevante ou pequeno demais para renderizar bem. Um og:image bem elaborado pode aumentar drasticamente a taxa de cliques do conteúdo compartilhado, o que o torna uma das metatags de maior alavancagem que você pode adicionar.
A sintaxe básica
<meta property="og:image" content="https://example.com/images/article-cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A descriptive alt text for the preview image" />Note
Por que o og:image exige uma URL absoluta
Quando um usuário compartilha um link no Facebook, LinkedIn ou WhatsApp, o rastreador da plataforma visita essa URL para ler suas metatags. E aqui está o ponto crucial: o rastreador é um cliente HTTP independente, ele não tem noção de "de qual página veio". Ao ler um caminho relativo como `/images/cover.jpg`, não há URL base para resolvê-lo, então ou ele ignora a tag ou retorna erro.
Uma URL absoluta, por outro lado, é autossuficiente. Ela inclui o protocolo, o domínio e o caminho completo: tudo o que o rastreador precisa para buscar a imagem em qualquer contexto, sem depender da página que acabou de ler. É por isso que a documentação do Open Graph afirma explicitamente que o og:image deve ser uma URL absoluta, e por isso todas as grandes plataformas impõem esse requisito.
A URL do og:image deve ser uma URL absoluta. URLs relativas, URLs relativas ao protocolo e data URIs não são suportadas.
Os três formatos de URL e quais funcionam
| Formato de URL | Exemplo | Funciona como og:image? |
|---|---|---|
| URL absoluta | https://example.com/og.jpg | ✓ Sim - sempre funciona |
| URL relativa ao protocolo | //example.com/og.jpg | ✗ Não - falta o esquema |
| Caminho relativo à raiz | /images/og.jpg | ✗ Não - sem domínio |
| Caminho relativo | images/og.jpg | ✗ Não - sem domínio nem raiz |
| Data URI | data:image/png;base64,… | ✗ Não - não é uma URL |
Warning
O que "URL absoluta" realmente significa
Uma URL absoluta identifica completamente a localização do recurso na internet, independentemente do contexto em que aparece. Ela é composta por quatro elementos, todos obrigatórios:
- Esquema - o protocolo: `https://` (use sempre HTTPS; imagens HTTP podem ser bloqueadas por regras de conteúdo misto em páginas HTTPS)
- Host - o nome do seu domínio: `example.com` ou `www.example.com`
- Caminho - a localização do arquivo: `/images/og-cover.jpg`
- Opcional: porta - necessária apenas em porta não padrão (ex.: `:8080`). Não inclua em sites de produção.
https://example.com/images/og-cover.jpg
│ │ │
│ │ └-- caminho para o arquivo de imagem
│ └-------------- nome do host (seu domínio)
└---------------------- esquema (sempre https://)HTTPS vs HTTP
Use sempre `https://` na URL do seu og:image. Se o og:image aponta para uma URL HTTP, mas sua página é servida por HTTPS, navegadores e alguns rastreadores bloquearão a requisição por conteúdo misto. Facebook, LinkedIn e WhatsApp buscam as imagens por HTTPS e falharão silenciosamente, ou não exibirão imagem, se sua URL usar HTTP.
Tip
Como gerar a URL absoluta correta em diferentes frameworks
A causa mais comum de bugs de URL relativa é que desenvolvedores montam o valor do og:image por concatenação de strings sem incluir explicitamente a origem. Veja o padrão correto para os frameworks e ambientes mais populares.
Next.js (App Router)
No Next.js 13+ com App Router, use a propriedade `metadataBase` no seu layout raiz. Ela diz ao Next.js qual origem usar ao resolver caminhos de imagem relativos em `openGraph.images`.
import type { Metadata } from 'next';
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'), // ← define a base
openGraph: {
images: ['/images/og-cover.jpg'], // Next.js resolve para URL absoluta
},
};Sem `metadataBase`, o Next.js emitirá um caminho relativo no HTML e os rastreadores sociais não conseguirão carregar a imagem. É uma das configurações mais esquecidas em deploys de Next.js.
Next.js (Pages Router)
No Pages Router com `next/head`, você precisa construir a URL absoluta completa manualmente, normalmente usando uma variável de ambiente para a origem do site.
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com';
<Head>
<meta
property="og:image"
content={`${SITE_URL}/images/og-cover.jpg`}
/>
</Head>HTML puro / sites estáticos
Aqui não há mágica de framework: escreva a URL completa diretamente. A única variável a controlar é usar o domínio de produção, não o localhost.
<meta property="og:image" content="https://example.com/images/og-cover.jpg" />WordPress
Plugins como Yoast SEO, Rank Math e All in One SEO geram automaticamente URLs absolutas de og:image combinando `home_url()` com o caminho da imagem enviada. Se você define o og:image manualmente em um tema, use `get_site_url()` para construir a URL absoluta em vez de fixar o domínio no código.
$og_image = get_site_url() . '/wp-content/uploads/og-cover.jpg';
echo '<meta property="og:image" content="' . esc_attr($og_image) . '" />';Abordagem com variável de ambiente (recomendada para qualquer stack)
Fixar o domínio no código é frágil: staging e produção usam domínios diferentes e um erro de digitação quebra as prévias em todo lugar. O padrão mais limpo é guardar a URL base do site em uma variável de ambiente e referenciá-la ao montar os valores de og:image.
NEXT_PUBLIC_SITE_URL=https://example.comexport const SITE_URL =
process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com';
export function absoluteOgImage(path: string): string {
// Garante que o caminho comece com /
const normalized = path.startsWith('/') ? path : `/${path}`;
return `${SITE_URL}${normalized}`;
}
// Uso:
// absoluteOgImage('/images/og-cover.jpg')
// → 'https://example.com/images/og-cover.jpg'Otimizador de texto de prévia Open Graph
Verifique o comprimento de og:title e og:description, o risco de truncamento e a qualidade do texto da prévia social, na hora no seu navegador.
Requisitos específicos do WhatsApp para og:image
As prévias de link do WhatsApp são geradas pelo próprio rastreador dele, que é mais rigoroso que o do Facebook ou do LinkedIn em vários aspectos. Se seu og:image funciona no Facebook mas não no WhatsApp, normalmente a causa é uma destas restrições.
- URL HTTPS absoluta - igual às demais plataformas; o WhatsApp não segue redirecionamentos de HTTP para HTTPS.
- A imagem precisa ser publicamente acessível - sem autenticação, sem proteção antibot que bloqueie os intervalos de IP do rastreador do WhatsApp.
- Tamanho mínimo: 300×200 px - imagens menores costumam ser ignoradas pelo renderizador de prévias do WhatsApp.
- Tamanho máximo de arquivo: ~300 KB - o rastreador do WhatsApp tem timeout curto para buscar imagens. Imagens grandes expiram ou são ignoradas.
- Formato JPEG ou PNG - o suporte a WebP varia conforme a versão e a plataforma do WhatsApp. Prefira JPEG para máxima compatibilidade.
- og:image:width e og:image:height são fortemente recomendados - permitem que o WhatsApp dimensione o contêiner de prévia antes de buscar.
Warning
Configuração recomendada de og:image para o WhatsApp
<!-- og:image principal - deve ser uma URL HTTPS absoluta -->
<meta property="og:image" content="https://example.com/og/article-cover.jpg" />
<!-- Complementos fortemente recomendados -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Título do artigo ou descrição breve" />
<!-- Necessárias para o WhatsApp exibir um cartão completo (não apenas uma URL) -->
<meta property="og:title" content="O título da sua página" />
<meta property="og:description" content="Descrição breve do conteúdo da página." />
<meta property="og:url" content="https://example.com/sua-pagina" />Gerador de metatags
Gere um bloco completo de Open Graph, Twitter Card e metatags padrão em segundos - com prévia em tempo real e avisos de auditoria de SEO.
Erros comuns e como corrigi-los
Até desenvolvedores experientes repetem os mesmos erros com og:image. Estes são os problemas mais frequentes e as correções exatas.
Erro 1: usar um caminho relativo
<meta property="og:image" content="/images/og-cover.jpg" /><meta property="og:image" content="https://example.com/images/og-cover.jpg" />Erro 2: usar localhost em builds de produção
Isso costuma acontecer quando uma variável de ambiente de staging ou de desenvolvimento local é commitada sem ser sobrescrita para produção.
<meta property="og:image" content="http://localhost:3000/og.jpg" />Erro 3: não ter og:image algum
Sem og:image, as plataformas tentarão encontrar uma imagem no conteúdo da página, geralmente com resultados ruins. Sempre forneça um og:image explícito em toda página que você espera que seja compartilhada. Você pode usar o Analisador de metatags do Aback para auditar na hora qualquer URL ativa e confirmar se o og:image está presente e bem formatado.
Erro 4: a imagem retorna status 4xx ou 5xx
Uma URL absoluta correta na forma, mas quebrada na prática (404, 403, 500), produzirá o mesmo resultado de não ter imagem: uma prévia em branco. Sempre verifique se a URL da imagem retorna 200 OK com o cabeçalho `Content-Type` correto.
Erro 5: a imagem está atrás de autenticação
Rastreadores sociais não enviam cookies nem cabeçalhos de autenticação. Se a URL do seu og:image exige login, ou está em um servidor de staging protegido por autenticação básica HTTP, o rastreador receberá um 401 ou o HTML da página de login em vez da imagem. Os arquivos de og:image precisam ser sempre publicamente acessíveis, mesmo quando a página está atrás de um paywall.
Erro 6: dimensões de imagem erradas
Imagens pequenas demais (abaixo de 200×200 px) podem ser ignoradas. Imagens com proporções incomuns podem ser recortadas ou exibidas com tarjas. As dimensões seguras universais são 1200×630 px na proporção 1,91:1. Você pode gerar um og:image no tamanho correto em segundos com o Gerador de imagem OG.
| Problema | Sintoma | Correção |
|---|---|---|
| Caminho relativo | Nenhuma imagem ao compartilhar | Prefixe com https://seudominio.com |
| URL de localhost | Nenhuma imagem ao compartilhar | Use o domínio de produção; revise as variáveis de ambiente |
| HTTP (em vez de HTTPS) | Sem imagem ou erro de conteúdo misto | Sirva a imagem por HTTPS |
| Imagem 404/403 | Nenhuma imagem ao compartilhar | Corrija o caminho ou as permissões de acesso |
| Imagem protegida por autenticação | Nenhuma imagem ao compartilhar | Mova a imagem para um caminho público no CDN |
| Dimensões erradas | Prévia cortada ou ausente | Use JPEG ou PNG de 1200×630 px |
| Sem og:image:width/height | Prévia lenta ou ausente no WhatsApp | Adicione og:image:width e og:image:height |
Como verificar se seu og:image está correto
Configurar a tag corretamente no código é uma coisa; confirmar que ela realmente funciona é outra. Estas são as formas mais rápidas de verificar.
Use o Analisador de metatags
O Analisador de metatags do Aback Tools permite inserir qualquer URL ativa e ver todas as metatags que a página emite, incluindo o og:image. Ele verifica se o valor está presente, se a URL é absoluta e sinaliza problemas de formato comuns. É a checagem inicial mais rápida.
Use o Sharing Debugger do Facebook
O Sharing Debugger do Facebook (`developers.facebook.com/tools/debug`) busca e renderiza os dados de Open Graph de qualquer URL, mostra exatamente qual imagem aparecerá e permite forçar um novo rastreamento para limpar o cache. É a fonte oficial para prévias no Facebook e no Instagram.
Use o Post Inspector do LinkedIn
O Post Inspector do LinkedIn (`linkedin.com/post-inspector`) faz o mesmo para as prévias do LinkedIn. É especialmente útil porque o comportamento do rastreador do LinkedIn difere do do Facebook na forma como lida com cache e redirecionamentos HTTPS.
Inspecione o código-fonte HTML diretamente
Exiba o código-fonte (`Ctrl+U` / `Cmd+U`) ou use as DevTools do navegador para ler o HTML bruto. Encontre a metatag `og:image` e copie o valor. Se ele não começar com `https://`, falhará em qualquer rastreador.
Teste a URL da imagem de forma independente
Cole a URL do og:image diretamente em uma aba do navegador. Se você receber um 404, uma página de login ou qualquer coisa que não seja a imagem, os rastreadores receberão a mesma resposta. A URL precisa retornar a imagem bruta com 200 OK.
Analisador de metatags
Audite qualquer URL ativa para presença de og:image, formato de URL absoluta, tags Twitter Card e mais de 15 sinais de SEO em uma única varredura.
og:image em diferentes plataformas
Cada plataforma trata o og:image de forma um pouco diferente. Entender essas diferenças ajuda você a escrever uma única metatag que funciona em todos os lugares.
| Plataforma | Tamanho mín. | Tamanho recomendado | Formato | Cache |
|---|---|---|---|---|
| Facebook / Instagram | 200×200 px | 1200×630 px | JPG, PNG, GIF | Persistente; use o Debugger para limpar |
| 200×200 px | 1200×627 px | JPG, PNG | Persistente; use o Post Inspector | |
| 300×200 px | 1200×630 px | JPG, PNG | Por dispositivo; difícil de limpar | |
| Telegram | 200×200 px | 1200×630 px | JPG, PNG, WebP | Duradouro; regenera ao recompartilhar |
| Discord | 256×256 px | 1200×630 px | JPG, PNG, GIF | Curto; atualiza automaticamente |
| Slack | 500×500 px | 1200×630 px | JPG, PNG | Por espaço de trabalho; limpa após ~30 dias |
| X (Twitter) | 144×144 px | 1200×600 px | JPG, PNG, WebP | ~7 dias; use o Card Validator para limpar |
Note
og:images dinâmicos
Um padrão cada vez mais comum é gerar og:images dinamicamente por página: por exemplo, o og:image de um artigo pode incluir o título e o nome do autor, gerados no servidor como PNG. Frameworks como o Next.js oferecem suporte com a API `ImageResponse` (`next/og`). O resultado continua sendo uma URL absoluta: a geração dinâmica acontece no servidor e os rastreadores só veem uma URL de imagem `https://` normal.
Se você prefere uma abordagem sem código, o Gerador de imagem OG permite desenhar uma imagem de prévia social de 1200×630 px com seu próprio texto, cores e layout, e baixá-la como PNG - pronta para subir ao seu CDN e referenciar como URL absoluta.
og:image junto ao conjunto completo de tags Open Graph
O og:image raramente funciona isolado. As plataformas usam o conjunto completo de tags Open Graph para decidir se renderizam um cartão rico ou apenas uma URL simples. Se você está adicionando og:image a uma página, estas são as outras tags que deve incluir ao mesmo tempo:
- og:title - o título do cartão de link (normalmente igual ao `<title>`, mas pode ser mais curto)
- og:description - um resumo de 1-2 frases que aparece abaixo do título; confira o comprimento com o Otimizador de texto de prévia OG
- og:url - a URL canônica da página (use a mesma do seu `<link rel="canonical">`)
- og:type - `website` para a maioria das páginas; `article` para posts de blog
- og:site_name - o nome do seu site ou marca
- og:image - a URL absoluta da sua imagem de prévia (o foco deste artigo)
- og:image:width e og:image:height - fortemente recomendadas para renderização mais rápida
- og:image:alt - texto alternativo descritivo para acessibilidade e contexto legível por IA
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:title" content="Your Article Title" />
<meta property="og:description" content="A brief, compelling description under 155 characters." />
<meta property="og:url" content="https://example.com/blog/your-article" />
<meta property="og:image" content="https://example.com/og/your-article.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Visual description of the preview image" />
<!-- Fallback para Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/your-article.jpg" />Você pode gerar e validar todo esse bloco, incluindo o og:image com verificação de URL absoluta, usando o Gerador de metatags, ou validar uma página existente com o Analisador de metatags.
Key takeaways
- O og:image precisa ser uma URL absoluta: caminhos relativos, URLs relativas ao protocolo e data URIs falham silenciosamente.
- Use sempre https://: imagens HTTP são bloqueadas por regras de conteúdo misto e muitos rastreadores as recusam.
- O tamanho recomendado do og:image é 1200×630 px (proporção 1,91:1) com menos de ~300 KB em JPEG.
- Inclua og:image:width e og:image:height para acelerar a renderização da prévia no WhatsApp e no Telegram.
- No App Router do Next.js, defina metadataBase para evitar caminhos relativos; no Pages Router, monte a URL completa com uma variável de ambiente.
- Verifique com o Analisador de metatags, o Sharing Debugger do Facebook e o Post Inspector do LinkedIn antes de publicar.
- Os rastreadores não alcançam localhost, servidores de staging com autenticação nem imagens que retornam 4xx/5xx: os arquivos de og:image precisam ser publicamente acessíveis.