","err_audit_input_required":"Cole primeiro o HTML que contém suas metatags.","mockups_heading":"Como fica uma visualização do link","mockups_disclaimer":"Esses quatro cartões são aproximações de estilo do cromo de visualização de link real de cada plataforma, criados apenas para fins de planejamento - eles não são uma busca ao vivo ou captura de tela do Twitter/X, Facebook, LinkedIn ou Discord, e as plataformas podem remodelar sua própria interface de visualização ao longo do tempo.","mockup_twitter_heading":"Twitter/X","mockup_facebook_heading":"Facebook","mockup_linkedin_heading":"LinkedIn","mockup_discord_heading":"Discórdia","mockup_image_alt":"Imagem de visualização do link","mockup_no_image":"Nenhuma imagem fornecida","mockup_no_image_short":"Nenhuma imagem","domain_default_fallback":"exemplo.com","audit_missing_title":"Og:title ausente – a maioria das plataformas mostra um título genérico ou em branco sem ele.","audit_missing_description":"Faltando og:descrição — o cartão de visualização não mostrará nenhum texto de resumo.","audit_missing_image":"Og:image ausente – a maioria das plataformas não mostra nenhuma imagem ou volta para a primeira imagem encontrada na página.","audit_missing_url":"Og:url ausente — sem ele, os compartilhamentos de URLs alternativos (com parâmetros de rastreamento, versões AMP etc.) podem não ser consolidados na página canônica.","audit_title_too_long":"og:title tem {length} caracteres — acima do ponto de ~{max} caracteres onde a maioria das plataformas irá truncá-lo.","audit_title_long":"og:title tem {length} caracteres — acima do ponto de ~{max} caracteres onde algumas plataformas começam a truncá-lo, embora ele ainda possa ser exibido totalmente em outros lugares.","audit_title_ok":"og:title tem {length} caracteres — dentro da faixa segura para a maioria das plataformas.","audit_description_too_long":"og:description tem {length} caracteres — acima do ponto de ~{max} caracteres onde a maioria das plataformas irá cortá-lo.","audit_description_long":"og:description tem {length} caracteres — acima do ponto de ~{max} caracteres onde algumas plataformas começam a truncá-lo.","audit_description_ok":"og:description tem {length} caracteres — dentro da faixa segura para a maioria das plataformas.","audit_url_not_absolute":"og:url valor \"{value}\" não é um URL http(s) absoluto — deve ser o URL canônico completo da página.","audit_image_not_absolute":"og:image value \"{value}\" não é um URL http(s) absoluto — a maioria das plataformas exige um URL de imagem totalmente qualificado.","audit_image_dims_small":"Og:image:width/height declarado é {w}×{h} — abaixo do mínimo amplamente recomendado de 1200×630 para visualizações de links.","audit_image_dims_ok":"Og:image:width/height declarado é {w}×{h} — atende ao mínimo amplamente recomendado de 1200×630.","audit_image_dims_unparseable":"og:image:width/og:image:height estão presentes, mas não são números válidos.","audit_image_dims_unknown":"Não og:image:width/og:image:height declarado — as dimensões reais em pixels não podem ser verificadas sem buscar a imagem, o que esta ferramenta nunca faz, por design, para privacidade. Mínimo recomendado: 1200×630.","audit_twitter_card_missing":"Sem tag twitter:card — Twitter/X geralmente recorrerá às tags og: equivalentes, mas um twitter:card explícito é mais confiável.","audit_twitter_card_invalid":"twitter:card value \"{value}\" não é um dos quatro valores que o validador de cartão do Twitter aceita: summary, summary_large_image, app, player.","audit_twitter_card_ok":"twitter:card é \"{value}\", um valor válido.","audit_large_image_needs_image":"twitter:card é summary_large_image mas nenhum og:image ou twitter:image foi encontrado — esse tipo de cartão precisa de uma imagem para ser renderizado corretamente.","audit_twitter_title_fallback":"Nenhum twitter:title definido — Twitter/X retornará para og:title.","audit_twitter_description_fallback":"Nenhum twitter:description definido — Twitter/X retornará para og:description.","audit_twitter_image_fallback":"Nenhum twitter:image set — Twitter/X retornará para og:image.","audit_duplicate_tag_item":"\"{tag}\" é declarado {count} vezes — apenas o último que a maioria das plataformas analisa terá efeito."};
⭐ 0
🔍
Texto Imagem PDF e Documentos Áudio Música Eletrônica Tempo Utilitários Validadores Esoterismo Jogos

Gerador de cartão OG e Twitter – Construtor, auditor e visualização de metatags

Crie tags <meta> do Open Graph e do Twitter Card prontas para colar a partir de um formulário ou cole um <head> existente para auditá-lo quanto a tags ausentes, comprimento do título/descrição e validade do twitter:card — e então visualize ambos em modelos de cartão de link genuinamente reestilizados do Twitter/X, Facebook, LinkedIn e Discord.

Buy Me a Coffee at ko-fi.com
Processando... 0%
Entrada de leitura
Tags de construção/auditoria
Renderizando visualizações
Concluído

Resultado

