Os rótulos Open Graph afetam o SEO?

Não diretamente — os motores de busca como o Google não usam as tags OG para classificação. Mas eles afetam as taxas de cliques nas plataformas sociais e aplicativos de mensagens, o que pode gerar tráfego que indiretamente sinaliza relevância. Pense neles como otimização de conversão para links compartilhados.

Com que frequência as plataformas re-escrapam as tags Open Graph?

Vary. O Facebook armazena por até 30 dias. O LinkedIn pode armazenar por uma semana ou mais. O Slack refaz a busca sempre que um link é postado em um canal, então geralmente está atualizado. Sempre use a ferramenta de depuração da plataforma para forçar uma nova raspagem após atualizar as tags.

Posso usar uma imagem diferente para o Twitter do que para as demais plataformas?

Sim. Defina og:image para Facebook, LinkedIn, Discord e Slack. Em seguida, defina uma imagem separada twitter:image para o Twitter/X. Eles podem apontar para arquivos diferentes — útil se você quiser um corte quadrado para o Twitter e uma imagem ampla de 1200×63.0 para tudo o resto.

O que acontece se eu não adicionar nenhuma etiqueta OG?

A plataforma rasteja sua página e faz suposições. Pode extrair o título da página do seu tag , pegar o primeiro parágrafo de texto como descrição e escolher uma imagem aleatória da página — muitas vezes um logotipo, uma unidade de anúncio ou um ícone. O resultado é geralmente incorreto e raramente clicável.

Os rótulos Open Graph funcionam em aplicações de página única (SPAs)?

Apenas se as tags OG estiverem presentes no HTML renderizado no servidor. As plataformas não executam JavaScript ao fazer raspagem — elas leem a resposta HTML bruta. Se seu SPA renderizar conteúdo apenas no lado do cliente, as tags OG nesse conteúdo não serão vistas. Use renderização no lado do servidor (SSR) ou geração estática para garantir que as tags estejam no payload inicial do HTML.

Anúncios incomodam? Ir Sem anúncios Hoje 

Marcadores Open Graph — Pare com seus links ficando ruins no Slack

Publicado em 23 de maio de 2026

Os marcadores Open Graph controlam a imagem, o título e a descrição exibidos quando você compartilha links no Slack, LinkedIn, Twitter e Discord. Aprenda as 6 tags essenciais, como dimensionar corretamente og:image e como testar se seus previsores realmente funcionam.

Marcadores Open Graph — Pare com seus links parecendo ruins no Slack 1

ANUNCIADO Remover?

Você cola um URL no Slack. Em vez de uma pré-visualização rica com uma grande imagem, título e uma resumo de duas linhas, você recebe apenas um link — ou uma frase aleatória tirada do meio da página. Seus colegas clicam de qualquer forma, mas não tinham ideia do que estavam prestes a ver.

Marcadores Open Graph corrigem isso. São um conjunto de <meta> linhas na sua página’s <head> que informam o Slack, LinkedIn, Twitter, Discord e todas as outras plataformas exatamente o que exibir quando alguém compartilhar seu URL. Se você omitir essas tags, a plataforma tentará adivinhar — de forma ruim.

O que são Marcadores Open Graph?

Open Graph (OG) é um protocolo introduzido pelo Facebook em 2010 para que páginas web pudessem controlar como aparecem ao serem compartilhadas na plataforma. A ideia era simples: adicionar metadados estruturados ao HTML <head> e as plataformas conseguem extrair um título, descrição e imagem apropriados, em vez de adivinhar.

Funcionou tão bem que todas as principais plataformas o adotaram. Hoje, o Slack, LinkedIn, Twitter/X, Discord, iMessage, WhatsApp e Telegram todos leem marcadores OG ao gerar pré-visualizações de links. O Facebook ainda os usa também.

Os 6 Marcadores Essenciais Open Graph

Essas seis tags devem estar presentes em cada página que você deseja compartilhar. Omitir qualquer uma delas e as plataformas preencherão os campos automaticamente — geralmente de forma incorreta.

<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="One or two sentences that explain what this page is about." />
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />

og:title — O título exibido na pré-visualização. Mantenha abaixo de 70 caracteres. Não copie apenas sua <title> tag — os títulos OG podem ser mais impactantes, pois não precisam incluir o nome do site.
og:description — O resumo de duas linhas abaixo do título. 150 a 200 caracteres é o ponto ideal. Faça com que seja útil, não vago.
og:image — A imagem exibida na pré-visualização. Esta é a tag que faz ou quebra a aparência do seu link. Mais sobre o tamanho abaixo.
og:url — O URL canônico para esta página. Sempre use o URL completo incluindo https://. Isso evita pré-visualizações duplicadas quando o mesmo conteúdo é acessado por diferentes URLs.
og:type — Use website para a maioria das páginas. Use article para posts de blog, combinado com article:published_time e article:author.
og:site_name — O nome da sua marca. Algumas plataformas mostram isso separadamente do título, então mantenha curto.

Marcadores Twitter/X de Cartão

O Twitter tem o seu próprio sistema chamado Twitter Cards. A boa notícia: ele cai na volta para os marcadores OG se os marcadores de cartão do Twitter estiverem ausentes. A má notícia: a volta não é perfeita, e o Twitter não exibirá cartões com imagens grandes a menos que você opte explicitamente por isso.

