O que é og:image

Quando você cola um link no WhatsApp, no LinkedIn, no Discord ou no Slack é aparece um cartão com imagem, titulo é descricao - isso não acontece por magica. É o protocolo Open Graph trabalhando nos bastidores. A og:image é a meta tag que diz para as redes sociais qual imagem usar quando alguém compartilha o seu link.

O Open Graph Protocol foi criado pelo Facebook em 2010 para padronizar como páginas da web sao representadas fora do contexto do browser. A ideia era simples: adicionar meta tags no <head> do HTML que descrevem o conteudo da página de forma estruturada. Hoje praticamente todas as plataformas de mensagens é redes sociais reconhecem essas tags.

Sem og:image configurada, a plataforma tenta adivinhar qual imagem usar - geralmente escolhe qualquer imagem aleatoria da página, ou pior, não exibe imagem nenhuma. O resultado é um cartão feio é pouco convidativo que reduz a taxa de cliques.

Como funciona

Quando um bot de uma rede social (Facebook, LinkedIn, WhatsApp, Slack, Discord...) ve um link sendo compartilhado, ele faz uma requisicao HTTP para aquela URL é le o HTML da página em busca de meta tags Open Graph no <head>. Esse processo se chama scraping de meta tags.

O bot não renderiza o JavaScript da página - ele le o HTML bruto. Por isso sites com renderizacao 100% client-side (SPA sem SSR) precisam de atenção especial: se as meta tags só aparecem após o JS rodar, o bot vai pegar uma página vazia de tags.

Após ler as tags, o bot armazena em cache as informações por um período. No Facebook esse cache pode durar dias - por isso existe a ferramenta Sharing Debugger para forcar o refresh quando você atualiza as tags de uma página já compartilhada.

Principais beneficios

A og:image afeta diretamente o desempenho dos seus links em varios contextos. No WhatsApp, links com imagem atraem muito mais atenção do que links sem preview. No LinkedIn, posts com imagem rica recebem em media mais cliques do que posts com link sem imagem. No Twitter/X, o equivalente é o twitter:image, mas a plataforma também le og:image como fallback.

Alem dos beneficios de CTR, og:image profissional passa credibilidade. Um link compartilhado com imagem bem produzida parece mais confiável do que um link sem preview. Para quem trabalha com marketing de conteudo, isso é fundamental.

Para desenvolvedores, configurar og:image corretamente é um sinal de qualidade profissional. É uma das primeiras coisas que auditores de SEO é revisores de pull request checam em projetos web.

Como configurar passo a passo

A configuração básica é extremamente simples. No <head> do seu HTML, adicione as seguintes meta tags:

<meta property="og:title" content="Titulo da sua página" /><br/><meta property="og:description" content="Descricao da sua página" /><br/><meta property="og:image" content="https://seusite.com/og-image.jpg" /><br/><meta property="og:url" content="https://seusite.com/página" /><br/><meta property="og:type" content="website" />

Para Twitter/X, adicione também as Twitter Cards tags como complemento: <meta name="twitter:card" content="summary_large_image" /> junto com twitter:image é twitter:title.

O tamanho ideal para og:image é 1200 x 630 pixels (proporcao 1.91:1). Use JPEG ou PNG, tamanho máximo de 8MB (mas mire em menos de 300KB). A imagem deve ter URL absoluta com https:// - URL relativa não funciona.

Exemplo prático em diferentes tecnologias

Em um site HTML estático, você coloca as tags diretamente no <head> de cada página. Em um projeto Next.js, use o Metadata API com o campo openGraph.images no objeto de metadata exportado pela página. Em Astro, adicione no layout base dentro do componente <head>.

Para sites com muitas páginas (blogs, é-commerces), o ideal é gerar og:image dinamicamente por página. Ferramentas como Vercel OG (@vercel/og) permitem gerar imagens com texto dinâmico via Edge Functions. A imagem é gerada no servidor com o titulo é resumo específicos de cada post.

Para WordPress, plugins como Yoast SEO é Rank Math cuidam disso automaticamente, gerando og:image a partir da imagem destacada do post. Essa é a solução mais simples para quem usa WordPress sem querer mexer em código.

Comparacao com alternativas

