Open Graph é um protocolo de metadados criado pelo Facebook que controla como URLs são exibidas ao serem compartilhadas em redes sociais
Quando um link é compartilhado no Facebook, LinkedIn ou WhatsApp, a prévia exibida — com imagem, título e descrição — não é gerada aleatoriamente. Essa apresentação é controlada pelas meta tags Open Graph presentes no código HTML da página, e a ausência dessas tags resulta em previews genéricos ou incorretos.
O protocolo Open Graph foi criado pelo Facebook em 2010 para padronizar a forma como páginas da web são representadas em redes sociais. Desde então, praticamente todas as plataformas — incluindo LinkedIn, Twitter/X, WhatsApp, Telegram e Pinterest — passaram a utilizar essas meta tags para gerar previews de links compartilhados.
A configuração correta do Open Graph impacta diretamente a taxa de cliques em links compartilhados. Um preview com imagem adequada, título claro e descrição relevante gera significativamente mais engajamento do que um link sem metadados, onde a plataforma precisa inferir informações da página de forma automática.
Profissionais de marketing e desenvolvedores que dominam o Open Graph garantem controle total sobre a apresentação da marca em compartilhamentos sociais, evitando previews quebrados e maximizando o retorno de cada link publicado em redes sociais.
O que é Open Graph e como funciona
Open Graph é um protocolo que transforma qualquer página da web em um objeto rico dentro de um grafo social. Segundo a especificação oficial em ogp.me, o protocolo utiliza meta tags inseridas no <head> do HTML para comunicar aos crawlers das redes sociais as informações que devem ser exibidas no preview do link.
Na prática, quando um usuário compartilha uma URL, a plataforma social envia um crawler para buscar o código HTML da página. Esse crawler lê as meta tags og: e utiliza os valores encontrados para montar a prévia. Se as tags não existirem, a plataforma tenta extrair informações automaticamente — com resultados frequentemente inadequados.
O protocolo define quatro propriedades obrigatórias que toda página deve conter: og:title (título), og:type (tipo de conteúdo), og:image (imagem de preview) e og:url (URL canônica). Propriedades adicionais como og:description, og:site_name e og:locale complementam a apresentação e oferecem controle mais refinado sobre como cada elemento do preview é exibido nas diferentes plataformas.
Além das redes sociais, aplicativos de mensagens como WhatsApp e Telegram também utilizam Open Graph para gerar previews de links compartilhados em conversas. Essa abrangência torna o protocolo uma camada de apresentação universal para qualquer URL compartilhada na internet, independentemente da plataforma de destino utilizada pelo público.
Tags obrigatórias do Open Graph
As quatro tags obrigatórias constituem o mínimo necessário para que plataformas sociais gerem um preview funcional e completo. Sem essas meta tags no <head> do HTML, o controle sobre a apresentação do link é perdido e delegado aos algoritmos de cada plataforma.
A tag og:title define o título exibido no preview e não precisa ser idêntica ao <title> da página. Enquanto o title tag é otimizado para mecanismos de busca, o og:title pode ser adaptado para o contexto social — mais direto, com call-to-action ou com abordagem que gere curiosidade.
A tag og:image é a mais impactante visualmente, pois a imagem ocupa a maior parte do preview na maioria das plataformas. A dimensão recomendada pelo Facebook é 1200×630 pixels, com peso máximo de 8 MB. Imagens menores que 200×200 pixels podem não ser exibidas corretamente em algumas redes.
As tags og:url e og:type completam o conjunto obrigatório. A og:url define a URL canônica do conteúdo (evitando duplicações quando a mesma página é acessível por múltiplas URLs) e a og:type classifica o tipo de conteúdo — website, article, video.other ou product são os valores mais comuns.
Tags opcionais e complementares
A tag og:description funciona de forma análoga à meta description do HTML, oferecendo um resumo do conteúdo para o preview social. A recomendação é manter entre 60 e 110 caracteres para garantir exibição completa nas principais plataformas sem corte de texto.
A tag og:site_name identifica o site de origem e é exibida de forma discreta no preview, geralmente acima ou abaixo do título. Essa informação reforça a credibilidade do conteúdo ao associá-lo a uma marca conhecida, especialmente em contextos onde o domínio da URL não é imediatamente reconhecível pelo público.
Para conteúdos em português brasileiro, a tag og:locale deve ser definida como pt_BR. Essa especificação ajuda as plataformas a selecionar o idioma correto para elementos de interface ao redor do preview e melhora a relevância em algoritmos de distribuição geográfica das redes sociais.
Imagem og:image — dimensões e boas práticas
A imagem de preview é o elemento visual dominante no compartilhamento e merece atenção especial na configuração. Cada rede social possui requisitos e recomendações diferentes para dimensões, proporção e formato de arquivo, e uma imagem que funciona bem em uma plataforma pode ser cortada ou redimensionada em outra.
A dimensão universal mais segura é 1200×630 pixels (proporção 1.91:1), compatível com Facebook, LinkedIn e Twitter/X. Para otimização de imagens em contextos sociais, o formato recomendado é JPEG ou PNG, com tamanho de arquivo inferior a 1 MB para garantir carregamento rápido pelos crawlers das plataformas.
| Plataforma | Dimensão recomendada | Proporção | Formato |
|---|---|---|---|
| 1200×630 px | 1.91:1 | JPG, PNG | |
| 1200×627 px | 1.91:1 | JPG, PNG | |
| Twitter/X | 1200×600 px | 2:1 | JPG, PNG, GIF |
| 300×200 px (mín.) | 1.5:1 | JPG, PNG | |
| 1000×1500 px | 2:3 | JPG, PNG |
Um erro comum é utilizar logotipos ou imagens com muito texto como og:image. As plataformas priorizam imagens com conteúdo visual relevante — fotografias, ilustrações ou gráficos — em vez de elementos puramente textuais. Imagens com mais de 20% de texto podem ter alcance reduzido no Facebook e no Instagram.
Twitter Cards e tags específicas
O Twitter/X utiliza seu próprio sistema de meta tags chamado Twitter Cards, que funciona de forma complementar ao Open Graph. Quando ambos estão presentes na página, o Twitter prioriza suas tags proprietárias (twitter:card, twitter:title, twitter:description, twitter:image); se ausentes, utiliza as tags og: como fallback.
A tag twitter:card define o formato do preview e aceita quatro valores: summary (preview pequeno com imagem à esquerda), summary_large_image (preview com imagem grande), player (conteúdo de vídeo ou áudio) e app (download de aplicativo). O valor summary_large_image é o mais utilizado para conteúdo editorial e gera maior visibilidade nos timelines.
Na prática, a implementação mais eficiente consiste em incluir as tags Open Graph completas e adicionar apenas twitter:card com o formato desejado. Dessa forma, o Twitter utiliza as informações og: para título, descrição e imagem, e a tag proprietária para definir o layout do preview — evitando duplicação desnecessária de código.
Open Graph e SEO
O Open Graph não é um fator de rankeamento direto para mecanismos de busca como o Google. No entanto, seu impacto indireto no SEO é mensurável: previews otimizados geram mais cliques em compartilhamentos sociais, aumentando o tráfego para a página e potencialmente gerando backlinks naturais de sites que encontram o conteúdo via redes sociais.
Além disso, o Google utiliza informações de meta tags og: como dados complementares para entender o conteúdo da página. Embora o mecanismo de busca priorize o <title> e a meta description para resultados orgânicos, as tags Open Graph fornecem contexto adicional sobre o tipo de conteúdo e sobre como ele deve ser categorizado.
A consistência entre as informações de SEO e as de Open Graph é uma boa prática que evita confusão tanto para buscadores quanto para plataformas sociais. O título og:title pode ser diferente do title tag, mas ambos devem representar o mesmo conteúdo de forma coerente para manter a credibilidade da página.
Em campanhas de marketing digital, o Open Graph permite testes A/B de previews sem alterar o conteúdo da página para buscadores. Equipes podem ajustar og:title e og:description para diferentes abordagens — informativa, curiosidade ou call-to-action — enquanto mantêm o title tag otimizado para rankeamento orgânico de forma independente.
Open Graph para vídeos
Conteúdos em vídeo utilizam tags específicas do Open Graph para gerar previews interativos em redes sociais. A tag og:video aponta para a URL do arquivo de vídeo ou do player embutido, e funciona em conjunto com og:video:type (formato do vídeo), og:video:width e og:video:height para definir as dimensões de exibição.
O tipo de conteúdo deve ser definido como og:type: video.other para vídeos genéricos. Para profissionais que trabalham com SEO para YouTube e outras plataformas de vídeo, a implementação correta dessas tags garante que o preview exiba o player do vídeo diretamente no feed social, em vez de apenas uma imagem estática com link.
No Facebook, vídeos com Open Graph corretamente configurado podem reproduzir inline (diretamente no feed) quando a URL aponta para um player compatível. Essa funcionalidade aumenta significativamente o engajamento comparado a links que redirecionam o usuário para outro site antes de reproduzir o conteúdo.
Implementação em WordPress e CMS
No WordPress, plugins de SEO como Yoast SEO e Rank Math geram automaticamente as meta tags Open Graph com base no título, resumo e imagem destacada de cada post ou página. A configuração é feita nas opções gerais do plugin, onde é possível definir valores padrão para og:site_name e og:locale.
Ambos os plugins permitem personalizar o título e a descrição OG individualmente em cada conteúdo, separando as versões otimizadas para busca das versões otimizadas para compartilhamento social. Essa flexibilidade é especialmente útil quando o title tag otimizado para SEO não é adequado para o contexto casual das redes sociais.
Para sites que não utilizam WordPress, a implementação manual requer a inserção das meta tags diretamente no template HTML, dentro da seção <head>. Frameworks modernos como Next.js e Nuxt.js oferecem módulos dedicados para geração automática de Open Graph com base nos dados de cada página, simplificando a manutenção em sites com grande volume de URLs.
Em plataformas como Shopify e Wix, a configuração é parcialmente automatizada pelo próprio sistema. O Shopify utiliza o título e a descrição do produto como valores padrão para og:title e og:description, enquanto a imagem principal do produto é utilizada como og:image. Para personalizar esses valores, a edição do arquivo theme.liquid é necessária em ambas as plataformas.
Ferramentas de debug e validação
Cada plataforma social oferece uma ferramenta oficial para testar e validar as meta tags Open Graph antes do compartilhamento. O Facebook Sharing Debugger (developers.facebook.com/tools/debug/) exibe exatamente como o preview aparecerá no feed e permite limpar o cache de previews antigos para forçar a atualização.
O Twitter Card Validator (cards-dev.twitter.com/validator) realiza função equivalente para o Twitter/X, mostrando o preview conforme o formato de card definido. O LinkedIn Post Inspector (linkedin.com/post-inspector/) completa o trio de ferramentas oficiais, cada uma validando o preview de acordo com as regras específicas de sua plataforma.
Para validação centralizada, ferramentas como opengraph.xyz e metatags.io permitem testar previews de múltiplas plataformas simultaneamente a partir de uma única URL. Essas ferramentas são particularmente úteis durante o desenvolvimento de novas páginas, quando é necessário verificar a compatibilidade das tags Open Graph antes da publicação definitiva do conteúdo no site.
Erros comuns do Open Graph
A ausência total de meta tags Open Graph é o erro mais frequente, resultando em previews gerados automaticamente pela plataforma — geralmente com imagem incorreta, título truncado ou descrição irrelevante extraída de trechos aleatórios da página. A correção é direta: incluir as quatro tags obrigatórias no <head> de todas as páginas públicas do site.
Outro erro recorrente é utilizar imagens com dimensões inadequadas ou com peso excessivo. Imagens menores que 200×200 pixels podem não ser exibidas pelo Facebook, e arquivos maiores que 8 MB excedem o limite de processamento dos crawlers sociais. Manter imagens em 1200×630 pixels com menos de 1 MB resolve a maioria dos problemas.
O cache de previews desatualizados é um terceiro problema comum. Redes sociais armazenam em cache o preview da primeira vez que uma URL é compartilhada, e alterações posteriores nas tags OG podem não ser refletidas automaticamente. Utilizar a ferramenta de debug da respectiva plataforma para forçar a atualização do cache é o procedimento correto nesses casos.
Um quarto erro frequente é a inconsistência entre og:url e a URL real da página. Se a tag og:url aponta para uma URL diferente da que o usuário está acessando, as plataformas sociais podem redirecionar os dados do preview para a URL incorreta, gerando confusão para quem clica no link. Manter og:url sincronizada com a URL canônica da página evita esse problema.
Por fim, a duplicação de tags Open Graph no mesmo documento HTML causa comportamento imprevisível nos crawlers sociais. Quando duas tags og:title estão presentes na página, diferentes plataformas podem selecionar valores distintos, resultando em previews inconsistentes entre Facebook, LinkedIn e Twitter. A revisão do código-fonte para garantir unicidade de cada tag é uma verificação simples que previne problemas recorrentes.
Perguntas frequentes
As dúvidas sobre Open Graph abrangem desde a implementação técnica até o impacto em métricas de marketing digital. A seguir, as respostas para as questões mais recorrentes sobre o protocolo.
Open Graph ajuda no SEO?
Indiretamente, sim. O Open Graph não é fator de rankeamento direto, mas previews otimizados aumentam cliques em compartilhamentos, gerando mais tráfego e potenciais backlinks. A estratégia de Social SEO considera o Open Graph como componente da presença integrada entre busca orgânica e redes sociais.
Open Graph funciona em buscadores?
O Google ocasionalmente utiliza dados de Open Graph como informação complementar, mas prioriza title tag e meta description para resultados de pesquisa. A relevância do OG está nos canais de social search — plataformas sociais que funcionam como mecanismos de busca alternativos, onde o preview do link é determinante para o clique.
og:title precisa ser igual ao title tag?
Não. O og:title pode e deve ser adaptado para o contexto social. Enquanto o title tag é otimizado para relevância em buscadores (com keyword no início), o og:title pode ser mais direto, com call-to-action ou linguagem que gere curiosidade no feed social. A coerência temática entre ambos é importante, mas o texto não precisa ser idêntico.
Qual o tamanho ideal da imagem OG?
A dimensão universal mais segura é 1200×630 pixels (proporção 1.91:1), compatível com Facebook, LinkedIn e Twitter/X. O formato recomendado é JPEG ou PNG com peso inferior a 1 MB. Para Pinterest, a dimensão ideal é 1000×1500 pixels (proporção 2:3), significativamente diferente das demais plataformas.
Como forçar atualização do preview?
Cada plataforma exige uso de sua ferramenta de debug para limpar o cache do preview. No Facebook, use o Sharing Debugger e clique em “Raspar novamente”. No LinkedIn, utilize o Post Inspector. No Twitter/X, basta acessar o Card Validator com a URL atualizada. Após limpar o cache, o próximo compartilhamento exibirá o preview atualizado.
