Meta Tags Open Graph: Controle Como Seus Links Aparecem nas Redes Sociais

Open Graph: A Primeira Impressão do Seu Link

Quando alguém compartilha sua URL no Twitter, LinkedIn, Slack ou WhatsApp, a plataforma busca sua página e renderiza um card de preview. Sem tags Open Graph, você recebe uma URL nua ou um trecho aleatório de texto. Com elas, você recebe título, descrição e imagem que fazem as pessoas quererem clicar.

Tags Open Graph Essenciais

<head>
  <!-- Obrigatórios -->
  <meta property="og:title" content="Título da Sua Página" />
  <meta property="og:description" content="Descrição atraente com menos de 200 chars" />
  <meta property="og:image" content="https://example.com/og-image.jpg" />
  <meta property="og:url" content="https://example.com/pagina" />
  <meta property="og:type" content="website" />

  <!-- Recomendados -->
  <meta property="og:site_name" content="Nome do Seu 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>

Twitter Cards

O Twitter (X) usa suas próprias tags que fazem fallback para Open Graph se ausentes:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@suaconta" />
<meta name="twitter:title" content="Título da Sua Página" />
<meta name="twitter:description" content="Descrição atraente" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

Tipos de card:

Tipo	Layout	Melhor Para
`summary`	Imagem pequena à esquerda, texto à direita	Artigos, páginas gerais
`summary_large_image`	Imagem grande em cima, texto embaixo	Posts de blog, landing pages (recomendado)
`player`	Player de vídeo/áudio embutido	Conteúdo de mídia
`app`	Card de download de app	Apps mobile

A og:image Perfeita

Tamanho: 1200 x 630 pixels (proporção 1.91:1) — funciona em todas as plataformas
Tamanho do arquivo: Menos de 5MB (menos de 1MB preferível)
Formato: JPG ou PNG (JPG para fotos, PNG para texto/gráficos)
URL: Deve ser absoluta (https://...), não relativa
Texto na imagem: Mantenha texto chave nos 60% centrais — bordas são cortadas em algumas plataformas

Implementação Next.js

// app/page.tsx (App Router)
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Título da Sua Página',
  description: 'Descrição da sua página',
  openGraph: {
    title: 'Título da Sua Página',
    description: 'Uma descrição atraente',
    url: 'https://example.com',
    siteName: 'Seu Site',
    images: [
      {
        url: 'https://example.com/og.jpg',
        width: 1200,
        height: 630,
        alt: 'Descrição da imagem',
      },
    ],
    locale: 'pt_BR',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Título da Sua Página',
    description: 'Uma descrição atraente',
    images: ['https://example.com/og.jpg'],
  },
};

Imagens OG Dinâmicas

Para blogs e páginas dinâmicas, gere imagens OG on the fly:

// app/api/og/route.tsx (Next.js)
import { ImageResponse } from 'next/og';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Título Padrão';

  return new ImageResponse(
    (
      <div style={{
        width: '100%', height: '100%',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        color: 'white', fontSize: 60, fontWeight: 'bold',
        padding: 60,
      }}>
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

Testando e Debugando

Plataforma	Debugger
Facebook	Sharing Debugger (developers.facebook.com)
Twitter/X	Card Validator (cards-dev.twitter.com)
LinkedIn	Post Inspector (linkedin.com/post-inspector)
Geral	opengraph.xyz — preview em múltiplas plataformas

Problema comum: Plataformas cacheiam dados OG agressivamente. Após mudar suas tags, use o debugger da plataforma para forçar um re-scrape. O LinkedIn cacheia por 7 dias.

Checklist

Toda página tem og:title, og:description, og:image, og:url
og:image usa URL absoluta com HTTPS
og:image é 1200x630px, abaixo de 1MB
Tipo de Twitter card está definido (summary_large_image recomendado)
og:title é diferente de og:description (sem conteúdo duplicado)
Teste com debuggers das plataformas antes de lançar

Gere suas tags: Gerador de Meta Tags — preencha os campos, obtenha meta tags prontas para copiar com Open Graph e Twitter Cards.