Gerar e Visualizar Etiquetas Meta Open Graph

✅ O testador OpenGraph permite pré-visualizar e gerar meta tags em um só lugar com um clique

Experimente: https://opengraph.dev
Funciona para Facebook, Whatsapp, Twitter, LinkedIn, Wordpress...
Hero Image

Otimize seu site com as tags Open Graph

Descubra como o Protocolo Open Graph melhora o compartilhamento em mídias sociais

O que é Open Graph (OG)?

O Protocolo Open Graph, comumente referido como OGP, é crucial para definir como o conteúdo do seu site aparece nas redes sociais. Implementar as tags Open Graph garante que imagens, títulos e descrições específicas sejam exibidas quando seu conteúdo é compartilhado online.

Tamanho Ideal de Imagem para Open Graph

Para maximizar o impacto em dispositivos de alta resolução, use imagens Open Graph com pelo menos 1200 pixels de largura. O Facebook, líder em mídias sociais, recomenda imagens com proporção de 1.91:1 para exibir a imagem inteira no Feed sem cortes.

Integração Fácil de Tags Open Graph

Integre tags Open Graph sem esforço usando ferramentas como OpenGraph.dev. Gere e insira as meta tags na seção 'head' do seu site para melhorar a visibilidade do seu site nas mídias sociais.

A Importância do Open Graph em SEO

Tags Open Graph otimizadas aumentam significativamente a probabilidade de seu conteúdo ser notado e clicado em mídias sociais, gerando mais tráfego para o seu site. Elas são essenciais para fazer seu conteúdo se destacar em feeds de mídias sociais lotados.

O que são tags Open Graph?

As tags Open Graph são elementos HTML <meta> colocados dentro do <head> de uma página web que descrevem como a página deve aparecer quando sua URL é compartilhada em outro lugar — um feed do Facebook, uma postagem no X, uma atualização no LinkedIn, um chat do WhatsApp, um servidor do Discord, uma conversa do iMessage ou um canal do Slack. O protocolo Open Graph foi originalmente introduzido pelo Facebook em 2010 e desde então se tornou o padrão de fato para visualizações de links em praticamente todas as principais plataformas. Um conjunto completo de meta tags Open Graph oferece controle total sobre o título, descrição, imagem, tipo e URL canônica que aparecem dentro do cartão de visualização rica — transformando um simples hiperlink em um trecho atraente que consistentemente supera um link simples em taxa de cliques.

Um conjunto mínimo viável de meta tags Open Graph 

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary of the page." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />

Open Graph em plataformas sociais

Quase toda rede social e mensageiro principal lê os metadados do Open Graph, mas cada um aplica suas próprias regras sobre tamanho da imagem, cache e fallbacks. Atenda ao requisito mais rigoroso e o mesmo conjunto de imagens funcionará em todos os lugares.

Facebook

O maior consumidor de dados Open Graph. Usa og:title, og:description e og:image. A imagem recomendada é de 1200×630 px com proporção 1,91:1 para que seja exibida sem cortes no Feed de Notícias. O cache é agressivo — use o Sharing Debugger para atualizar após uma mudança.

X (Twitter)

Recorre às tags Open Graph quando as meta do Twitter Card estão ausentes, mas para obter um cartão de visualização grande você também deve declarar twitter:card definido como summary_large_image e twitter:image. A imagem deve ter menos de 5 MB e pelo menos 300×157 px; 1200×630 é o padrão seguro.

LinkedIn

Lê og:title, og:description, og:image e og:type. A imagem deve ter menos de 5 MB e pelo menos 1200×627 px (proporção 1,91:1). O LinkedIn armazena o primeiro rastreamento em cache por cerca de sete dias — use o Post Inspector para forçar uma nova busca após publicar mudanças.

WhatsApp & iMessage

Ambos os mensageiros buscam tags Open Graph via HTTPS e têm um orçamento rigoroso de tamanho de imagem. O WhatsApp trunca qualquer coisa acima de ~300 KB, então otimize a imagem e declare og:image:width e og:image:height para acelerar a renderização. O iMessage prefere uma imagem quadrada 1:1 quando disponível, então considere fornecer ambas as proporções por meio de várias tags og:image.

Discord, Slack & Telegram

Todos os três renderizam visualizações a partir do trio padrão og:title, og:description e og:image. O Discord também respeita theme-color para o destaque da barra lateral. O Telegram remove iframes e JS — certifique-se de que suas tags estejam presentes no HTML inicial renderizado no servidor, não injetadas em tempo de execução.

Pinterest & Reddit

O Pinterest estende o Open Graph com article:author e tipos de Rich Pin. O Reddit obtém og:title e og:image quando um link é enviado e usa a imagem como miniatura do post. Ambos privilegiam imagens em formato retrato ou quadrado (de 2:3 a 1:1) em vez de banners largos 1,91:1.

Adicione meta tags Open Graph ao seu framework

Coloque esses trechos no seu projeto para conectar tags Open Graph nas stacks mais comuns. Cada exemplo renderiza o mesmo conjunto mínimo viável no servidor para que os rastreadores os vejam na primeira pintura.

