Verificador de Open Graph: teste tags OG e prévias de links
Digite uma URL para ver como ela vai aparecer quando for compartilhada no Facebook, no X, no LinkedIn e em apps de chat. O verificador lê todas as tags og:* e twitter:*, mede a imagem de prévia e diz exatamente o que corrigir.
Prévias do link (aproximadas: cada plataforma aplica o próprio layout, corte e cache)
Verificações
Imagem de prévia
Tags encontradas
| Campo | Valor |
|---|
Tags sugeridas
Os seus valores atuais, com marcadores onde falta algo. Cole no <head> da página e edite as linhas com TODO.
Um verificador de Open Graph mostra o que um rastreador enxerga quando alguém cola o seu link em uma publicação ou em um chat: o título, a descrição e a imagem declarados nas metatags og:* etwitter:* da sua página. Se uma prévia mostra a imagem errada, nenhuma imagem ou o nome do site em vez do título do artigo, a causa quase sempre está nessas poucas linhas de HTML, e esta página diz qual é a linha.
Como verificar as suas tags Open Graph
- Digite a URL da página que você quer compartilhar e clique em Verificar tags. Os redirecionamentos são seguidos e a URL final é a que será analisada.
- Olhe as prévias. São aproximações de como o Facebook, o X, o LinkedIn e os apps de chat montam um cartão de link, feitas a partir das tags que cada um lê.
- Passe pelas verificações. Erros quebram as prévias; avisos as pioram em algumas plataformas; observações são boas práticas. Cada uma diz o que mudar.
- Corrija e verifique de novo. A caixa Tags sugeridas entrega um bloco de tags pronto para editar, com os seus valores atuais preenchidos.
- Atualize o cache das plataformas depois de publicar a correção (veja abaixo), ou os compartilhamentos antigos continuarão com a prévia antiga.
Para um site de homologação, uma página atrás de login ou qualquer coisa em localhost, passe paraColar HTML: cole o código-fonte da página e as mesmas verificações rodam no seu navegador.
As tags Open Graph que toda página precisa
O Open Graph é o protocolo por trás da maioria das prévias de links. Ele marca quatro propriedades como obrigatórias em toda página (ogp.me), e o LinkedIn lista título, imagem, descrição e URL como as tags que precisam existir para as prévias de compartilhamento dele (Ajuda do LinkedIn).
| Tag | O que faz | Dica |
|---|---|---|
og:title | O título do cartão. Obrigatória. | Escreva para um feed, não para a busca: não precisa do nome da sua marca. |
og:type | O tipo do objeto, como website ou article. Obrigatória. | Use article para posts; isso libera as tags article:*. |
og:image | A imagem de prévia. Obrigatória. | Use uma URL https:// completa; defina também largura, altura e texto alternativo. |
og:url | A URL canônica do objeto, usada como identificador permanente. Obrigatória. | Combine com o seu <link rel="canonical">. |
og:description | Uma ou duas frases abaixo do título. Opcional no protocolo, obrigatória no LinkedIn. | Diga o que o leitor ganha, não o que a página é. |
og:site_name | O nome do site como um todo. | Aparece acima do título em muitos apps de chat. |
og:image:alt | Uma descrição da imagem. O protocolo diz que uma página que define og:image deveria definir também esta. | Descreva a imagem, não a página. |
og:image:width / og:image:height | Tamanho da imagem em pixels. | O Facebook diz para defini-los, para a imagem carregar direito na primeira vez que o link for compartilhado. |
og:locale | O idioma e a região do conteúdo, como pt_BR. | O Facebook recomenda junto com og:type. |
Se uma tag aparece duas vezes, vale a primeira: quando os valores entram em conflito, o protocolo dá preferência à primeira tag, de cima para baixo. Duplicatas costumam vir de um tema e de um plugin de SEO que escrevem tags ao mesmo tempo, e o verificador as aponta.
Tags dos cartões do Twitter (X)
O X lê as próprias tags twitter:* e recorre ao Open Graph na maioria delas, segundo a referência de marcação de cartões do X (documentação do X para desenvolvedores, arquivada, em inglês):
twitter:card: o tipo do cartão,summary(imagem quadrada pequena) ousummary_large_image(imagem larga). Se estiver ausente mas existiremog:type,og:titleeog:description, um cartão de resumo pode ser exibido.twitter:title: máximo de 70 caracteres; cai paraog:title.twitter:description: máximo de 200 caracteres; cai paraog:description.twitter:image: menos de 5 MB; JPG, PNG, WEBP e GIF (só o primeiro quadro); SVG não é aceito. Cai paraog:image.twitter:image:alt: até 420 caracteres; cai paraog:image:alt.
Na prática, o Open Graph mais uma linha, <meta name="twitter:card" content="summary_large_image">, cobre o X.
Tamanho do og:image: o que cada plataforma pede
| Plataforma | Requisito documentado |
|---|---|
| Mínimo de 1200 × 627 px, proporção recomendada de 1,91:1, tamanho máximo de 5 MB (Ajuda do LinkedIn) | |
Pelo menos 1080 px de largura para a melhor exibição em dispositivos de alta resolução; defina og:image:width e og:image:height (boas práticas de compartilhamento da Meta) | |
| X: cartão de imagem grande | Proporção 2:1, mínimo de 300 × 157, máximo de 4096 × 4096 px, menos de 5 MB (documentação do X, arquivada) |
| X: cartão de resumo | Proporção 1:1, mínimo de 144 × 144, máximo de 4096 × 4096 px, menos de 5 MB, cortada em quadrado (documentação do X, arquivada) |
Uma imagem só pode atender a todos: 1200 × 630 pixels, PNG ou JPEG, com menos de 5 MB. Ela passa do mínimo do LinkedIn e da largura recomendada pelo Facebook, fica em cerca de 1,91:1, e o X a corta um pouco para o cartão grande de 2:1. Mantenha textos e logotipos longe das bordas para o corte não pegá-los. O X também pede uma imagem exclusiva por página, e não um logotipo genérico do site, uma regra sensata em qualquer lugar.
Por que a sua prévia está errada e como corrigir
A imagem ou o título antigo continuam aparecendo
As plataformas guardam as prévias em cache. O Facebook guarda as imagens por URL e não as atualiza a menos que a URL mude (Meta for Developers), então envie a imagem alterada com um novo nome de arquivo e depois passe a página peloDepurador de Compartilhamento, que força uma nova leitura. No LinkedIn, use oPost Inspector para atualizar a URL.
Nenhuma imagem
Veja a tabela Imagem de prévia acima. Causas comuns: o og:image é um caminho relativo, a imagem devolve 403 ou 404 para os rastreadores (proteção contra hotlink, um diretório protegido, uma regra de CDN), é um SVG ou passa de 5 MB. O LinkedIn observa que uma imagem que cumpre os requisitos ainda pode falhar se o site impedir o LinkedIn de buscá-la.
As tags existem no navegador, mas não aqui
As tags provavelmente são adicionadas por JavaScript depois que a página carrega. Os rastreadores leem o HTML que o servidor envia, então leve as tags para um HTML gerado no servidor ou pré-construído. Aplicativos de página única costumam precisar de renderização no servidor ou de pré-renderização para as prévias de compartilhamento.
A página errada aparece na prévia
Se a URL redireciona, os rastreadores mostram a prévia da página final. O verificador mostra o número de redirecionamentos; o verificador de redirecionamento lista cada salto. Confira também se o og:url aponta para a própria página, e não para a sua página inicial, um erro comum de modelo.
Tags Open Graph vs. metatags de SEO
O <title>, a meta description e o link canônico são para os buscadores; as tags Open Graph e do Twitter são para os compartilhamentos. Podem ser diferentes (um título de compartilhamento pode ser mais incisivo que um título de busca), mas a URL canônica e o og:url devem coincidir, e vale conhecer uma diretivanoindex de robots antes de promover uma página. O verificador relata todos eles, inclusive um cabeçalho HTTP X-Robots-Tag.
O que o verificador faz com a sua URL
O nosso servidor acessa a página uma vez, segue até oito redirecionamentos, lê no máximo os primeiros 600 KB (para no fim do <head>) e baixa o começo de até duas imagens de prévia para ler tamanho e formato. Só busca endereços http(s) públicos em portas padrão e recusa IPs privados, locais e de metadados de nuvem, inclusive quando um redirecionamento aponta para eles. Nada é guardado. Os cartões de prévia então carregam a imagem direto no seu navegador. Se você vai compartilhar um link de campanha, monte-o com ogerador de UTM; se vai compartilhar o link de outra pessoa, tire primeiro o rastreamento com o limpador de URLs.
Perguntas frequentes
O que faz um verificador de Open Graph?
Ele busca uma página do jeito que um rastreador de prévias de links faz, lê as tags do Open Graph (og:*) e dos cartões do Twitter (twitter:*) no cabeçalho do HTML e mostra como um link compartilhado vai aparecer. Este também baixa a imagem de prévia para checar formato, tamanho em pixels e peso do arquivo, e lista cada tag ausente ou inválida com a correção.
Quais tags do Open Graph são obrigatórias?
O protocolo Open Graph nomeia quatro propriedades obrigatórias: og:title, og:type, og:image e og:url. O LinkedIn diz que og:title, og:image, og:description e og:url precisam existir para as prévias dele, então, na prática, defina as cinco, mais o og:image:alt para a imagem.
Qual deve ser o tamanho do meu og:image?
Não existe um tamanho oficial único. O LinkedIn pede pelo menos 1200 × 627 pixels, na proporção 1,91:1 e com menos de 5 MB. O Facebook recomenda imagens com pelo menos 1080 pixels de largura. O cartão de imagem grande do X usa proporção 2:1, com mínimo de 300 × 157 e limite de 5 MB. Um PNG ou JPEG de 1200 × 630 com menos de 5 MB atende a todos eles.
Por que o Facebook ou o LinkedIn ainda mostram a minha prévia antiga?
As plataformas guardam as prévias em cache. O Facebook guarda as imagens por URL e só as atualiza quando a URL muda, então publique uma imagem atualizada com outro nome de arquivo e depois passe a página pelo Depurador de Compartilhamento do Facebook para forçar uma nova leitura. O Post Inspector do LinkedIn faz o mesmo no LinkedIn.
Preciso das tags de cartão do Twitter se já tenho tags Open Graph?
O X recorre ao Open Graph na maior parte dos campos: twitter:title cai para og:title, twitter:description para og:description e twitter:image para og:image. Sem twitter:card, o X ainda pode exibir um cartão de resumo pequeno a partir de og:type, og:title e og:description. Adicione twitter:card com o valor summary_large_image se quiser o layout de imagem grande.
O verificador executa JavaScript?
Não. Ele lê o HTML que o servidor devolve, que é o que a maioria dos rastreadores de prévias também lê. Se as suas tags só aparecem depois que o JavaScript do navegador roda, elas vão faltar aqui e, provavelmente, nos compartilhamentos reais. Gere as tags no servidor ou na hora do build.
Posso verificar uma página de homologação ou localhost?
Não pela URL: por segurança, o verificador só busca endereços públicos e bloqueia IPs privados, locais e de metadados de nuvem. Use a aba Colar HTML: cole o código-fonte da página e ele é analisado inteiramente no seu navegador, com os tamanhos das imagens medidos localmente.
As prévias são exatamente o que cada plataforma vai mostrar?
Não, são aproximações, feitas com as tags que cada plataforma documenta. Cada rede aplica o próprio layout, corte, truncamento e cache, e muda isso com o tempo. Use as prévias para pegar imagens ausentes e títulos ruins e confirme no depurador da própria plataforma antes de um lançamento importante.