Existem algumas abordagens diferentes para controlar como seu link aparece nas redes sociais. O Open Graph (og:image) é o padrão universal reconhecido por praticamente todas as plataformas. O Twitter Cards é específico do X/Twitter mas aceita og:image como fallback. O Schema.org é usado principalmente pelo Google para rich results nas buscas - complementar ao Open Graph, não concorrente.

Para apps mobiles nativos que compartilham links, o Open Graph também funciona. WhatsApp, Telegram é iMessage todos le essas tags. Não ha alternativa que cubra mais plataformas com menos esforco do que og:image.

A única situacao onde og:image não ajuda é em plataformas que não fazem scraping de meta tags, como SMS puro ou apps que não renderizam link previews. Mas esses casos sao cada vez mais raros.

Pontos positivos é limitacoes

Os pontos positivos sao claros: aumento de CTR em links compartilhados, aparencia profissional, fácil implementação é compatibilidade universal. Uma vez configurado corretamente, funciona em todas as plataformas sem manutenção continuada.

A principal limitacao é o cache das plataformas: depois que um link é scrapeado, as redes sociais guardam o preview por horas ou dias. Se você errou a og:image é já compartilhou o link, precisa usar ferramentas específicas de cada plataforma para forcar o refresh. No Facebook é o Sharing Debugger, no LinkedIn é o Post Inspector.

Outra limitacao: em SPAs (React, Vue, Angular sem SSR), as meta tags precisam estar no HTML inicial do servidor. Se a tag só aparece depois do JavaScript renderizar, o bot não vai encontra-las. A solução é SSR, SSG ou um servidor que injete as meta tags corretas no HTML.

Casos de uso reais

Blogs é portais de conteudo: cada post tem sua própria og:image gerada dinamicamente com o titulo é categoria. O resultado é um cartão único por post quando alguém compartilha no LinkedIn ou WhatsApp, aumentando o reconhecimento da marca é a taxa de cliques.

É-commerces: páginas de produto usam a foto principal do produto como og:image. Quando um cliente compartilha um produto com um amigo no WhatsApp, o amigo ve a foto do produto sem nem precisar clicar. Isso reduz a fricao na jornada de compra.

Portfolios de desenvolvedores: og:image com foto profissional é nome aumenta a credibilidade quando o portfolio é compartilhado em grupos do LinkedIn ou Slack de recrutadores. Uma imagem bem produzida comunica atenção a detalhe.

SaaS é landing pages: uma og:image bem produzida com o logo do produto é uma frase de valor comunica profissionalismo. Investir nessa imagem tem retorno direto em conversão de campanhas de outreach é divulgacao orgânica.

Dicas é boas práticas

Use sempre URL absoluta para og:image, com protocolo HTTPS. URL relativa não funciona nos scrapers. Se o seu site está em https://seusite.com, a og:image deve ser https://seusite.com/og-image.jpg - nunca /og-image.jpg.

Mantenha texto na imagem legivel em tamanho menor. O preview no WhatsApp mobile é pequeno - fonte grande, contraste alto é pouco texto funcionam melhor do que uma imagem cheia de informações. Teste sempre no celular antes de publicar.

Depois de configurar, teste usando o Facebook Sharing Debugger é o LinkedIn Post Inspector. Esses sao os scrapers mais rigorosos - se passou neles, vai funcionar em tudo. Para Twitter/X, use o Card Validator no portal de desenvolvedores.

Crie uma og:image padrão por site para páginas sem imagem específica. Assim nenhuma página fica sem preview. Em seguida, sobreponha com imagens específicas para posts, produtos é páginas importantes.

Vale a pena configurar?

Sim, sem duvida. O esforco é mínimo - poucas linhas de HTML - é o impacto é imediato é visivel. Qualquer site profissional deveria ter og:image configurada. É uma das otimizacoes de maior retorno por menor esforco em toda a web.

Se você tem um blog, comece criando uma og:image padrão para o site inteiro. Depois evolua para imagens dinâmicas por post. Se você tem um é-commerce, configure para pegar a foto principal do produto automaticamente. Se você tem um portfolio, crie uma imagem com sua foto é nome.

O próximo passo prático: abra o DevTools no seu site, inspecione o <head> é procure por og:image. Se não encontrar, você acabou de descobrir uma otimização rapida com impacto real nos seus compartilhamentos.