As metatags Open Graph e Twitter Card decidem a aparência de um link no instante em que ele é colado no Slack, iMessage, um tweet ou canal Discord - um título, descrição e imagem escolhidos pelo próprio <head> da página, e não por qualquer coisa que a plataforma raspe do texto visível do corpo. Esta ferramenta é ao mesmo tempo um construtor e um auditor, não um preenchimento de modelo genérico. No modo BUILD, preencha um título, uma descrição, URL da imagem, URL canônica, tipo de conteúdo e tipo de cartão do Twitter, e ele compõe o bloco de tags exato <meta property="og:..."> e <meta name="twitter:..."> pronto para colar no <head> da sua página, ignorando qualquer campo que você deixar vazio em vez de emitir tags vazias com conteúdo em branco.

No modo AUDIT, cole sua marcação <head> existente ou o HTML de uma página inteira e a ferramenta analisa-a com o DOMParser nativo do navegador para extrair cada og: e twitter: meta tag já presente e, em seguida, executa as verificações que realmente importam: as quatro tags comumente exigidas (og:title, og:description, og:image, og:url) são sinalizadas se estiverem ausentes; og:title é medido em relação ao ponto de aproximadamente 60 caracteres onde algumas plataformas começam a truncá-lo e ao ponto de aproximadamente 90 caracteres onde a maioria das plataformas o fará; og:description é medido em relação ao intervalo de aproximadamente 155 a 200 caracteres que a maioria das plataformas permite antes de cortá-lo; twitter:card é verificado em relação aos quatro valores reais que o validador de cartão do Twitter aceita – summary, summary_large_image, app, player – e sinalizado se for qualquer outra coisa; e tags duplicadas (a mesma propriedade declarada duas vezes, um bug de copiar e colar surpreendentemente comum) são chamadas pelo nome.

As dimensões da imagem recebem um tratamento honesto: esta ferramenta não pode verificar o tamanho real do pixel da sua imagem sem buscá-lo, e deliberadamente nunca faz isso, correspondendo à política de não solicitação externa deste site. Se o seu HTML já declara og:image:width e og:image:height, esses números declarados são verificados em relação ao mínimo amplamente recomendado de 1200×630; caso contrário, você receberá uma nota de orientação clara em vez de uma aprovação ou reprovação fabricada. Ambos os modos renderizam os mesmos quatro modelos de visualização de link - Twitter/X (alternando entre seu layout de miniatura "resumo" compacto e layout "summary_large_image" de largura total dependendo do valor twitter:card), Facebook, LinkedIn e Discord - cada um genuinamente reestilizado para corresponder à tipografia e às convenções de layout da própria plataforma, em vez de uma caixa com um logotipo diferente, e cada um é claramente rotulado como uma aproximação ilustrativa para fins de planejamento, uma vez que plataformas reais reestilizam seu cromo de visualização com o tempo e esta ferramenta nunca os busca ou raspa para verificar.

🛡️
Executado no navegador

Seus arquivos e entradas nunca saem deste dispositivo. O processamento é executado totalmente offline. 100% seguro.

Formatos e regras aceitos

  • O modo BUILD compõe og:title, og:description, og:image, og:url, og:type, og:site_name e tags twitter:card/twitter:site/twitter:title/description/image correspondentes, ignorando qualquer campo deixado em branco, com uma cópia de um clique do bloco pronto para colar.
  • O modo AUDIT extrai cada tag og:/twitter: <meta> do HTML colado por meio do DOMParser do navegador, sinalizadores sem tags obrigatórias (og:title/description/image/url), tags duplicadas e valores twitter:card inválidos.
  • A orientação de comprimento usa os limites reais comumente citados: og:title cerca de 60 caracteres antes que algumas plataformas comecem a truncá-lo (até cerca de 90 no mais permissivo), og:description cerca de 155-200 caracteres.
  • Renderiza o cartão Twitter/X em seu layout correto para o tipo de cartão declarado - um cartão de "resumo" compacto com uma pequena miniatura quadrada ou o layout "summary_large_image" de largura total - junto com as visualizações do Facebook, LinkedIn e Discord.

Principais benefícios

✓ Duas ferramentas reais em uma: um modo BUILD que gera o HTML exato da tag og: and twitter: <meta> de um formulário e um modo AUDIT que analisa HTML colado para encontrar e avaliar suas tags existentes.
✓ Validação real, não uma lista de verificação cosmética: tags obrigatórias ausentes, comprimento de og:title/og:description verificado em relação aos limites reais em que as plataformas são truncadas e twitter:card verificado em relação aos quatro valores reais permitidos.
✓ Honesto sobre o que não pode ser verificado offline: as dimensões em pixels da imagem são apenas para orientação, a menos que seu HTML já declare og:image:width/og:image:height, uma vez que esta ferramenta nunca busca sua imagem - por design, para privacidade.
✓ Quatro modelos de plataforma genuinamente diferentes (resumo do Twitter/X vs layouts summary_large_image, Facebook, LinkedIn, Discord) construídos a partir do mesmo título/descrição/imagem, claramente rotulados como ilustrativos.

Casos de uso

  • • Envie uma nova postagem no blog com cartões sociais adequados: preencha o título, a descrição e uma imagem de capa hospedada, gere o bloco de tags og:/twitter: e cole-o diretamente no <head> da página.
  • • Audite o <head> de uma página de destino existente após uma migração do CMS para detectar um og:image ausente, um og:title que é longo o suficiente para ser truncado em algumas plataformas ou um valor twitter:card inválido restante.
  • • Compare como o mesmo título e imagem são lidos no cartão de resumo compacto do Twitter/X versus seu layout de largura total summary_large_image antes de decidir qual tipo de twitter:card declarar.