Validador de OGP e meta tags
Cole seu HTML para validar as meta tags de Open Graph (OGP) e Twitter Card. Detecta tags ausentes e og:image inválidas, com pré-visualização do cartão de compartilhamento.
Dicas
- O tamanho recomendado para og:image é 1200×630px (proporção 1.91:1). Imagens pequenas demais ou com proporção incorreta podem ser cortadas de forma inesperada pelas plataformas sociais.
- Os crawlers do Facebook, LINE e Slack leem og:title/og:description, enquanto o X (Twitter) usa suas próprias twitter:title/twitter:description. Configurar ambos garante uma pré-visualização correta em todas as plataformas.
- Se twitter:card estiver ausente, o X tentará recorrer a og:title/og:description, mas a imagem pode não ser exibida corretamente, por isso é melhor defini-lo explicitamente.
- Defina og:url com a URL canônica e absoluta (https://) da página. Isso também ajuda a evitar confusões de conteúdo duplicado causadas por URLs com parâmetros de rastreamento.
- Logo após alterar suas meta tags, as redes sociais ainda podem exibir uma pré-visualização antiga em cache. Use a ferramenta de recrawl de cada plataforma (por exemplo, o Depurador de Compartilhamento do Facebook) para atualizar o cache.
Perguntas frequentes
/img/a.png). A maioria dos crawlers não consegue resolver URLs relativas, então sempre use uma URL absoluta começando com https://. Também pode falhar se o servidor bloquear o User-Agent do crawler, ou se a imagem for pequena demais.<title> é usada no título dos resultados de busca e na aba do navegador, enquanto og:title é usada no título do cartão ao compartilhar nas redes sociais. Muitos crawlers recorrem à <title> se og:title estiver ausente, mas o resultado pode não corresponder ao pretendido.summary_large_image, pois exibe uma imagem grande. Se uma miniatura pequena for suficiente, use summary. app e player destinam-se, respectivamente, a chamadas de instalação de app e a vídeo/áudio incorporado, e não são escolhas típicas para uma página comum.<title> e meta description para gerar uma pré-visualização, mas nenhuma imagem será exibida, resultando em uma pré-visualização simples de link e texto. Como isso afeta a taxa de clique, é recomendável configurar ao menos og:title, og:description e og:image.
Curiosidade — Por que o OGP existe — o Facebook o criou para fazer o botão "Curtir" funcionar
O Open Graph Protocol (OGP) foi criado pelo Facebook em 2010 para ajudar a popularizar seu botão "Curtir". Na época, compartilhar uma página no Facebook resultava em pouco mais que um link e um título nus, e as taxas de clique sofriam. A solução do Facebook foi permitir que a própria página declarasse como deveria aparecer ao ser compartilhada, adicionando um novo namespace <meta property="og:xxx"> ao HTML comum.
Curiosamente, o OGP é construído sobre o RDFa, uma especificação do W3C para incorporar dados estruturados em HTML. Ao reutilizar um padrão já existente, o Facebook conseguiu lançar o novo recurso sem precisar da cooperação de fabricantes de navegadores ou de outras empresas — bastavam algumas meta tags extras nas páginas já existentes. Essa abordagem de "estender sem quebrar a compatibilidade retroativa" funcionou, e o OGP tornou-se um padrão de fato adotado bem além do Facebook, em plataformas como Slack, LINE e Discord.
O Twitter nunca adotou o OGP diretamente; em vez disso, criou seu próprio namespace separado, o Twitter Cards (twitter:xxx). Isso foi, possivelmente, tanto uma escolha competitiva quanto técnica — não querendo simplesmente adotar uma especificação originada pelo rival Facebook. Como resultado, a maioria dos sites ainda precisa duplicar as tags og: e twitter:, o que é uma das razões pelas quais ferramentas como este validador continuam úteis.