Validador de Open Graph

Próximo

Cole o HTML da sua página (basta o <head>) e este validador analisa cada tag meta og: e twitter: que encontra, e depois informa quais das seis tags essenciais estão presentes, quais estão faltando e o valor exato de cada uma. Como ele lê a marcação que você cola em vez de buscar uma URL ao vivo, também funciona em servidores de staging, localhost e páginas atrás de um login, onde nenhum scraper online consegue chegar.

Como o validador lê as suas tags

  1. 1

    Abra o código-fonte da página

    Pressione Ctrl+U (Cmd+Option+U no macOS) para ver o HTML bruto que os rastreadores sociais realmente recebem.

  2. 2

    Copie a seção head

    Selecione de `<head>` até `</head>`. O body não é necessário, embora colar a página inteira não cause problema nenhum.

  3. 3

    Cole no validador

    Cada tag `<meta>` é analisada enquanto você digita. Nenhuma URL é buscada: apenas a marcação que você cola é examinada.

  4. 4

    Leia a lista de verificação

    Seis verificações ficam verdes ou vermelhas: og:title, og:description, og:type, og:url, og:image e twitter:card.

  5. 5

    Revise os valores encontrados

    Cada tag og: e twitter: é listada com seu conteúdo, então erros de digitação, valores vazios e caminhos de imagem relativos ficam evidentes.

As tags Open Graph que o validador procura

Tag Função Na lista de verificação?
og:title Título do cartão Sim, obrigatória
og:description Subtítulo do cartão Sim, obrigatória
og:type website, article, video etc. Sim, obrigatória
og:url URL canônica Sim, obrigatória
og:image URL da imagem de prévia Sim, obrigatória
og:site_name Linha da marca acima do título Listada quando presente
og:locale pt_BR, en_US etc. Listada quando presente

Qualquer outra tag og: na sua marcação também é listada, mesmo quando não faz parte da lista de verificação.

Tags Twitter Card

O X (Twitter) recorre ao Open Graph quando as suas próprias tags estão ausentes, então só twitter:card está na lista de verificação. O restante é listado sempre que o validador as encontra.

Tag Função
twitter:card summary, summary_large_image etc.
twitter:site @conta que publica
twitter:creator @conta do autor
twitter:title Sobrescreve og:title
twitter:description Sobrescreve og:description
twitter:image Sobrescreve og:image

Especificação de imagem que funciona em todo lugar

O validador confirma que og:image está declarada, mas nunca baixa o arquivo, então verifique estes pontos manualmente:

  • Dimensões: 1200 x 630 px (Facebook, LinkedIn, cartões grandes do Twitter).
  • Proporção: 1.91:1 para summary_large_image.
  • Tamanho do arquivo: abaixo de 5 MB, idealmente abaixo de 1 MB para o rastreador não expirar.
  • Formato: JPG ou PNG. WebP e AVIF ainda têm suporte inconsistente.
  • URL absoluta: sempre o endereço completo https://..., nunca um caminho relativo ao protocolo ou à raiz.

Problemas comuns que o relatório revela

  • Sem og:image. A falha mais comum de longe. Sem imagem, o cartão degrada para um link azul sem estilo.
  • Uma tag presente, mas vazia. O validador imprime cada valor, então um og:title sem nada depois é fácil de perceber.
  • Caminho de imagem relativo. og:image precisa ser uma URL absoluta; um caminho como /img/card.jpg quebra a raspagem.
  • Divergência em og:url. Quando og:url difere da canônica real, as plataformas podem se recusar a raspar a página.
  • Tags injetadas por JavaScript. Elas nunca aparecem no view-source, então também não aparecem aqui, e a maioria dos rastreadores não as verá.
  • Um cartão desatualizado no Facebook. Não é um problema de marcação: o Facebook armazena as suas raspagens em cache. Force uma atualização pelo Sharing Debugger dele.

Perguntas frequentes

Porque colar a marcação mostra exatamente o que um rastreador social vê na resposta bruta, e funciona em páginas que nenhum rastreador consegue alcançar: servidores de staging, localhost, intranets e tudo o que está atrás de um login. Abra sua página, pressione Ctrl+U, copie o código-fonte e cole aqui.

Não necessariamente. O X recorre às tags Open Graph quando as tags twitter: estão faltando, e é por isso que só twitter:card está na lista de verificação. Adicione o restante apenas quando quiser um título, uma descrição ou uma imagem diferentes no X em relação a todas as outras plataformas.

O inspetor mostra o DOM depois que o JavaScript é executado, enquanto os rastreadores sociais leem a resposta HTML bruta. Use o view-source (Ctrl+U), não o inspetor, e cole isso. Se a tag existe apenas no DOM, adicione renderização do lado do servidor ou um serviço de pré-renderização para que os rastreadores a vejam.

1200 x 630 px, JPG ou PNG. É o tamanho recomendado para os cartões grandes do Facebook e do LinkedIn, é aceito pelo X e escala de forma limpa no Slack, no Discord e em outros apps que desdobram links. O validador confirma que og:image está declarada, mas não abre o arquivo, então verifique as dimensões você mesmo.

O Facebook armazena os resultados de raspagem em cache por até 30 dias. Cole a URL no Sharing Debugger em developers.facebook.com/tools/debug e faça a raspagem de novo para invalidar o cache.

Ferramentas relacionadas

Ferramenta disponível em outros idiomas