Meta tags Open Graph — o que precisa saber

Aprenda o que são as meta tags Open Graph, como implementá‑las corretamente e como testar pré‑visualizações em redes sociais.

Michael

Publicado 16 de fevereiro de 2026

Meta tags Open Graph - O que você precisa saber

O que são as meta tags Open Graph

Meta tags Open Graph (OG) são elementos HTML colocados na seção head de uma página para informar plataformas sociais sobre como exibir o link quando for partilhado. Em vez de deixar a escolha da plataforma ao acaso, você define título, descrição, imagem e tipo de conteúdo — por exemplo com:

Por que usar Open Graph

Plataformas sociais (Facebook/Meta, X/Twitter, WhatsApp, Telegram, Pinterest e outras) usam essas tags para construir a pré‑visualização do link. Tags consistentes reduzem probabilidades de imagens de anúncios ou cabeçalhos aparecerem como pré‑visualização e ajudam o leitor a decidir se clica. Observe que cada plataforma pode aplicar regras próprias — declarar as tags não garante um resultado idêntico em todas.

Como implementar (passo a passo)

1) Coloque as tags no head do HTML. Garanta que estejam presentes no HTML inicial enviado pelo servidor (server‑rendered) sempre que possível; muitos scrapers sociais não executam JavaScript.

Exemplo mínimo completo:

2) Adicione metadados de dimensão quando possível para acelerar renderização em plataformas que os exigem: <meta property="og:image:width" content="1200" /> e <meta property="og:image:height" content="630" /> (use valores reais do ficheiro).

3) Inclua tags específicas para X/Twitter se quiser controlar o cartão no X:

Recomendações de imagem

Escolha imagens que funcionem bem em miniaturas. Uma dimensão frequentemente utilizada por plataformas é 1200×630 (paisagem), mas confirme requisitos específicos da rede. Use imagens claras, com foco no assunto, e evite texto pequeno que não seja legível em miniaturas.

Boas práticas e erros comuns

Boas práticas

Forneça título e descrição únicos e alinhados ao conteúdo da página.
Use uma imagem representativa que carregue rápido e esteja acessível por HTTPS.
Inclua as tags no HTML inicial (evite injetar via JavaScript sempre que possível).
Declare og:url consistente com a canonical da página para reduzir variações de pré‑visualização.

Erros comuns

Imagens bloqueadas por robots.txt ou por regras do servidor — plataformas não conseguirão buscá‑las.
Tags presentes apenas após execução de JavaScript — alguns scrapers não executam scripts e usarão conteúdo alternativo.
Tamanhos ou proporções de imagem que resultam em recortes indesejados nas plataformas.

Verificação e resolução de problemas

Checklist rápido de verificação (externa):

1) Fetch direto: use curl para ver o HTML entregue pelo servidor. Exemplo para ver o corpo e seguir redirecionamentos:

curl -L "https://seusite.com/pagina"

2) Verificar headers apenas: curl -I "https://seusite.com/pagina" — lembre que curl -I retorna apenas cabeçalhos.
3) Simular user‑agent móvel (útil por causa do mobile‑first): curl -L -A "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X)" "https://seusite.com/pagina"

Ferramentas de depuração por rede social — use as ferramentas oficiais para forçar um novo fetch e ver a pré‑visualização resultante:

Facebook/Meta Sharing Debugger
X/Twitter Card Validator
Pinterest Validator (quando aplicável)

Se a imagem não aparece: confirme que o URL da imagem responde com 200, não requer autenticação, e não está bloqueado por robots.txt. Para imagens grandes, verifique quotas de largura de banda ou tempo de resposta do servidor.

Nota sobre indexação e mobile‑first: Google uses the mobile version as its primary basis for crawling and indexing. Since July 2024, Google crawls sites for Search with Googlebot Smartphone by default. Garanta que a versão móvel contenha as mesmas meta tags essenciais (ou seja, parity entre versões) — caso contrário, algumas plataformas que consultam a versão móvel podem ver metadados diferentes.

Considerações finais e exemplos de implementação

Um exemplo prático para artigos longa‑formato:

Mantenha um processo editorial para revisar pré‑visualizações antes de campanhas sociais importantes: peça a um colega para validar título, descrição e como a imagem aparece em diferentes plataformas.

Leia o guia de Technical SEO

Perguntas frequentes

O que acontece se eu não usar Open Graph?

Sem Open Graph, plataformas tentam inferir título, descrição e imagem a partir do HTML disponível. Isso pode resultar em pré‑visualizações inconsistentes ou imagens indesejadas (por exemplo, banners ou pequenos ícones). Declarar OG reduz essa incerteza.

Posso injetar as tags via JavaScript?

É preferível incluir as tags no HTML inicial enviado pelo servidor. Muitas plataformas sociais e validadores não executam JavaScript ou têm limites de execução, o que pode impedir que tags injetadas dinamicamente sejam lidas.

Como forço uma plataforma a buscar novamente as minhas tags?

Use os depuradores oficiais (por exemplo, Facebook/Meta Sharing Debugger ou X/Twitter Card Validator) e peça um novo fetch. Essas ferramentas mostram a pré‑visualização atual e mensagens de erro quando algo está errado.

As meta tags Open Graph afetam o ranking no Google?

Open Graph influencia sobretudo a aparência em redes sociais e a taxa de cliques a partir dessas plataformas. Não são um sinal direto de ranking no Google; no entanto, melhor CTR em redes sociais pode indiretamente gerar tráfego e sinais sociais relevantes para o seu site.

Existe alguma política de conteúdo a considerar?

Cada plataforma aplica regras próprias sobre conteúdo e bom uso de metadados. Para conteúdos pagos ou patrocinados, utilize os atributos de referência apropriados e siga as políticas de divulgação da plataforma. Não confie em técnicas que mostrem conteúdo diferente a usuários e rastreadores — isso pode ser considerado cloaking por algumas plataformas.