Contents
Open Graph e Twitter Cards: guia completo
Como os metadados Open Graph controlam as prévias de links, em que diferem dos snippets do Google e como validar títulos, imagens e descrições.
Quando um usuário compartilha um link no Facebook, Telegram, LinkedIn ou WhatsApp, a plataforma não puxa dados do seu site de forma aleatória: ela lê meta tags especiais no <head> da página. Esse é o Open Graph Protocol, desenvolvido pelo Facebook em 2010.
Sem a marcação OG, as redes sociais adivinham o título, a descrição e a imagem por conta própria, e o resultado é imprevisível. Com a marcação correta, você controla por completo a aparência da prévia e maximiza o CTR dos links compartilhados.
<head> viram um cartão com título, descrição e imagem.O Open Graph não afeta diretamente o ranqueamento nas buscas: ele é uma ferramenta de tráfego social. Mas um compartilhamento com prévia atraente aumenta o alcance e pode influenciar indiretamente a autoridade de link e o tráfego de marca.
O que é Open Graph
O Open Graph Protocol (OGP) é um conjunto de meta tags no <head> de uma página HTML que define como a página aparece quando é compartilhada em redes sociais. O protocolo usa o namespace og: e é suportado por todas as grandes plataformas: Facebook, LinkedIn, Telegram, WhatsApp, Pinterest, Slack.
Tags OG principais
| Tag | Obrigatório | Descrição |
|---|---|---|
| og:title | Sim | Título da página na prévia (até 60–70 caracteres) |
| og:description | Recomendado | Descrição (até 155–160 caracteres) |
| og:image | Sim | URL da imagem de prévia (mín. 200×200, recomendado 1200×630) |
| og:url | Sim | URL canônica da página |
| og:type | Sim | Tipo de objeto: website, article, product |
| og:site_name | Recomendado | Nome do site (ex.: 'seohead.tech') |
| og:locale | Recomendado | Idioma da página: en_US, ru_RU |
| og:image:width | Recomendado | Largura da imagem em pixels |
| og:image:height | Recomendado | Altura da imagem em pixels |
| og:image:alt | Recomendado | Texto alternativo da imagem de prévia |
Exemplo de implementação em código:
html
<!-- Full OG tag set for an article -->
<head>
<meta property="og:title" content="Open Graph and Twitter Cards: complete guide" />
<meta property="og:description" content="How to set up Open Graph markup for maximum CTR when sharing on social media" />
<meta property="og:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph and Twitter Cards guide" />
<meta property="og:url" content="https://seohead.tech/en/blog/open-graph" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="seohead.tech" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ru_RU" />
<!-- Additional for article -->
<meta property="article:published_time" content="2026-05-17T00:00:00Z" />
<meta property="article:author" content="https://seohead.tech/en/about" />
<meta property="article:section" content="On-Page SEO" />
</head>og:image — requisitos e tamanhos
A imagem OG é o elemento mais importante da prévia. Ela ocupa mais de 80% da área do cartão e determina se o usuário clica no link. Com tamanho ou formato errados, o Facebook corta a imagem ou simplesmente não a exibe.
| Plataforma | Tamanho recomendado | Mínimo | Formato |
|---|---|---|---|
| Facebook / Meta | 1200×630 px | 600×315 px | JPG, PNG, GIF, WebP |
| Twitter / X | 1200×600 px | 300×157 px | JPG, PNG, WebP, GIF |
| 1200×627 px | 200×200 px | JPG, PNG, GIF | |
| Telegram | 1280×720 px (16:9) | qualquer | JPG, PNG, WebP |
| 1200×630 px | 300×200 px | JPG, PNG |
Solução universal: 1200×630 px em WebP. Essa proporção de 1,91:1 é exibida corretamente em todas as grandes plataformas. O arquivo pode ter até 8 MB (limite do Facebook), mas o ideal é ficar abaixo de 300 KB.
Twitter Cards
O Twitter (X) suporta as tags OG, mas também tem marcação própria: os Twitter Cards. A plataforma lê primeiro as tags twitter: e só depois recorre às tags og:. Recomenda-se especificar os dois conjuntos.
| Tag do Twitter Card | Equivalente em OG | Descrição |
|---|---|---|
| twitter:card | — | Tipo de cartão: summary, summary_large_image, app, player |
| twitter:title | og:title | Título (até 70 caracteres) |
| twitter:description | og:description | Descrição (até 200 caracteres) |
| twitter:image | og:image | URL da imagem |
| twitter:image:alt | og:image:alt | Texto alternativo da imagem |
| twitter:site | — | @username da conta do site |
| twitter:creator | — | @username do autor do conteúdo |
Exemplo de implementação em código:
html
<!-- Twitter Cards markup -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@seohead_tech" />
<meta name="twitter:creator" content="@seohead_tech" />
<meta name="twitter:title" content="Open Graph and Twitter Cards: complete guide" />
<meta name="twitter:description" content="Setting up OG markup for maximum CTR when sharing" />
<meta name="twitter:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta name="twitter:image:alt" content="Open Graph guide" />Tipos de objeto OG
| og:type | Quando usar | Tags adicionais |
|---|---|---|
| website | Página inicial, páginas de serviço, landing pages | — |
| article | Posts de blog, notícias, guias | article:published_time, article:author, article:section |
| product | Páginas de produto em uma loja online | product:price:amount, product:price:currency |
| profile | Páginas de autor, perfis de usuário | profile:first_name, profile:last_name |
| video | Páginas com conteúdo em vídeo | video:duration, video:release_date |
Implementação no Next.js
No Next.js 13+ (App Router), as tags OG são definidas de forma prática pela Metadata API. É uma abordagem tipada, sem a necessidade de escrever as meta tags HTML à mão.
typescript
// app/[locale]/blog/[slug]/page.tsx
import type { Metadata } from 'next';
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const article = await getArticle(params.slug);
return {
title: article.titleEn,
description: article.leadEn,
openGraph: {
title: article.titleEn,
description: article.leadEn,
url: `https://seohead.tech/en/blog/${params.slug}`,
siteName: 'seohead.tech',
images: [
{
url: `https://seohead.tech${article.coverImage}`,
width: 1200,
height: 630,
alt: article.coverImageAltEn,
},
],
locale: 'en_US',
type: 'article',
publishedTime: article.date,
authors: ['https://seohead.tech/en/about'],
section: article.tagEn,
},
twitter: {
card: 'summary_large_image',
title: article.titleEn,
description: article.leadEn,
images: [`https://seohead.tech${article.coverImage}`],
creator: '@seohead_tech',
},
};
}Validação e depuração
| Ferramenta | Plataforma | URL |
|---|---|---|
| Facebook Sharing Debugger | Facebook, Instagram, WhatsApp | developers.facebook.com/tools/debug/ |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ | |
| Open Graph Checker | Universal | opengraph.xyz |
| Telegram | Telegram | Basta colar o link em um chat — a prévia aparece na hora |
O Facebook guarda as tags OG em cache. Se você atualizou a marcação, mas a prévia não mudou, use o Facebook Sharing Debugger (botão 'Scrape Again'). O cache do Telegram se atualiza sozinho; para forçar a atualização, adicione
?v=2 à URL.Perguntas frequentes
O Open Graph afeta o ranqueamento no Google?
Diretamente, não. O Google não usa as tags OG para ranquear. Indiretamente, sim: uma prévia atraente aumenta o compartilhamento, o que pode levar a mais links e tráfego de marca.
Qual é mais importante: og:title ou <title>?
Para a busca, vale a tag
<title>. Para as redes sociais, vale o og:title. Eles podem ser diferentes: na busca, o título é otimizado para palavras-chave (50–60 caracteres); nas redes sociais, para cliques e emoção (até 70 caracteres). As duas tags precisam estar presentes.Por que o Telegram não mostra a prévia?
Três motivos principais: 1) a imagem está inacessível via HTTPS ou bloqueada para bots; 2) o og:image está ausente ou a URL é inválida; 3) a página está fechada para rastreadores (noindex, robots.txt, Cloudflare Bot Fight Mode). Verifique se a imagem está acessível com
curl -A 'TelegramBot' URL.Preciso mesmo dos Twitter Cards se já configurei o OG?
Muitas plataformas podem recorrer ao Open Graph, enquanto as tags específicas de cada uma dão mais controle onde são suportadas. Teste uma URL real compartilhada: nenhum conjunto de tags garante como cada plataforma vai armazenar a prévia em cache ou renderizá-la.
Como gero imagens OG de forma dinâmica?
O Next.js suporta a geração dinâmica de imagens OG pelo
ImageResponse, do next/og. A imagem é gerada no servidor, em PNG ou WebP, a partir de um template em JSX. Assim, cada artigo tem uma prévia única, sem preparar imagens manualmente.Check it with SpiderHead
Free and local: run the audit on your own machine.
