O protocolo Open Graph (OG) é um conjunto de meta tags criadas originalmente pelo Facebook em 2010. Essas tags ficam no <head> do seu HTML e dizem às plataformas de mídia social exatamente como exibir seu conteúdo quando alguém compartilha um link. Sem elas, as plataformas tentam montar uma prévia a partir do que conseguem encontrar na página, e o resultado normalmente não é bom.
Onde as tags Open Graph aparecem na prática
Quando alguém cola um link no Facebook, LinkedIn, WhatsApp, Telegram, Slack ou Discord, a plataforma busca a página e lê suas tags OG. Essas tags determinam o título, a descrição e a imagem da prévia que aparecem na publicação ou mensagem. Essa prévia é, muitas vezes, a primeira impressão que as pessoas têm do seu conteúdo, então controlá-la é importante. Um link com uma imagem clara e um título atraente recebe muito mais cliques do que um com uma miniatura quebrada ou uma descrição genérica puxada do rodapé da página.
Tags Open Graph obrigatórias vs. opcionais
A especificação Open Graph define quatro propriedades obrigatórias:
og:title: o título do seu conteúdo como deve aparecer na prévia social.og:type: o tipo de conteúdo. Assume "website" como padrão se omitido.og:image: a URL da imagem a ser exibida na prévia.og:url: a URL canônica da página.
Além dessas, várias tags opcionais são comumente usadas:
og:description: um resumo de uma a duas frases da página.og:site_name: o nome geral do seu site (por exemplo, "InspectWP").og:locale: o idioma e o território (por exemplo,en_US,de_DE).og:video: uma URL para um arquivo de vídeo associado ao conteúdo.
Entendendo os valores de og:type
A tag og:type diz às plataformas que tipo de conteúdo a página representa. Os valores mais comuns são:
- website: use para sua página inicial e páginas gerais. É o padrão se nenhum tipo for especificado.
- article: use para posts de blog, artigos de notícias e qualquer conteúdo escrito com data de publicação. Esse tipo libera tags adicionais como
article:published_time,article:authorearticle:section. - product: usado por sites de e-commerce para descrever produtos. Suporta tags como
product:price:amounteproduct:price:currency. - profile: para páginas que representam uma pessoa. Suporta
profile:first_nameeprofile:last_name.
Requisitos e boas práticas para og:image
A imagem de prévia é a parte visualmente mais proeminente de um compartilhamento social, então acertá-la é importante. Eis os detalhes:
- Tamanho mínimo: o Facebook recomenda pelo menos 1200 x 630 pixels para telas de alta resolução. Imagens menores que 600 x 315 pixels podem não exibir corretamente ou aparecer como uma miniatura pequena em vez de um cartão grande.
- Proporção: 1,91:1 é o padrão para prévias grandes de link na maioria das plataformas. Imagens quadradas (1:1) também funcionam, mas produzem um layout diferente.
- Tamanho do arquivo: mantenha as imagens abaixo de 8 MB. Facebook e LinkedIn podem ser lentos para renderizar imagens muito grandes.
- Formato: JPEG e PNG são universalmente suportados. WebP funciona em algumas plataformas, mas não em todas.
- Sempre use URLs absolutas: a URL da imagem deve começar com
https://. Caminhos relativos não funcionam porque a plataforma social busca a imagem em seus próprios servidores.
Como funciona o Facebook Sharing Debugger
O Facebook armazena os dados OG agressivamente em cache. Se você atualizar suas tags OG, a prévia antiga ainda pode aparecer quando alguém compartilhar seu link. O Facebook Sharing Debugger (developers.facebook.com/tools/debug/) permite que você insira uma URL e veja exatamente o que o Facebook lê dela. Você pode clicar em "Scrape Again" para forçar o Facebook a buscar a página novamente e atualizar seu cache. Essa ferramenta também é valiosa para depurar problemas como imagens ausentes, títulos incorretos ou tags que não estão sendo interpretadas corretamente. O LinkedIn tem uma ferramenta semelhante chamada Post Inspector.
Open Graph e Twitter Cards
O Twitter (agora X) desenvolveu seu próprio sistema de meta tags, chamado Twitter Cards. As tags do Twitter Cards usam o atributo name em vez de property:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />A boa notícia é que o Twitter recorre às tags Open Graph quando as tags do Twitter Cards estão ausentes. Então, se você tem og:title, mas não tem twitter:title, o Twitter usará o título OG. Entretanto, a própria tag twitter:card não tem equivalente OG, então você deve sempre incluir pelo menos essa tag específica do Twitter. Defini-la como summary_large_image produz a prévia mais visualmente atraente, com uma imagem grande acima do texto.
WordPress e geração de tags Open Graph
O núcleo do WordPress não inclui tags Open Graph por padrão. Você precisa de um plugin para adicioná-las. As opções mais populares são:
- Yoast SEO: gera todas as tags OG essenciais automaticamente usando o título do post, o excerto e a imagem destacada. Permite sobrescrever título, descrição e imagem OG por post pela aba "Social" no editor. Também gera tags do Twitter Cards.
- Rank Math: semelhante ao Yoast, com geração automática de OG e sobrescritas por post. Inclui um recurso de prévia social que mostra como o post vai aparecer quando compartilhado.
- The SEO Framework: uma alternativa leve que gera tags OG e Twitter com configuração mínima. Menos opções de configuração, mas padrões sólidos.
Se você usa um construtor de páginas como Elementor ou um plugin de cache, certifique-se de que as tags OG estejam presentes na saída HTML em cache. Algumas configurações de cache agressivas podem remover meta tags da seção <head>.
Tags Open Graph para produtos do WooCommerce
Para lojas WooCommerce, as tags OG se tornam ainda mais importantes porque as prévias de produtos influenciam diretamente as decisões de compra. Uma página de produto bem configurada deve incluir og:type definido como "product", junto com o nome do produto como título, uma descrição atraente e a imagem principal do produto. Plugins de SEO como Yoast WooCommerce SEO ou Rank Math podem gerar isso automaticamente. O preço e a disponibilidade do produto também podem ser incluídos por meio de tags OG adicionais, que algumas plataformas exibem na prévia.
Erros comuns com Open Graph
- Tamanho de imagem errado: usar uma imagem menor que 600 x 315 pixels resulta em uma miniatura minúscula em vez de uma prévia em cartão grande. Sempre use os 1200 x 630 pixels recomendados.
- Tag og:image ausente: sem uma tag de imagem, as plataformas ou não mostram imagem ou pegam uma imagem aleatória da página, que pode ser um anúncio da barra lateral ou um logotipo que fica horrível como prévia.
- URLs relativas: todas as URLs OG devem ser absolutas.
/images/photo.jpgnão funciona; precisa serhttps://example.com/images/photo.jpg. - Tags OG duplicadas: ter duas tags
og:titlena mesma página (por exemplo, vindas de dois plugins diferentes) causa comportamento imprevisível. Verifique o código-fonte da página para garantir que cada tag OG apareça apenas uma vez. - Não testar após mudanças: os dados OG são armazenados em cache pelas plataformas sociais. Após atualizar tags, sempre limpe o cache usando o Facebook Debugger ou o LinkedIn Post Inspector para verificar se as novas tags estão funcionando.
O que o InspectWP verifica
O InspectWP varre a seção <head> da sua página e relata quais tags Open Graph e Twitter Cards estão presentes. Mostra os valores exatos de cada tag, facilitando a verificação de que títulos, descrições e URLs de imagem estão corretos. Meta tags de mídia social ausentes são destacadas como uma oportunidade de melhoria de SEO, já que páginas sem tags OG tendem a ter menos engajamento quando compartilhadas em plataformas sociais.