Next.js (App Router)

ts
// app/page.tsx
export const metadata = {
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A short, compelling summary of the page.',
    url: 'https://example.com/article',
    siteName: 'Example',
    images: [{ url: 'https://example.com/preview.png', width: 1200, height: 630 }],
    locale: 'en_US',
    type: 'website'
  }
}

Nuxt 3

ts
<script setup lang="ts">
useSeoMeta({
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  ogTitle: 'Your Page Title',
  ogDescription: 'A short, compelling summary of the page.',
  ogImage: 'https://example.com/preview.png',
  ogUrl: 'https://example.com/article',
  ogType: 'website',
  ogLocale: 'en_US'
})
</script>

Astro

astro
---
const { title, description, image, url } = Astro.props
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:url" content={url} />
  <meta property="og:type" content="website" />
</head>

WordPress

php
// functions.php — works without an SEO plugin
add_action('wp_head', function () {
  if (!is_singular()) return;
  global $post;
  $img = get_the_post_thumbnail_url($post->ID, 'full') ?: '';
  printf('<meta property="og:title" content="%s" />', esc_attr(get_the_title($post)));
  printf('<meta property="og:description" content="%s" />', esc_attr(wp_trim_words($post->post_excerpt ?: $post->post_content, 30)));
  printf('<meta property="og:image" content="%s" />', esc_url($img));
  printf('<meta property="og:url" content="%s" />', esc_url(get_permalink($post)));
  echo '<meta property="og:type" content="article" />';
});

Perguntas frequentes sobre Open Graph

Respostas rápidas para as perguntas que desenvolvedores e equipes de conteúdo nos fazem com mais frequência ao implementar meta tags Open Graph.

As tags Open Graph ajudam no SEO?
As tags Open Graph não são um sinal direto de classificação na busca do Google, mas melhoram significativamente os resultados indiretos de SEO. Pré-visualizações mais atraentes geram taxas de clique mais altas, mais compartilhamentos e mais backlinks — tudo isso volta para o ranking. Elas também esclarecem o título, a imagem e o idioma de uma página para os rastreadores, reduzindo a chance de o Google escolher uma miniatura não relacionada ou gerar seu próprio snippet.
Qual é a diferença entre Open Graph e Twitter Cards?
Open Graph é o padrão multiplataforma. Twitter Cards é o formato paralelo do X com seu próprio namespace twitter:*. O X recorre ao Open Graph quando as tags específicas do Twitter estão ausentes, então, para a maioria dos sites, basta publicar Open Graph mais uma única declaração twitter:card para optar pela visualização de imagem grande.
Qual é o tamanho de imagem Open Graph recomendado?
1200×630 pixels (proporção 1,91:1) é o padrão seguro — atende ao Facebook, LinkedIn, cartões grandes do X, Slack e Discord sem cortes. Mantenha o arquivo abaixo de 1 MB para que o WhatsApp e o iMessage o busquem. Se seu público é fortemente orientado ao Pinterest, forneça também uma imagem retrato adicional de 1000×1500.
Por que minha visualização ainda mostra a imagem antiga depois que eu a alterei?
Todas as grandes plataformas armazenam em cache os dados Open Graph. Facebook, LinkedIn e X atualizam em ritmos diferentes (de minutos a uma semana). Use o Sharing Debugger do Facebook, o Post Inspector do LinkedIn e o Card Validator do X para forçar um novo rastreamento, e adicione uma query string para invalidar o cache em og:image quando substituir uma imagem na mesma URL.
Aplicações single-page (SPAs) precisam de renderização no servidor para Open Graph?
Sim, para quase toda plataforma social. WhatsApp, LinkedIn, Slack, Discord e Telegram não executam JavaScript ao rastrear uma URL, então meta tags renderizadas apenas no cliente ficam invisíveis para eles. Use SSR (Next.js, Nuxt, Astro), geração estática ou um serviço dedicado de pré-renderização para garantir que as tags estejam presentes na resposta HTML inicial.
O que acontece se uma página não tiver nenhuma tag Open Graph?
A plataforma recorre ao que conseguir extrair: o <title>, a meta description e a primeira imagem com tamanho razoável encontrada no documento. Os resultados são imprevisíveis — frequentemente uma imagem errada, um título truncado ou nenhuma visualização. Adicionar mesmo três tags (og:title, og:description, og:image) elimina a adivinhação.
Os nomes das tags Open Graph diferenciam maiúsculas de minúsculas?
Sim. Use letras minúsculas exatamente como definido pelo protocolo — og:title, não OG:Title. Nomes de propriedades em maiúsculas e minúsculas mistas são silenciosamente ignorados pela maioria dos rastreadores, o que é uma das razões mais comuns para uma visualização parar de funcionar após uma refatoração.
Quais ferramentas posso usar para depurar tags Open Graph?
Além da visualização do OpenGraph.dev, cada plataforma oferece seu próprio validador: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), documentação do X Cards em developer.x.com, validador de Rich Pins do Pinterest e o @WebpageBot do Telegram para limpar seu cache.