Adicione essas tags ao lado dos seus marcadores OG:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="One or two sentences about this page." />
<meta name="twitter:image" content="https://yoursite.com/images/og-image.jpg" />

A tag crítica é twitter:card. Defina-a como summary_large_image e você obterá o cartão grande. Defina-a como summary e você obterá um thumbnail pequeno. Sem essa tag, o Twitter defaulta para summary e sua imagem OG cuidadosamente elaborada desaparece.

og:image — A Tag que Faz o Trabalho Principal

Se houver uma tag que deve ser correta, é a og:image. Uma pré-visualização vazia ainda pode ser clicada. Uma pré-visualização com imagem borrada, esticada ou ausente não será.

Dimensões recomendadas

1200 × 630 pixels — a norma universal que funciona em Facebook, LinkedIn, Twitter e Slack
Mínimo: 600 × 315 pixels — qualquer coisa menor e algumas plataformas ignoram a imagem inteiramente
Tamanho do arquivo: abaixo de 8 MB — o Facebook e a maioria das plataformas rejeitam arquivos maiores
Formato: JPG ou PNG — JPG para fotos, PNG para gráficos com texto

Mantenha o conteúdo essencial longe das bordas

As plataformas tratam as imagens OG de forma diferente. O Slack exibe um cartão amplo, o LinkedIn corta para quadrado em alguns contextos e os aplicativos móveis fazem o seu próprio trabalho. Mantenha seu logotipo, texto e foco dentro de uma zona segura centralizada — aproximadamente o interior 80% da imagem — para evitar que qualquer coisa importante seja cortada.

Como Adicionar Marcadores Open Graph ao Seu Site

Sites em HTML simples

Cole as tags dentro do <head> do seu HTML, antes do fechamento do </head> tag:

<head>
  <!-- your existing tags -->
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Page description." />
  <meta property="og:image" content="https://yoursite.com/og.jpg" />
  <meta property="og:url" content="https://yoursite.com/page/" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Site Name" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

WordPress

Se você estiver usando WordPress, não precisa tocar no código. Plugins como Yoast SEO, Rank Math ou All in One SEO gerenciam automaticamente os marcadores OG. Após a instalação, procure a seção “Social” no editor de postagem/página — você pode definir um título, descrição e imagem personalizados para cada conteúdo, independentemente do título e descrição do SEO.

Aplicativos Next.js e React

No Next.js App Router, use o recurso integrado metadata export no seu page.tsx:

export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Page description.',
    images: ['https://yoursite.com/og.jpg'],
    url: 'https://yoursite.com/page/',
    type: 'website',
    siteName: 'Site Name',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page description.',
    images: ['https://yoursite.com/og.jpg'],
  },
};

Como Testar seus Marcadores Open Graph

Não assuma que seus marcadores estão funcionando — as plataformas armazenam as pré-visualizações com grande agressividade e a versão armazenada pode ter dias de idade. Use estas ferramentas para verificar e forçar uma atualização:

Ferramenta de Depuração de Compartilhamento do Facebook — mostra exatamente o que o Facebook lê e permite que você limpe o cache e re-escaneie
Inspeção de Publicação do LinkedIn — o LinkedIn armazena com grande rigor, então esta é a única forma confiável de forçar uma atualização
Validador de Cartões do Twitter — visualize como seu cartão será exibido no Twitter/X
Verificador do Open Graph — verifique qualquer URL com os marcadores OG diretamente no navegador sem precisar fazer login em nenhuma plataforma

O Verificador do Open Graph no IO Tools é útil para auditorias rápidas — cole qualquer URL e ele recupera todos os marcadores OG e de cartões do Twitter em uma única visão, para que você possa identificar tags ausentes sem precisar alternar entre os debuggers específicos das plataformas.

Se você precisar gerar marcadores OG limpos e corretamente formatados do zero, o Gerador de Tag Meta HTML produz o markup exato que você precisa para qualquer página.

5 Erros Comuns com Marcadores Open Graph

Usar uma URL relativa para a imagem — og:image deve ser uma URL absoluta (https://yoursite.com/image.jpg). Caminhos relativos como /images/og.jpg falham silenciosamente e a imagem não será carregada.
Uma única imagem OG para todo o site — Uma imagem de backup funciona bem para a página inicial, mas posts de blog, páginas de produtos e páginas de destino merecem cada uma a própria. Uma imagem genérica para todo o site destrói o senso de contexto que torna as pré-visualizações clicáveis.
Esquecer twitter:card — Sem isso, o Twitter defaulta para um thumbnail pequeno mesmo que você tenha uma imagem OG perfeita de 1200×630. Adicione sempre explicitamente.
Publicar alterações sem atualizar o cache — As plataformas armazenam dados OG com grande agressividade. Após atualizar os marcadores, use o debugger da plataforma para forçar uma re-escaneio, ou a pré-visualização antiga continuará aparecendo por dias.
Escrever uma descrição og:description que leia como um título — Use o campo de descrição para adicionar informações que não estão no título: o que o leitor aprenderá, para quem é, qual problema é solucionado.