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

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

Todo link compartilhado vira um pequeno pôster da sua página, feito de poucas meta tags. Acerte e a prévia parece desenhada; erre uma e as plataformas adivinham. Aqui está o conjunto completo, com código para copiar.

## The short version

- As tags Open Graph são meta tags no head de uma página que dizem às redes sociais e aos apps de mensagem qual título, descrição e imagem mostrar quando o link é compartilhado.
- O protocolo Open Graph trata og:title, og:type, og:image e og:url como as tags básicas obrigatórias, e og:description e og:site_name como fortemente recomendadas.
- Uma og:image de 1200×630 pixels, referenciada com uma URL https absoluta, funciona bem no Facebook, no LinkedIn, no X, no Slack, no iMessage e na maioria dos outros apps.
- O X lê twitter:card para escolher o layout da prévia e recorre às tags Open Graph para título, descrição e imagem quando as suas próprias tags faltam.
- As plataformas guardam as prévias em cache, então depois de mudar as tags você precisa reanalisar a URL numa ferramenta de depuração, como o Sharing Debugger do Facebook ou o Post Inspector do LinkedIn.

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.

```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 pegará emprestados o título, a descrição e a imagem das tags Open Graph acima.

| Tag | O que faz | Dicas |
| --- | --- | --- |
| `og:title` | O título em destaque da prévia | Abaixo 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; alguns apps a escondem |
| `og:image` | A imagem da prévia | URL https absoluta, 1200×630 |
| `og:url` | O endereço canônico da página | Igual ao seu link canônico, sem parâmetros de rastreamento |
| `og:type` | O que a página é | `website` para a maioria das páginas, `article` para posts |
| `og:site_name` | Sua marca, exibida em tamanho pequeno | Mantenha igual em todas as páginas |
| `og:image:alt` | Uma descrição da imagem | Lida em voz alta por leitores de tela em algumas plataformas |

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

## 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](https://gradiently.design/pt-br/guide/open-graph-image-size). Mantenha as palavras e o logotipo importantes longe das bordas, porque alguns apps cortam em quadrado ou arredondam os cantos.

- Open Graph 1200×630: 1200 × 630
- Imagem de link do LinkedIn 1200×627: 1200 × 627
- Corte quadrado 1200×1200: 1200 × 1200

O formato de prévia grande e o quadrado para o qual alguns apps de chat e o card de resumo do X cortam. Centralize a mensagem para sobreviver aos dois.

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

Uma imagem de compartilhamento larga de 1200 por 630 com o nome de um restaurante, um título sobre o cardápio de primavera e uma linha de reserva sobre um degradê suave

Uma imagem de compartilhamento feita para a prévia: palavras curtas, centralizadas, grandes o bastante para ler no tamanho que o feed mostra.

> **A imagem precisa estar acessível** As plataformas buscam a `og:image` a partir dos próprios servidores. Um caminho relativo, uma página atrás de login, um firewall que bloqueia bots desconhecidos ou uma URL assinada expirada resultam numa prévia em branco.

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

| Tag | Valores | Observações |
| --- | --- | --- |
| `twitter:card` | `summary_large_image` or `summary` | Imagem grande, ou uma miniatura quadrada pequena |
| `twitter:site` | `@suamarca` | A conta do site |
| `twitter:creator` | `@autor` | O autor de um artigo |
| `twitter:image:alt` | Texto | Use quando a imagem for diferente da versão og |

Acrescente só estas e deixe o Open Graph fornecer o resto.

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

```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. Mantenha modified_time honesto; atualize-o só quando o conteúdo mudar de forma significativa.

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

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

Consulte a documentação da versão do seu framework, já que as APIs de metadados mudam entre versões. Para imagens geradas por página, veja [imagens OG dinâmicas](https://gradiently.design/pt-br/guide/dynamic-og-images).

## Testando e corrigindo prévias de compartilhamento

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. **Confira a URL da imagem** Cole o endereço da og:image numa janela privada. Ela deve carregar sem login.
3. **Reanalise** Passe a URL pelo Sharing Debugger do Facebook e pelo [Post Inspector do LinkedIn](https://www.linkedin.com/post-inspector/) para limpar o cache deles.
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. **Compartilhe em privado** Envie o link para você mesmo no Slack ou num app de mensagens para ver uma prévia real.

### Prévia em branco ou errada

- Tags injetadas por JavaScript no cliente
- Caminho relativo na og:image
- og:url aponta para outra página
- Imagem minúscula ou de formato estranho
- Tags mudaram, prévia não

### Correção

- Renderize as tags no servidor
- Use uma URL https completa
- Iguale og:url ao endereço canônico
- Exporte em 1200×630
- Reanalise ou renomeie a imagem

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

## FAQ

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

Meta tags no head de uma página, como og:title e og:image, que dizem às redes sociais e aos apps de mensagem o que mostrar quando o link é compartilhado.

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

O protocolo lista og:title, og:type, og:image e og:url como as tags básicas. Acrescente og:description e og:site_name para uma prévia completa.

### Qual deve ser o tamanho de uma og:image?

1200×630 pixels funciona no Facebook, no LinkedIn, no X e na maioria dos apps de chat. Use uma URL https absoluta e mantenha o conteúdo principal centralizado.

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

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

### Por que a prévia do meu link não atualiza?

As plataformas guardam as prévias em cache. Reanalise a URL no Sharing Debugger do Facebook ou no Post Inspector do LinkedIn, ou renomeie o arquivo da imagem.

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

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