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.
Examinar as meta tags que decidem o aspecto de um link compartilhado
O título, a descrição e a imagem que surgem ao publicar um link numa rede social são decididos pelas meta tags de Open Graph e de Twitter Card escritas no `
` da página. Esta ferramenta as extrai do HTML que você cola, aponta as tags ausentes e os valores defeituosos, e pré-visualiza o resultado em algo bem próximo do cartão tal como aparecerá.**A falha mais comum de longe é escrever `og:image` como caminho relativo.** Os rastreadores buscam a imagem a partir dos próprios servidores, de modo que um caminho como `/img/ogp.png` não pode ser resolvido e **o cartão chega com a imagem ausente.** Escreva-a sempre como URL absoluta começando por `https://`. **A outra coisa que convém saber é que esses serviços guardam em cache o que rastreiam.** Corrigir uma tag pode deixar à vista o conteúdo antigo, e aí é preciso pedir um novo rastreamento pela ferramenta de depuração de cada serviço. Note ainda que um Twitter Card recorre às tags `og:` onde não existir uma `twitter:`, então não é preciso escrever as duas.
Como se usa
- Cole o código HTML Basta o conteúdo de ``, ou a página inteira se lhe for mais cômodo.
- Experimente antes os exemplos São oferecidos um exemplo bom e um ruim, de modo que você pode ver em que diferem os veredictos antes de começar.
- Leia os pontos apontados **São indicadas as tags ausentes e todo `og:image` que não seja uma URL absoluta.**
- Confira o aspecto na pré-visualização Você pode ver como o título quebra e onde a descrição é cortada antes de publicar qualquer coisa.
Dicas para aproveitar melhor
- 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.
Quando é útil
Revisar um artigo antes de publicá-lo
**Se o link aparece quebrado depois de fora, o cache faz com que corrigi-lo não conserte as coisas.** Olhar antes é o caminho mais seguro.
Verificar o que uma modelo produz
Cole o `
` que o seu gerenciador de conteúdo emitiu e confirme que as tags previstas estão lá.Revisar uma troca de imagem
**Se um novo `og:image` é uma URL absoluta é justamente o tipo de detalhe que passa despercebido.**
Tomar exemplo de outros sites
Cole o código de uma página que se mostre bem e veja quais tags ela se deu ao trabalho de pôr.
Termos de Open Graph
- Og:title
- O cabeçalho que aparece no cartão. **Pode diferir de `
`, o que lhe permite redigi-lo mais breve para as redes.** - Og:description
- O texto descritivo do cartão. É cortado se for longo demais, então ponha na frente o que há de substancial.
- Og:image
- A imagem do cartão. **Indique-a sempre como URL absoluta.** Cerca de 1200 por 630 pixels é um tamanho cômodo.
- Og:type
- A classe de página. `article` é o habitual para um texto e `website` para qualquer outra coisa.
- Twitter:card
- A forma do cartão. Pôr `summary_large_image` mostra a imagem em toda a largura.
- Og:url
- A URL canônica da página. **É onde se consolidam os compartilhamentos, então cuide de não escrever uma URL com parâmetros de consulta.**
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.