Adiciona as tags principais de Open Graph

Q: E se a minha página já tem ` ` e meta description?

Os motores de busca leem e . As plataformas sociais leem og:title e og:description. São campos separados com intenções separadas (snippets de pesquisa vs pré-visualizações de partilha), portanto duplica-os em vez de saltar as versões OG.

O que esta verificação faz

Procura no <head> da página quatro tags meta: og:title, og:description, og:image e og:url. São as propriedades mínimas de Open Graph que todas as grandes plataformas sociais, de mensagens e de chat leem quando alguém cola o teu link.

Porque é importante

Quando as tags faltam, a pré-visualização da ligação no Facebook, LinkedIn, X, Slack, Discord, iMessage, WhatsApp e Telegram cai para um URL nu, com talvez um título de página recolhido — sem imagem de pré-visualização, sem descrição. A taxa de cliques num cartão sem pré-visualização é uma fração da de um cartão com uma imagem 1200×630.

O Open Graph é também o dado que o Google usa no painel “Acerca deste resultado” e nos cartões de citação de pesquisa por IA. Uma página sem tags OG aparece como ligação simples enquanto os concorrentes aparecem como cartões completos.

Como corrigir

Coloca as quatro tags no <head> de cada página pública. Os valores podem espelhar o teu <title> e meta description, mas devem ser afinados para social — um toque mais convidativo a clicar e uma imagem escolhida à mão.

<head>
  <meta property="og:title" content="Auditoria SEO grátis em 60 segundos — MetricSpot">
  <meta property="og:description" content="Vê o que os agentes de IA e o Google veem no teu site. 91 verificações, sem registo.">
  <meta property="og:image" content="https://metricspot.com/og/home.png">
  <meta property="og:url" content="https://metricspot.com/">
  <meta property="og:type" content="website">
</head>

Astro / Next.js — gera valores por página a partir do frontmatter:

---
const { title, description, ogImage } = Astro.props;
const url = Astro.url.href;
---
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(ogImage, Astro.site).href} />
<meta property="og:url" content={url} />

WordPress — Yoast SEO, Rank Math e SEOPress emitem todas estas tags automaticamente. Abre uma delas, define os valores por defeito para social em SEO → Social e sobrepõe por post conforme necessário.

Regras de imagem. PNG ou JPG, ≥1200×630 (1.91:1), abaixo de 5 MB. Vê a página dedicada Open Graph image para detalhes de tamanho/formato.

Testa antes de publicar — cola o URL no Sharing Debugger do Facebook e no Post Inspector do LinkedIn e carrega em “Scrape Again” para limpar a cache.

Perguntas frequentes

Preciso de tags Open Graph e Twitter Card?

O X (anteriormente Twitter) cai de novo no Open Graph se não houver tags twitter:, por isso o OG sozinho cobre a maior parte da superfície. Adiciona Twitter Card apenas se precisares de uma imagem ou resumo diferentes no X — vê Tags Twitter Card.

E se a minha página já tem `<title>` e meta description?

Os motores de busca leem <title> e <meta name="description">. As plataformas sociais leem og:title e og:description. São campos separados com intenções separadas (snippets de pesquisa vs pré-visualizações de partilha), portanto duplica-os em vez de saltar as versões OG.

Porque é que a pré-visualização ainda parece errada depois de adicionar as tags?

Facebook, LinkedIn e Slack guardam pré-visualizações em cache de forma agressiva — por vezes durante semanas. Passa o URL pelo debugger da plataforma e clica em “Re-scrape”. As tuas alterações não aparecem até a cache ser limpa.