Tags Open Graph: guia completo de prévias de links

As tags Open Graph são tags <meta> no <head> de uma página que decidem como ela aparece quando compartilhada: o título, a descrição curta, a imagem e o link. O Facebook criou o protocolo, e hoje LinkedIn, X, Slack, Discord, WhatsApp, iMessage e a maioria dos outros apps o leem. Quatro tags formam o núcleo, og:title, og:type, og:image e og:url, e acrescentar uma descrição, um tamanho de imagem e uma tag de Twitter card cobre quase todas as plataformas.

As tags Open Graph que toda página precisa

Cole isto no head de uma página e troque os valores. Cada tag usa property, não name, e toda URL é absoluta.

<head>
  <title>Spring menu at Harbour Kitchen</title>
  <meta name="description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://harbourkitchen.example/spring" />
  <meta property="og:title" content="Spring menu at Harbour Kitchen" />
  <meta property="og:description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />
  <meta property="og:site_name" content="Harbour Kitchen" />
  <meta property="og:locale" content="en_GB" />
  <meta property="og:image" content="https://harbourkitchen.example/og/spring.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="The spring menu title over a soft green gradient" />

  <!-- X (Twitter) -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@harbourkitchen" />
</head>

A og:image: tamanho e formato

A imagem é o que as pessoas realmente notam. Use 1200×630 pixels, uma proporção de cerca de 1,91:1, que é o tamanho que as plataformas esperam para prévias grandes e o listado em tamanho da imagem Open Graph. Mantenha as palavras e o logotipo importantes longe das bordas, porque alguns apps cortam em quadrado ou arredondam os cantos.

Salve em PNG quando for sobretudo texto e degradê, ou em JPEG de alta qualidade para fotografias, e mantenha o arquivo pequeno, idealmente algumas centenas de kilobytes, já que as plataformas definem seus próprios limites de tamanho e arquivos grandes carregam devagar nos feeds. PNG vs JPG explica a escolha, e otimização de imagens para a web cobre a compressão.

Tags Twitter card para o X

O X usa as próprias tags twitter:, escritas com name em vez de property. A que importa é twitter:card. Quando twitter:title, twitter:description ou twitter:image faltam, o X recorre às tags Open Graph correspondentes, então raramente é preciso duplicá-las.

Tags Open Graph para artigos

Posts de blog e páginas de notícias podem dizer mais sobre si com og:type definido como article e algumas propriedades extras. Alguns apps mostram a data ou o autor, e elas ajudam as plataformas a entender a página.

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-10-01T09:00:00Z" />
<meta property="article:modified_time" content="2026-10-03T14:30:00Z" />
<meta property="article:author" content="https://harbourkitchen.example/about/ana" />
<meta property="article:section" content="Menus" />

Definindo tags Open Graph em um framework

A maioria dos frameworks gera essas tags a partir de dados. No Next.js, exporte um objeto metadata da página ou do layout e o framework escreve as tags para você. Defina um metadataBase uma só vez para que caminhos relativos de imagem virem absolutos.

export const metadata = {
  metadataBase: new URL('https://harbourkitchen.example'),
  title: 'Spring menu at Harbour Kitchen',
  description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
  openGraph: {
    type: 'website',
    url: '/spring',
    title: 'Spring menu at Harbour Kitchen',
    description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
    siteName: 'Harbour Kitchen',
    images: [{ url: '/og/spring.png', width: 1200, height: 630, alt: 'The spring menu title over a soft green gradient' }],
  },
  twitter: { card: 'summary_large_image', site: '@harbourkitchen' },
}

Testando e corrigindo prévias de compartilhamento

1. 1

   Veja o código-fonte

   Abra o código-fonte da página, não o inspetor, e confirme que as tags estão no HTML do servidor. Muitos crawlers não executam JavaScript.

2. 2

   Confira a URL da imagem

   Cole o endereço da og:image numa janela privada. Ela deve carregar sem login.

3. 3

   Reanalise

   Passe a URL pelo Sharing Debugger do Facebook e pelo Post Inspector do LinkedIn para limpar o cache deles.

4. 4

   Versione a imagem

   Se uma imagem antiga persistir, mude o nome do arquivo ou acrescente uma query string como ?v=2 e reanalise.

5. 5

   Compartilhe em privado

   Envie o link para você mesmo no Slack ou num app de mensagens para ver uma prévia real.

As tags são a parte fácil; a imagem é o trabalho de design, e precisa se ler no tamanho de miniatura. No Gradiently, a prévia de link é um dos tamanhos embutidos, em 1200×630, o Mark mantém sua área mais calma atrás das palavras, e o Designer pode criar a imagem de compartilhamento de uma página a partir de uma frase e depois os tamanhos de post correspondentes para todas as plataformas.