Visualização do Open Graph
Veja como um link aparece no Facebook, X e LinkedIn antes de publicar, com base em og:title, og:description, og:image e og:url.
Visualizações do link
example.com
-
-
X (Twitter)
-
-
example.com
-
example.com
Proporção da imagem incorreta
Como funciona
Uma ferramenta de visualização do Open Graph gera uma simulação visual em tempo real de como uma página aparecerá como cartão de link ao ser compartilhada no Facebook, X/Twitter e LinkedIn, usando os valores de og:title, og:description, og:image e og:url que você fornece. Nada é enviado a um servidor: os cartões são criados no seu navegador a partir dos campos à esquerda.
- Insira seus valores do Open Graph
Cole os mesmos og:title, og:description, og:image e og:url que você planeja publicar ou que uma página ativa já possui em sua seção head.
- Verifique os três cartões
Facebook, X e LinkedIn recortam títulos e descrições de maneiras ligeiramente diferentes. Uma URL de imagem quebrada mostra o mesmo fallback exibido pelas plataformas reais.
- Copiar as tags
Copie as meta tags geradas para o head da sua página e verifique a página ativa com a ferramenta de depuração de cada plataforma.
Open Graph na prática
O Open Graph (OG) é um protocolo de metadados, criado originalmente pelo Facebook, que permite que qualquer página se torne um objeto rico quando compartilhada. Quando alguém compartilha sua URL, o rastreador da plataforma lê suas meta tags OG e as usa para criar o cartão mostrado acima. Sem elas, as plataformas tentam adivinhar seu conteúdo e geralmente produzem uma visualização ruim.
Tamanho da imagem
O tamanho recomendado para og:image é 1200 por 630 pixels, com proporção de 1,91:1, o que garante uma renderização nítida no Facebook, LinkedIn e X em diferentes densidades de tela. Abaixo de 600 por 315 pixels, o Facebook passa a usar uma miniatura pequena em vez de um cartão de largura total.
Armazenamento em cache
As plataformas sociais armazenam dados do Open Graph em cache de forma agressiva, às vezes por dias. Após alterar suas tags, use a ferramenta de depuração de cada plataforma para forçar uma nova varredura: Sharing Debugger do Facebook, Post Inspector do LinkedIn ou Card Validator do X.
og:title não é o título da página
A tag title do HTML serve para mecanismos de busca e abas do navegador. A og:title é lida apenas pelas plataformas sociais e pode ser mais curta ou informal que seu título de SEO. Use o gerador de meta tags para criar ambos juntos.
Perguntas frequentes
O que é Open Graph e como funciona?
Open Graph (OG) é um protocolo de metadados criado pelo Facebook que permite que qualquer página da web se torne um objeto rico nas redes sociais. Quando um usuário compartilha sua URL, o rastreador da plataforma lê suas meta tags OG (og:title, og:description, og:image, og:url) e as usa para montar um cartão visual de link. Sem essas tags, as plataformas tentam adivinhar o conteúdo da sua página, muitas vezes gerando pré-visualizações pouco atraentes ou imprecisas.
Qual tamanho de imagem devo usar nas tags Open Graph?
O tamanho recomendado para og:image é 1200 x 630 pixels, o que garante boa exibição no Facebook, LinkedIn e X/Twitter em diversas densidades de tela. O tamanho mínimo para evitar uma miniatura pequena no Facebook é 600 x 315 pixels. Use o formato JPEG ou PNG, mantenha o arquivo abaixo de 8 MB e evite colocar textos importantes ou logotipos nos 10% externos da imagem, pois algumas plataformas recortam as bordas em determinados tamanhos de cartão.
Por que minha imagem Open Graph não atualiza após a alteração?
As plataformas sociais armazenam dados do Open Graph em cache de forma agressiva, às vezes por dias ou semanas. Após atualizar suas tags OG e publicar, você precisa limpar o cache manualmente usando a ferramenta de depuração de cada plataforma: Sharing Debugger do Facebook, Post Inspector do LinkedIn ou Card Validator do X. Insira sua URL e solicite uma nova varredura. A visualização antiga continuará aparecendo em publicações já feitas, independentemente da limpeza do cache.
As tags Open Graph afetam o ranking de SEO?
As tags Open Graph não influenciam diretamente o algoritmo de classificação do Google. No entanto, elas impactam indiretamente o SEO ao melhorar as taxas de cliques em compartilhamentos sociais; um og:image e um og:title atraentes geram mais cliques, o que aumenta o tráfego e possíveis backlinks. Pense na otimização OG como SEO social: ela controla sua taxa de cliques nas redes sociais assim como as tags de título e descrições controlam a CTR nos resultados de busca.
Qual é a diferença entre og:title e a tag title do HTML?
A tag de título HTML (mostrada nas abas do navegador e nos resultados de pesquisa) é destinada a mecanismos de busca e navegadores. A tag og:title é específica para plataformas de redes sociais e controla o título exibido nas pré-visualizações de cartões de link no Facebook, LinkedIn e X/Twitter. A melhor prática é ter ambas. Você pode usar o mesmo texto ou escrever um og:title mais amigável para redes sociais, que seja mais direto ou conversacional do que o título da página otimizado para SEO.