Adiciona uma imagem Open Graph - Docs do MetricSpot

Q: Porque é que a minha imagem não aparece mesmo tendo adicionado a tag?

Três suspeitos habituais: (1) o URL é relativo (/og.png) em vez de absoluto (https://example.com/og.png) — a maioria das plataformas exige absoluto, (2) a imagem devolve 404 ou 500, (3) a plataforma está a mostrar uma pré-visualização em cache de uma versão anterior. Passa o URL pelo debugger do Facebook e faz re-scrape.

Q: Preciso de uma imagem diferente para o Twitter/X?

A não ser que queiras. O X cai de novo no og:image se não houver twitter:image definido, mas o twitter:card deve ser summary_large_image para obteres o layout de cartão grande. Vê Tags Twitter Card.

Q: E se a minha página for dinâmica e o conteúdo mudar?

Gera uma imagem nova em tempo de build (Astro/Next.js — astro-og-canvas, @vercel/og) ou em tempo de pedido (edge functions). Para ecommerce, a página de produto deve usar uma foto do produto. Para posts de blog, um cartão templated com o título do post.

O que esta verificação faz

Procura <meta property="og:image" content="..."> no <head> da página. A verificação falha quando a tag falta, quando o URL é relativo (tem de ser absoluto), ou quando a imagem devolve um código de estado diferente de 200.

Porque é importante

A imagem OG é o maior elemento visual de um cartão de ligação partilhada. Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram, Mastodon, Bluesky e a maioria dos leitores de RSS renderizam-na todos da mesma forma: um cartão com a imagem em cima e título/descrição em baixo.

Uma ligação com uma imagem nítida 1200×630 recebe várias vezes mais cliques do que a mesma ligação sem imagem. Os fallbacks de URL nu parecem partidos — a maioria dos utilizadores assume que a página está morta.

A imagem OG alimenta também o painel “Acerca deste resultado” do Google e os cartões de citação em pesquisa por IA, por isso a sua ausência é também um problema de SEO e de descoberta por IA, não apenas social.

Como corrigir

Põe um URL absoluto para um PNG ou JPG de 1200×630 no <head> da página:

<meta property="og:image" content="https://example.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Screenshot da página inicial do MetricSpot">

As sub-tags :width, :height e :alt são opcionais, mas melhoram a renderização em ligações lentas e a acessibilidade para leitores de ecrã.

Regras de tamanho (especificação do Facebook — toda a outra plataforma segue):

Rácio 1.91:1 (1200×630 é o tamanho canónico).
Mínimo 600×315 — algo mais pequeno renderiza como um pequeno quadrado em vez de um cartão grande.
Máximo 5 MB de ficheiro.
Usa PNG para designs com muito texto, JPG para fotos.

Imagens OG dinâmicas — gera uma imagem única por post automaticamente:

Vercel OG Image — @vercel/og, JSX → PNG no edge.
Astro — astro-og-canvas ou satori para geração em runtime; cozinha em dist/og/*.png no build.
WordPress — Yoast Premium, Rank Math, ou um plugin tipo “WP OG Image Auto” sobrepõem o título do post a um template.
Cloudinary / Imgix — transformações de overlay de texto sobre uma imagem-template base.

WordPress — define a featured image do post e o Yoast/Rank Math usa-a como og:image automaticamente.

Testa antes de publicar — cola o URL no Sharing Debugger do Facebook e no Post Inspector do LinkedIn. Clica em “Re-scrape” para refrescar a cache depois de mudanças.

Perguntas frequentes

Porque é que a minha imagem não aparece mesmo tendo adicionado a tag?

Três suspeitos habituais: (1) o URL é relativo (/og.png) em vez de absoluto (https://example.com/og.png) — a maioria das plataformas exige absoluto, (2) a imagem devolve 404 ou 500, (3) a plataforma está a mostrar uma pré-visualização em cache de uma versão anterior. Passa o URL pelo debugger do Facebook e faz re-scrape.

Preciso de uma imagem diferente para o Twitter/X?

A não ser que queiras. O X cai de novo no og:image se não houver twitter:image definido, mas o twitter:card deve ser summary_large_image para obteres o layout de cartão grande. Vê Tags Twitter Card.

E se a minha página for dinâmica e o conteúdo mudar?

Gera uma imagem nova em tempo de build (Astro/Next.js — astro-og-canvas, @vercel/og) ou em tempo de pedido (edge functions). Para ecommerce, a página de produto deve usar uma foto do produto. Para posts de blog, um cartão templated com o título do post.