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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/open-graph-tags)

Cada ligação partilhada torna-se um pequeno cartaz da tua página, construído com algumas meta tags. Acerta-lhes e a pré-visualização parece desenhada; falha uma e as plataformas adivinham. Aqui está o conjunto completo, com código para copiar.

## The short version

- As Open Graph tags são meta tags no head de uma página que dizem às plataformas sociais e às aplicações de mensagens que título, descrição e imagem mostrar quando a ligação é partilhada.
- O protocolo Open Graph considera og:title, og:type, og:image e og:url as tags básicas obrigatórias, e og:description e og:site_name fortemente recomendadas.
- Uma og:image de 1200×630 píxeis, referenciada com um URL https absoluto, funciona bem no Facebook, LinkedIn, X, Slack, iMessage e na maioria das outras aplicações.
- O X lê twitter:card para escolher a composição da pré-visualização e recorre às Open Graph tags para o título, a descrição e a imagem quando faltam as suas próprias tags.
- As plataformas guardam as pré-visualizações em cache, por isso, depois de mudares as tags, tens de voltar a analisar o URL numa ferramenta de depuração como o Sharing Debugger do Facebook ou o Post Inspector do LinkedIn.

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.

```html
<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>
```

Um conjunto completo e funcional. O X vai buscar o título, a descrição e a imagem às Open Graph tags acima.

| Tag | O que faz | Dicas |
| --- | --- | --- |
| `og:title` | O título a negrito da pré-visualização | Menos de cerca de 60 caracteres; não precisa do nome do site |
| `og:description` | Uma ou duas linhas sob o título | Cerca de 110 a 160 caracteres; algumas aplicações escondem-na |
| `og:image` | A imagem da pré-visualização | URL https absoluto, 1200×630 |
| `og:url` | O endereço canónico da página | Igual à tua ligação canónica, sem parâmetros de rastreio |
| `og:type` | O que a página é | `website` para a maioria das páginas, `article` para artigos |
| `og:site_name` | A tua marca, mostrada em pequeno | Mantém-no igual em todas as páginas |
| `og:image:alt` | Uma descrição da imagem | Lida em voz alta por leitores de ecrã em algumas plataformas |

As tags que importam na prática. A lista completa está no site do próprio protocolo, ogp.me.

## 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](https://gradiently.design/pt-pt/guide/open-graph-image-size). Mantém as palavras importantes e o logótipo longe das margens, porque algumas aplicações cortam para um quadrado ou arredondam os cantos.

- Open Graph 1200×630: 1200 × 630
- Imagem de ligação LinkedIn 1200×627: 1200 × 627
- Corte quadrado 1200×1200: 1200 × 1200

A forma da pré-visualização grande e o quadrado a que cortam algumas aplicações de chat e o cartão de resumo do X. Centra a mensagem para sobreviver a ambos.

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](https://gradiently.design/pt-pt/guide/png-vs-jpeg) explica a escolha, e [otimizar imagens para a web](https://gradiently.design/pt-pt/guide/lighthouse-image-performance) trata da compressão.

Uma imagem de partilha larga de 1200 por 630 com o nome de um restaurante, um título sobre uma ementa de primavera e uma linha de reservas sobre um gradiente suave

Uma imagem de partilha feita para a pré-visualização: palavras curtas, centradas e grandes o suficiente para se lerem no tamanho em que um feed a mostra.

> **A imagem tem de ser acessível** As plataformas vão buscar `og:image` a partir dos seus próprios servidores. Um caminho relativo, uma página atrás de um login, uma firewall que bloqueia bots desconhecidos ou um URL assinado expirado dão-te uma pré-visualização em branco.

## 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.

| Tag | Valores | Notas |
| --- | --- | --- |
| `twitter:card` | `summary_large_image` ou `summary` | Imagem grande, ou uma pequena miniatura quadrada |
| `twitter:site` | `@amarca` | A conta do site |
| `twitter:creator` | `@autor` | O autor de um artigo |
| `twitter:image:alt` | Texto | Usa quando a imagem difere da versão og |

Junta só estas e deixa o Open Graph fornecer o resto.

## 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.

```html
<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" />
```

As datas usam ISO 8601. Mantém modified_time honesto; atualiza-o só quando o conteúdo muda de forma relevante.

## 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.

```ts
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' },
}
```

Consulta a documentação da versão da tua framework, porque as APIs de metadados mudam entre versões. Para imagens geradas por página, vê [imagens OG dinâmicas](https://gradiently.design/pt-pt/guide/dynamic-og-images).

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

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. **Verifica o URL da imagem** Cola o endereço da og:image numa janela privada. Deve carregar sem login.
3. **Volta a analisar** Passa o URL pelo Sharing Debugger do Facebook e pelo [Post Inspector do LinkedIn](https://www.linkedin.com/post-inspector/) para limpar as suas caches.
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. **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.

### Pré-visualização em branco ou errada

- Tags injetadas por JavaScript do lado do cliente
- Caminho og:image relativo
- og:url aponta para outra página
- Imagem minúscula ou de forma estranha
- Tags alteradas, pré-visualização igual

### Solução

- Gerar as tags no servidor
- Usar um URL https completo
- Fazer og:url coincidir com o endereço canónico
- Exportar em 1200×630
- Voltar a analisar, ou mudar o nome da imagem

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](https://gradiently.design/pt-pt/guide/social-media-image-sizes).

## FAQ

### O que são as Open Graph tags?

Meta tags no head de uma página, como og:title e og:image, que dizem às plataformas sociais e às aplicações de mensagens o que mostrar quando a ligação é partilhada.

### Que Open Graph tags são obrigatórias?

O protocolo indica og:title, og:type, og:image e og:url como as tags básicas. Junta og:description e og:site_name para uma pré-visualização completa.

### Que tamanho deve ter uma og:image?

1200×630 píxeis funciona no Facebook, LinkedIn, X e na maioria das aplicações de chat. Usa um URL https absoluto e mantém o conteúdo principal centrado.

### Preciso de Twitter card tags se tenho Open Graph tags?

Junta `twitter:card`, normalmente definida como `summary_large_image`. O X recorre ao Open Graph para o título, a descrição e a imagem.

### Porque é que a minha pré-visualização de ligação não se atualiza?

As plataformas guardam as pré-visualizações em cache. Volta a analisar o URL no Sharing Debugger do Facebook ou no Post Inspector do LinkedIn, ou muda o nome do ficheiro da imagem.

### Devo usar property ou name nas tags og?

As Open Graph tags usam `property` e as tags Twitter usam `name`. A maioria dos analisadores aceita ambas, mas seguir a convenção evita surpresas.