Pontos-chave:
- O protocolo Open Graph, criado pelo Facebook em 2010, define como páginas da web devem aparecer quando seu link é compartilhado.
- Quatro propriedades formam a base do protocolo: og:title, og:type, og:image e og:url.
- Configurar o Open Graph não faz uma página subir automaticamente no Google, mas alguns dos metadados podem ser utilizados pelo buscador em determinados contextos.
Você já compartilhou um link em redes sociais, como no WhatsApp ou LinkedIn, e ele apareceu sem imagem, com um título estranho ou com uma descrição que parecia ter sido retirada de qualquer lugar da página?
Esse tipo de problema geralmente está relacionado aos metadados utilizados pelas plataformas para montar a prévia do link. Entre os padrões mais utilizados para fornecer essas informações, está o Open Graph — protocolo que permite indicar qual título, imagem, URL e outros dados representam melhor uma página.
Quando essas tags estão ausentes ou configuradas de forma inadequada, a plataforma pode tentar identificar essas informações por conta própria. Por isso, o resultado nem sempre corresponde ao que a página realmente apresenta.
Neste artigo, você vai entender melhor o que é o protocolo Open Graph: significado e tradução, como configurar suas principais tags, qual é a relação desses metadados com SEO e como validar a implementação desse recurso. Continue a leitura para conferir!
O que é Open Graph?
O Open Graph é um protocolo de metadados desenvolvido originalmente pelo Facebook para padronizar a representação de páginas da web em ambientes sociais. Ele pode ser traduzido de forma literal para o português como “grafo aberto”.
Na prática, esse recurso funciona por meio de tags adicionadas ao <head> HTML da página: og:title, og:type, og:image e og:url. Essas propriedades fornecem informações estruturadas que podem ser lidas por plataformas, aplicativos e outros sistemas ao processar uma URL.
Assim, quando alguém compartilha uma página, a plataforma pode acessar seu HTML, identificar esses metadados e utilizá-los para construir o preview (prévia da página) do link para mostrar às pessoas antes de elas clicarem.
A ilustração abaixo mostra um exemplo de Open Graph: à esquerda, como as tags são inseridas no <head> HTML; à direita, como essas informações podem ser exibidas na prévia de um link compartilhado.
Fonte: elaborada pela autoria com o auxílio do ChatGPT (2026)
Leia também: Boas práticas para otimização de imagens — como escolher, formatar e otimizar?
Quais são as principais tags do protocolo Open Graph?
As quatro propriedades básicas possuem diferentes funções e trabalham em conjunto para representar a página. Entenda cada uma a seguir:
1. og:title
A og:title informa qual título deve representar o conteúdo dentro do Open Graph. Mas ela não precisa necessariamente ser idêntica ao elemento <title> — título da página.
O <title> continua sendo uma das principais referências para buscadores e para a aba do navegador. Já a og:title pode ser adaptada ao contexto de compartilhamento, desde que continue representando fielmente o conteúdo.
Essa separação permite, por exemplo, manter um título pensado para busca e utilizar uma versão mais direta para o compartilhamento social:
<meta property=”og:title” content=”Guia completo de SEO técnico” />
2. og:type
A propriedade og:type informa o tipo de conteúdo representado pela URL. Valores comuns incluem website, para páginas gerais, e article, para artigos e textos editoriais.
O protocolo também possui tipos específicos para vídeos, músicas, perfis e outros formatos:
<meta property=”og:type” content=”article” />
3. og:image
A og:image aponta para a imagem que deve representar aquela URL. Como ela costuma ocupar grande parte da prévia, essa propriedade é uma das mais importantes do ponto de vista visual:
<meta property=”og:image” content=”https://exemplo.com/imagens/open-graph.jpg” />
O Open Graph também permite fornecer informações complementares, como largura, altura, tipo do arquivo e texto alternativo:
<meta property=”og:image” content=”https://exemplo.com/imagem.jpg” />
<meta property=”og:image:width” content=”1200″ />
<meta property=”og:image:height” content=”630″ />
<meta property=”og:image:type” content=”image/jpeg” />
<meta property=”og:image:alt” content=”Ilustração sobre configuração de Open Graph” />
A própria especificação recomenda informar og:image:alt quando uma og:image é definida.
4. og:url
A og:url indica qual URL representa aquele conteúdo dentro do Open Graph. Isso é especialmente útil quando uma página pode ser acessada por URLs diferentes:
<meta property=”og:url” content=”https://exemplo.com/open-graph/” />
Um cuidado importante: og:url e a tag rel=”canonical“ não são exatamente a mesma coisa.
A og:url identifica a URL principal dentro do contexto do Open Graph. Já o rel=”canonical” é o recurso utilizado para sinalizar aos mecanismos de busca qual URL deve ser considerada a versão canônica (principal) entre páginas duplicadas ou muito semelhantes. Por isso, uma não deve ser utilizada como substituta da outra.
Leia também: Como indexar um site no Google?
Tags complementares
Além das propriedades básicas que apresentamos acima, duas tags complementares são especialmente úteis: og:description e og:site_name.
A og:description fornece uma breve descrição da página, com uma ou duas frases. Não existe um número universal de caracteres que garanta a exibição completa, porque cada plataforma pode apresentar o conteúdo de forma diferente.
Por isso, o mais seguro é escrever uma descrição curta, clara e colocar a informação principal no início:
<meta
property=”og:description”
content=”Entenda como configurar Open Graph e melhorar os previews dos seus links.”
/>
Já og:site_name identifica o site ou a marca responsável pelo conteúdo. Ela ajuda a dar contexto às pessoas e pode reforçar a identificação da origem do link:
<meta property=”og:site_name” content=”Nome da empresa” />
Leia também: Meta tags — o que são, importância e como otimizar?
og:image: a tag que mais impacta o resultado
A imagem costuma ser o componente de maior destaque em um link compartilhado. Por isso, uma configuração ruim pode comprometer todo o preview, mesmo quando o título e a descrição estão corretos.
O protocolo Open Graph não determina uma dimensão universal obrigatória para og:image. Por isso, cada plataforma pode aplicar seus próprios critérios de tamanho, proporção e corte.
Mas, como referência prática, imagens próximas da proporção 1,91:1 funcionam bem em vários contextos. Uma dimensão bastante utilizada é 1200 × 630 pixels. Veja um exemplo abaixo:
Fonte: captura de tela do artigo “GEO: o que é, como funciona e seu impacto no SEO”, da Ecto (2026).
Além das dimensões, a escolha da imagem também importa. A documentação oficial do Google recomenda utilizar ilustrações ou fotos relevantes e evitar imagens genéricas, como logotipos.
Leia também: Heading tags — o que são, como usar e por que importam para SEO e acessibilidade
Open Graph no WhatsApp: por que vale a pena testar?
Assim como em outras redes sociais, o WhatsApp gera prévias quando determinados links são enviados em conversas. O formato e a exibição podem variar conforme dispositivo, versão do aplicativo e outros fatores.
A própria central de ajuda do WhatsApp confirma o uso de previews de links e informa, inclusive, que as pessoas podem desativar sua geração como uma configuração de segurança.
Por isso, não é recomendado depender de um único layout fixo para planejar como uma página será exibida no aplicativo. O mais importante é garantir que o HTML apresente corretamente informações como título, descrição, imagem e URL, além de permitir que esses recursos sejam acessados externamente.
Esse cuidado ganha ainda mais relevância em contextos comerciais, já que links de produtos, artigos, landing pages e páginas institucionais circulam com frequência em conversas entre empresas e clientes.
Como explica Diogo Espejo, Analista de SEO Sênior da Ecto:
“Open Graph é simples de usar e agrega bastante valor. Sempre que alguém compartilhar um link para o seu site, terá uma aparência muito melhor e será muito mais convidativo ao clique.”
Ou seja, na prática, um preview coerente ajuda a pessoa a entender melhor o destino do link antes mesmo de acessá-lo, além de transmitir mais clareza e credibilidade no compartilhamento.
Leia também: Noindex — o que é, como e quando usar para controlar a indexação
Open Graph e SEO: qual é a relação?
A relação entre Open Graph e SEO exige um pouco de atenção, pois configurar as tags não é uma técnica documentada para fazer uma página subir automaticamente nas posições do Google.
Com isso, o principal objetivo do protocolo para o SEO é fornecer metadados para representar um conteúdo, tornando-o mais convidativo para ser clicado.
Porém, isso também não significa que o Google ignore completamente as informações do Open Graph. Na documentação oficial sobre títulos dos resultados de busca do Google, é informado que é possível utilizar diferentes fontes para determinar o título apresentado às pessoas, como:
Portanto, é tecnicamente mais correto dizer que Open Graph não deve ser tratado como uma ferramenta direta de ranqueamento, mas alguns de seus metadados podem servir como informações adicionais para os sistemas do Google — o mesmo acontece com imagens.
Na documentação oficial do Google, por exemplo, o buscador informa que uma imagem representativa pode ser indicada por meio de dados estruturados ou da meta tag og:image. Essa informação pode influenciar qual imagem é selecionada como thumbnail — miniatura usada como capa de pré-visualização.
Por fim, também existe um impacto indireto relacionado à distribuição do conteúdo. Como mencionamos, um preview claro e atrativo pode aumentar a chance de clique quando uma página é compartilhada em redes sociais, aplicativos de mensagem ou outros sites.
Esses acessos, porém, não devem ser chamados automaticamente de tráfego orgânico de busca. Dependendo da origem, ferramentas de analytics podem classificá-los como tráfego social, referral (recomendação de alguém), direto ou em outra categoria.
Leia também: O que é headless CMS e qual a diferença? Saiba quando usá-lo no seu site
Como validar o Open Graph do seu site
Após configurar as tags Open Graph, é possível conferir se as plataformas estão conseguindo ler corretamente o título, a descrição, a imagem e a URL da sua página.
Essa validação também é importante depois de qualquer alteração, porque algumas plataformas podem manter versões anteriores do preview em cache. Nesses casos, mesmo com o código atualizado, o link ainda pode exibir dados antigos até que a página seja processada novamente.
Algumas ferramentas ajudam nesse processo:
- opengraph.xyz: valida previews de múltiplas plataformas simultaneamente a partir de uma única URL. A plataforma costuma ser usada para verificar a implementação antes da publicação.
- Facebook Sharing Debugger: ferramenta oficial do Facebook. Além de exibir a prévia, permite limpar o cache e forçar a releitura das tags. Indispensável quando as tags foram alteradas e o preview antigo ainda está sendo exibido.
- LinkedIn Post Inspector: ferramenta oficial do LinkedIn. Mostra o preview e atualiza o cache quando necessário.
Atenção: para o WhatsApp, não há uma ferramenta pública de validação disponível. Nesse caso, o ideal é confirmar se as tags estão corretas, se a imagem pode ser acessada normalmente e se o servidor não está bloqueando o crawler (robô de busca). Depois, faça um teste compartilhando a URL no próprio aplicativo para conferir.
Leia também: Redirects e SEO – guia para redirecionar URLs de forma otimizada
Perguntas frequentes sobre Open Graph
Ao longo deste artigo, passamos pelas tags obrigatórias, especificações de imagem, entre outras informações. Mas é comum ficar com dúvidas sobre o protocolo Open Graph se você está conhecendo esse recurso agora.
Por isso, abaixo, respondemos algumas das perguntas mais frequentes sobre o tema:
1. Posso usar mais de uma tag Open Graph de imagens na mesma página?
Sim. O protocolo Open Graph permite declarar várias imagens. Quando isso acontece, a primeira og:image tende a ter prioridade, então coloque o arquivo principal primeiro no código. Ainda assim, cada plataforma pode escolher como interpretar essas opções.
2. O og:title precisa ser igual ao title tag?
Não. A title tag é otimizada para buscadores, com a palavra-chave posicionada estrategicamente. Já o og:title pode ser adaptado para o contexto social: mais direto, com call-to-action (chamada para ação) ou linguagem que gere curiosidade.
Desse modo, a orientação é que tenha consistência temática entre os dois recursos, mas a escrita não precisa ser a mesma.
3. Uma imagem no formato WebP, SVG ou AVIF funciona como og:image?
Pode funcionar, mas o suporte varia entre plataformas. Para garantir maior compatibilidade em previews, os formatos JPEG e PNG continuam sendo as opções mais seguras.
4. Como usar Open Graph em e-commerces?
Em e-commerces, o ideal é automatizar as tags Open Graph para cada produto. Assim, o nome pode ir na og:title, a imagem principal pode ser usada como og:image e uma descrição resumida pode preencher a og:description.
No WordPress, por exemplo, o Yoast SEO gera automaticamente tags Open Graph como og:title, og:description, og:url e og:image. Com isso, cada página de produto pode gerar um preview próprio e mais consistente quando compartilhado.
Leia também: Como usar SEO na descrição de produtos de e-commerce
Neste artigo, vimos que configurar o protocolo Open Graph é uma implementação relativamente pequena dentro de um site, mas ela influencia diretamente a forma como uma página é apresentada quando circula fora do próprio domínio.
Informações como título, imagem, descrição e URL bem definidas reduzem a dependência das escolhas automáticas de cada plataforma e ajudam a manter uma apresentação mais consistente da marca.
Por isso, uma boa implementação precisa combinar precisão técnica, imagens adequadas, informações coerentes com o conteúdo da página e validação após a publicação.
Se você quer identificar problemas técnicos que podem estar prejudicando a presença do seu site nos mecanismos de busca e em outros canais digitais, conte com o apoio de um time especializado em SEO.
Entre em contato com o time Ecto e descubra quais pontos da sua presença digital podem ser aprimorados!
Leia também: O que é um Sistema de Gerenciamento de Conteúdo (CMS)?
Imagem de capa — Fonte: DC Studio – Magnific.com
