Gerador de Meta Tags e Open Graph grátis

Como funciona

Toda a montagem de tags e análise de head acontece diretamente no seu navegador — nenhum servidor envolvido. A ferramenta usa o useMemo do React para construir reativamente strings HTML e a API nativa DOMParser do navegador para ler marcação de página existente para a funcionalidade de importação/auditoria.

1. 1
   A entrada do formulário conduz a montagem ao vivo

   Enquanto escreve, um hook useMemo remonta imediatamente todo o bloco de tags — título, meta descrição, propriedades Open Graph, e atributos Twitter Card — escapando caracteres especiais (&, <, >, ") para que a saída seja segura para colar diretamente em HTML.
2. 2
   Validação de URL via o construtor URL do navegador

   Cada campo de URL (URL da página, imagem social) é validado usando o construtor URL integrado do navegador. Apenas endereços http:// ou https:// bem formados com nomes de host pontuados passam; valores inválidos bloqueiam o botão de copiar e mostram um erro inline.
3. 3
   Importar: o DOMParser lê a marcação de head existente

   Se colar HTML de <head> existente para o auditar, a ferramenta executa-o através do DOMParser em modo inerte — nenhum script é executado e nenhum pedido de rede é feito. Depois consulta o documento analisado procurando seletores meta conhecidos (og:title, twitter:description, link canónico, etc.) e pré-preenche os campos do formulário com o que encontrar.
4. 4
   Pré-visualizações ao vivo do Google e cartões sociais

   A ferramenta renderiza um resultado de pesquisa Google estilizado e uma pré-visualização de cartão Open Graph em tempo real usando o mesmo estado do formulário, para poder ver exatamente como o título e a descrição serão truncados antes de copiar a saída.

Ferramentas relacionadas