Open Graph tags: o guia completo das pré-visualizações

As Open Graph tags são tags <meta> no <head> de uma página que decidem o seu aspeto quando é partilhada: o título, a descrição curta, a imagem e a ligação. O Facebook criou o protocolo, e hoje o LinkedIn, o X, o Slack, o Discord, o WhatsApp, o iMessage e a maioria das outras aplicações leem-no. 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 Twitter card cobre quase todas as plataformas.

As Open Graph tags de que toda a página precisa

Cola isto no head de uma página e substitui os valores. Cada tag usa property, não name, e todos os URL são absolutos.

<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. Usa 1200×630 píxeis, uma proporção de cerca de 1,91:1, que é o tamanho que as plataformas esperam para pré-visualizações grandes e o indicado em tamanho da imagem Open Graph. Mantém as palavras importantes e o logótipo longe das margens, porque algumas aplicações cortam para um quadrado ou arredondam os cantos.

Guarda-a como PNG quando for sobretudo texto e gradiente, ou como JPEG de alta qualidade para fotografias, e mantém o ficheiro pequeno, idealmente algumas centenas de quilobytes, já que as plataformas definem os seus próprios limites de tamanho e os ficheiros grandes carregam devagar nos feeds. PNG vs JPG explica a escolha, e otimizar imagens para a web trata da compressão.

Twitter card tags para o X

O X usa as suas próprias tags twitter:, escritas com name em vez de property. A que importa é twitter:card. Quando faltam twitter:title, twitter:description ou twitter:image, o X recorre às Open Graph tags correspondentes, por isso raramente precisas de as duplicar.

Open Graph tags para artigos

Os artigos de blogue e as páginas de notícias podem dizer mais sobre si com og:type definido como article e algumas propriedades extra. Algumas aplicações mostram a data ou o autor, e ajudam as plataformas a perceber 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" />

Definir Open Graph tags numa framework

A maioria das frameworks gera estas tags a partir de dados. No Next.js, exporta um objeto metadata da página ou do layout e a framework escreve as tags por ti. Define um metadataBase uma vez para que os caminhos de imagem relativos passem a 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' },
}

Testar e corrigir pré-visualizações de partilha

1. 1

   Vê o código-fonte

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

2. 2

   Verifica o URL da imagem

   Cola o endereço da og:image numa janela privada. Deve carregar sem login.

3. 3

   Volta a analisar

   Passa o URL pelo Sharing Debugger do Facebook e pelo Post Inspector do LinkedIn para limpar as suas caches.

4. 4

   Dá uma versão à imagem

   Se uma imagem antiga persistir, muda-lhe o nome do ficheiro ou junta uma query string como ?v=2 e volta a analisar.

5. 5

   Partilha-a em privado

   Envia a ligação a ti próprio no Slack ou numa aplicação de mensagens para veres uma pré-visualização real.

As tags são a parte fácil; a imagem é o trabalho de design, e tem de se ler em tamanho de miniatura. No Gradiently, a pré-visualização de ligação é um dos tamanhos incluídos, em 1200×630, o Mark mantém a sua zona mais calma atrás das palavras, e o Designer pode criar a imagem de partilha de uma página a partir de uma frase e depois os tamanhos de publicação correspondentes para todas as plataformas.