Open Graph Protocol: Guia Completo 2026
Quando alguém compartilha seu link no WhatsApp ou LinkedIn, é o Open Graph que define o preview que aparece. Sem isso, links ficam genéricos e o CTR despenca. Este guia cobre todas as tags, dimensões corretas, implementação por stack e debug por rede.
Por Vitor Morais
Fundador do MochaLabz ·
Gere meta tags Open Graph em segundos
Title, description, og:image, og:type e mais — pronto para colar no <head>.
Open Graph Protocol é o padrão usado por Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram e Microsoft Teams para gerar previews ricos quando alguém compartilha um link. Foi criado pelo Facebook em 2010 e virou padrão de fato. Sem Open Graph configurado, seu link aparece como uma URL crua sem imagem — o que derruba o engajamento em redes sociais drasticamente.
O que é Open Graph e por que importa
Open Graph define um conjunto de meta tags com prefixo og: que ficam dentro do <head> do HTML. Quando um crawler de rede social busca seu link, ele lê essas tags e usa para montar o card visual de preview.
O ganho é direto: posts com preview rico têm CTR várias vezes maior que posts com link cru. Em LinkedIn, posts com og:image bem configurado podem receber 2× a 5× mais cliques. No WhatsApp, links sem preview mal são clicados.
Open Graph vs Twitter Cards
Twitter Cards são o equivalente do X/Twitter. Em 2026, o X faz fallback para Open Graph quando as tags twitter: não estão presentes. Você pode definir só Open Graph e funcionar bem em todas as redes — incluindo X. Para mais controle no X, veja o guia de Twitter Cards.
As tags Open Graph essenciais
Quatro tags são consideradas obrigatórias pelo protocolo; outras quatro são fortemente recomendadas:
<head>
<!-- Obrigatórias -->
<meta property="og:title" content="Título do Artigo (até ~60 chars)" />
<meta property="og:description" content="Descrição até 155 chars que vende o clique" />
<meta property="og:image" content="https://meusite.com/og/artigo.jpg" />
<meta property="og:url" content="https://meusite.com/artigo" />
<meta property="og:type" content="article" />
<!-- Fortemente recomendadas -->
<meta property="og:site_name" content="Nome do Site" />
<meta property="og:locale" content="pt_BR" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descrição da imagem" />
</head>og:type — escolha o tipo correto
og:type diz à plataforma que tipo de conteúdo é a página. Os valores mais usados:
| Critério | Quando usar | Tags extras importantes |
|---|---|---|
| website | Páginas gerais (home, sobre, listagens) | — |
| article | Posts de blog, notícias, guias | article:published_time, article:author, article:section, article:tag |
| product | Páginas de produto em e-commerce | product:price:amount, product:price:currency, product:availability |
| video.movie / video.tv_show | Página de vídeo | video:duration, video:release_date, video:actor |
| music.song / music.album | Página de música | music:duration, music:musician |
| book | Página de livro | book:author, book:isbn, book:release_date |
| profile | Perfil de pessoa | profile:first_name, profile:last_name, profile:gender |
Tags extras para article (caso mais comum em blogs)
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-18T09:00:00Z" />
<meta property="article:modified_time" content="2026-04-19T15:00:00Z" />
<meta property="article:author" content="https://meusite.com/autora" />
<meta property="article:section" content="Tecnologia" />
<meta property="article:tag" content="seo" />
<meta property="article:tag" content="open graph" />og:image — onde a maioria erra
A imagem é o elemento que mais influencia o CTR. As regras:
| Critério | Recomendação | Mínimo | Máximo |
|---|---|---|---|
| Dimensões | 1200×630 | 600×315 | Sem limite oficial |
| Proporção | 1.91:1 | 1.91:1 | — |
| Tamanho do arquivo | ≤ 300 KB | — | 5 MB |
| Formato | JPG (foto), PNG (texto) | — | GIF aceito; SVG não |
| URL | Absoluta com HTTPS | — | — |
<meta property="og:image" content="https://meusite.com/og/artigo.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Capa: O que é Open Graph" />
<meta property="og:image:type" content="image/jpeg" />
<!-- Múltiplas imagens (a primeira é a principal) -->
<meta property="og:image" content="https://meusite.com/og/principal.jpg" />
<meta property="og:image" content="https://meusite.com/og/alternativa.jpg" />Diferenças entre as plataformas
| Critério | Tag prioritária | Cache | Particularidades |
|---|---|---|---|
| og:* | Pode ser invalidado pelo Sharing Debugger | Aceita múltiplas og:image | |
| og:* | 24h, invalidado pelo Post Inspector | Image: 1200×627 ideal | |
| og:* | Agressivo (~7 dias) | Imagem cortada para quadrado em chats | |
| Twitter / X | twitter:* > og:* | ~7 dias | summary_large_image puxa og:image |
| Slack | og:* | Configurável por workspace | Mostra og:title, og:description, og:image |
| Discord | og:* | Curto | Renderiza tudo, incluindo cor de embed |
| iMessage / Messages | og:* | Cache de iCloud | Mostra og:image grande no preview |
Implementação em Next.js (App Router)
O App Router do Next 13+ tem API declarativa nativa para Open Graph dentro do export metadata:
// app/artigos/[slug]/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Título do Artigo",
description: "Descrição até 155 caracteres",
openGraph: {
title: "Título do Artigo",
description: "Descrição para redes sociais",
url: "https://meusite.com/artigos/slug",
siteName: "MochaLabz",
locale: "pt_BR",
type: "article",
publishedTime: "2026-04-18T09:00:00Z",
authors: ["https://meusite.com/autora"],
tags: ["seo", "open graph"],
images: [
{
url: "https://meusite.com/og/artigo.jpg",
width: 1200,
height: 630,
alt: "Capa do artigo",
},
],
},
};Geração dinâmica de og:image com next/og
Para criar imagem personalizada por artigo automaticamente, use o ImageResponse do Next:
// app/artigos/[slug]/opengraph-image.tsx
import { ImageResponse } from "next/og";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
export default async function Image({ params }: { params: { slug: string } }) {
const article = await getArticle(params.slug);
return new ImageResponse(
(
<div style={{ display: "flex", background: "#7d5423",
color: "white", padding: 60, fontSize: 60 }}>
{article.title}
</div>
),
{ ...size }
);
}Implementação em WordPress
Plugins resolvem para a maioria dos casos. Os mais usados:
- Yoast SEO: popular, configura Open Graph por post e por padrões globais.
- Rank Math: alternativa moderna, configuração similar.
- All in One SEO: também cobre Open Graph completo.
Para temas custom, adicione manualmente no header.php:
<head>
<?php if (is_singular()) : the_post(); ?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:description" content="<?php echo wp_trim_words(get_the_excerpt(), 25); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:type" content="article" />
<?php $thumb = get_the_post_thumbnail_url(null, 'large'); ?>
<?php if ($thumb): ?>
<meta property="og:image" content="<?php echo esc_url($thumb); ?>" />
<?php endif; ?>
<?php endif; ?>
</head>HTML puro (qualquer stack)
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Título da Página</title>
<!-- SEO -->
<meta name="description" content="Descrição que aparece na SERP" />
<!-- Open Graph -->
<meta property="og:title" content="Título" />
<meta property="og:description" content="Descrição para redes sociais" />
<meta property="og:image" content="https://meusite.com/og.jpg" />
<meta property="og:url" content="https://meusite.com/pagina" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Meu Site" />
<meta property="og:locale" content="pt_BR" />
<!-- Twitter (fallback do og:* funciona, mas controle extra) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@meusite" />
</head>Como debugar quando o preview não aparece
Cada plataforma tem ferramenta oficial. Use elas em vez de ficar testando no chat de verdade:
| Critério | URL |
|---|---|
| Facebook Sharing Debugger | developers.facebook.com/tools/debug |
| LinkedIn Post Inspector | linkedin.com/post-inspector |
| Twitter / X Card Validator | cards-dev.twitter.com/validator |
| Open Graph Preview (geral) | opengraph.xyz, www.opengraph.dev |
| Slack — Link Inspector | api.slack.com/reference/messaging/link-unfurling |
Os 7 erros que destroem o preview
Lista negra
- og:image com URL relativa (
/og.jpg): crawler precisa de URL absoluta com HTTPS. - og:image em SVG: redes sociais não renderizam SVG. Use JPG ou PNG.
- Imagem < 600 px: abaixo disso, algumas plataformas não exibem preview ou usam fallback genérico.
- Texto importante muito perto da borda: WhatsApp corta a imagem para quadrada — informação na lateral some.
- og:image bloqueada por robots.txt ou em CDN privado: o crawler não consegue baixar.
- Cache antigo no WhatsApp: mudou a tag mas o preview velho persiste — adicione query string ou aguarde.
- og:url diferente da URL real: alguns crawlers desconfiam e descartam o preview.
Open Graph em SPA (single-page apps)
SPAs com renderização puramente client-side têm problema: crawlers das redes sociais geralmente não executam JavaScript. O que estiver no HTML inicial é o que vai pro preview. Soluções:
- SSR / SSG: renderizar metadata no servidor (Next, Nuxt, Remix). Resolve elegantemente.
- Pre-rendering: Prerender.io, Rendertron, ou scripts como react-snap geram HTML estático para crawlers.
- Edge Functions de meta: reescreva o HTML por request com base no User-Agent do crawler.
Checklist Open Graph completo
- ✅ og:title, og:description, og:image, og:url e og:type presentes.
- ✅ og:image em JPG/PNG, 1200×630, < 300 KB, URL absoluta HTTPS.
- ✅ og:image:width, height e alt declarados.
- ✅ og:type correto para o tipo de conteúdo.
- ✅ Para article: published_time, author, section, tags.
- ✅ og:site_name e og:locale definidos.
- ✅ twitter:card definido (summary_large_image para a maioria).
- ✅ Sem og:image bloqueada por robots.txt ou autenticação.
- ✅ Texto importante longe das bordas da imagem (sobrevive ao crop quadrado do WhatsApp).
- ✅ Testado nos debuggers oficiais antes do lançamento.
- ✅ Cache invalidado quando muda algo crítico.
Perguntas frequentes
O que é o Open Graph Protocol?+
Open Graph é um protocolo aberto criado pelo Facebook em 2010 que permite a uma página web descrever a si mesma com metadados estruturados (título, imagem, descrição, tipo, URL). Quando alguém compartilha o link no Facebook, LinkedIn, WhatsApp, Slack ou Discord, esses serviços leem as tags og: e montam o preview rico — em vez de mostrar só a URL crua.
Quais tags Open Graph são obrigatórias?+
Quatro são consideradas básicas: og:title (título do conteúdo), og:type (website, article, video, product), og:image (URL da imagem de preview) e og:url (URL canônica). Recomendadas: og:description, og:site_name, og:locale e og:image:width/height/alt. Sem og:image, o preview fica sem imagem — o que reduz drasticamente o engajamento.
Qual o tamanho ideal de og:image?+
1200×630 pixels (proporção 1.91:1) é o padrão que funciona em Facebook, LinkedIn, X/Twitter (com twitter:card summary_large_image) e Slack. Mínimo aceito: 600×315. Tamanho de arquivo: até 5 MB; ideal abaixo de 300 KB para carregar rápido. Use JPG para fotos, PNG para arte com texto e SVG não — redes sociais não renderizam SVG.
Open Graph é fator de SEO no Google?+
Não diretamente. O Google não usa Open Graph como fator de ranqueamento. Mas afeta indiretamente: links com preview rico têm CTR muito maior em redes sociais, gerando mais tráfego e mais sinais de engajamento — que o Google interpreta. Em resumo: bom para SEO indireto, essencial para SMO (Social Media Optimization).
WhatsApp respeita Open Graph?+
Sim. WhatsApp lê og:title, og:description e og:image quando você cola um link. Mas ele faz cache agressivo (até 7 dias) — se você atualizar tags depois do primeiro compartilhamento, o WhatsApp continua mostrando o preview antigo. Para forçar refresh, adicione um query string aleatório (ex: ?v=2) ou aguarde a expiração do cache.
Twitter/X ignora Open Graph?+
Não. X usa twitter:card como prioridade, mas faz fallback para Open Graph quando as tags twitter: não existem. Boa prática em 2026: definir Open Graph como base e adicionar apenas as tags twitter: que forem realmente diferentes (twitter:card, twitter:site, twitter:creator).
Posso ter mais de uma og:image na mesma página?+
Sim. Você pode declarar múltiplas tags og:image na mesma página — o crawler escolhe a primeira como principal e algumas plataformas (Facebook) deixam o usuário escolher entre elas no momento do post. Útil para artigos com várias imagens relevantes. Cada og:image pode ter suas próprias og:image:width, height e alt logo abaixo.
Como debugar quando o preview não aparece?+
Use o debugger oficial de cada plataforma: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), Twitter Card Validator (cards-dev.twitter.com/validator). Eles mostram o que o crawler vê, erros de tag, status HTTP e permitem forçar nova varredura para invalidar cache.
Continue lendo
Como Criar Meta Tags SEO (2026): Guia Completo com Exemplos Prontos
Guia definitivo de meta tags: title, description, Open Graph, Twitter Card, canonical, robots e viewport. Código pronto, implementação em Next.js, WordPress e HTML puro.
Twitter Cards / X Cards: Guia Completo de Configuração e Validação (2026)
Configure Twitter/X Cards corretamente: summary, summary_large_image, app, player, dimensões por tipo, fallback Open Graph, implementação em Next.js e WordPress, validação e os 10 erros mais comuns.
Meta Description: Como Escrever para Aumentar o CTR no Google (2026)
Aprenda tamanho ideal por device, fórmula que converte, gatilhos psicológicos comprovados, exemplos fraco vs forte e por que o Google reescreve sua description (e o que fazer).
SERP Snippet: Como Otimizar Title, Description e Rich Results (2026)
Anatomia completa do snippet, todos os tipos de rich results (FAQ, How-to, Product, Article), implementação JSON-LD passo a passo, featured snippets e o que mudou com SGE/AI Overviews.