Gerador de OG & Twitter Card — Construtor, Auditor e Pré-visualização de Tags Meta
Construa tags <meta> Open Graph e Twitter Card prontas a colar a partir de um formulário, ou cole um <head> existente para o auditar quanto a tags em falta, comprimento de título/descrição e validade de twitter:card — e depois pré-visualize ambas em maquetes genuinamente reestilizadas de cartões de ligação do Twitter/X, Facebook, LinkedIn e Discord.
🔒 Processado inteiramente em seu navegador – nada que você digita aqui é carregado.
Resultado
As tags meta Open Graph e Twitter Card decidem o aspeto de uma ligação no instante em que é colada no Slack, iMessage, num tweet ou num canal do Discord — um título, descrição e imagem escolhidos pelo <head> da própria página, não pelo que a plataforma calhe de extrair do texto visível no corpo. Esta ferramenta é simultaneamente um construtor e um auditor, não um mero preenchedor de modelos genéricos. No modo CONSTRUIR, preencha um título, descrição, URL da imagem, URL canónico, tipo de conteúdo e tipo de cartão do Twitter, e ela compõe o bloco exato de tags <meta property="og:..."> e <meta name="twitter:..."> pronto a colar no <head> da sua página, ignorando qualquer campo que deixe vazio em vez de emitir tags ocas com conteúdo em branco.
No modo AUDITAR, cole o seu markup <head> existente ou o HTML completo de uma página e a ferramenta analisa-o com o DOMParser nativo do navegador para extrair cada tag meta og: e twitter: já presente, executando depois as verificações que realmente importam: as quatro tags comummente obrigatórias (og:title, og:description, og:image, og:url) são assinaladas se em falta; og:title é medido face ao ponto de cerca de 60 caracteres onde algumas plataformas começam a truncá-lo e ao ponto de cerca de 90 caracteres onde a maioria o fará; og:description é medido face ao intervalo de cerca de 155 a 200 caracteres que a maioria das plataformas permite antes de cortar; twitter:card é verificado contra os quatro valores reais que o validador de Cartões do Twitter aceita — summary, summary_large_image, app, player — e assinalado se for outro qualquer; e tags duplicadas (a mesma propriedade declarada duas vezes, um erro de copiar-colar surpreendentemente comum) são apontadas pelo nome.
As dimensões da imagem recebem um tratamento honesto: esta ferramenta não pode verificar o tamanho real em píxeis da sua imagem sem a ir buscar, e deliberadamente nunca o faz, em conformidade com a política de zero pedidos externos deste site. Se o seu HTML já declarar og:image:width e og:image:height, esses números declarados são conferidos face ao mínimo amplamente recomendado de 1200×630; se não, recebe uma nota de orientação clara em vez de um chumbo ou aprovação fabricados. Ambos os modos renderizam as mesmas quatro maquetes de pré-visualização de ligação — Twitter/X (alternando entre o seu layout compacto de miniatura "summary" e o de largura total "summary_large_image" conforme o valor de twitter:card), Facebook, LinkedIn e Discord — cada uma genuinamente reestilizada para corresponder à tipografia e convenções de layout da própria plataforma, em vez de uma caixa com um logótipo diferente, e cada uma é claramente identificada como uma aproximação ilustrativa para fins de planeamento, já que as plataformas reais reestilizam a sua moldura de pré-visualização ao longo do tempo e esta ferramenta nunca as vai buscar ou extrai para verificar.