Xerador de metaetiquetas e Open Graph de balde

Como funciona

Toda a montaxe de etiquetas e a análise de cabeceira ocorre directamente no teu navegador — sen servidor implicado. A ferramenta usa o useMemo de React para construír reactivamente cadeas HTML e a API nativa DOMParser do navegador para ler o marcado de páxina existente para a función de importación/auditoría.

1. 1
   A entrada do formulario dirixe a montaxe en directo

   Mentres escribes, un hook useMemo reensamblará inmediatamente todo o bloque de etiquetas — título, meta descrición, propiedades Open Graph e atributos de Twitter Card — escapando caracteres especiais (&, <, >, ") para que a saída sexa segura para pegar directamente en HTML.
2. 2
   Validación de URL mediante o construtor URL do navegador

   Cada campo de URL (URL da páxina, imaxe social) valídase usando o construtor URL integrado do navegador. Só pasan enderezos http:// ou https:// ben formados con nomes de host con puntos; os valores non válidos bloquean o botón de copiar e mostran un erro en liña.
3. 3
   Importar: DOMParser le o marcado de cabeceira existente

   Se pegas HTML de <head> existente para auditalo, a ferramenta pásao a través de DOMParser en modo inerte — non se executa ningún script e non se fan peticións de rede. Despois consulta o documento analizado en busca de selectores meta coñecidos (og:title, twitter:description, ligazón canonical, etc.) e prerecheia os campos do formulario con calquera cousa que atope.
4. 4
   Vistas previas en directo de Google e tarxetas sociais

   A ferramenta renderiza un resultado de busca de Google estilizado e unha vista previa de tarxeta Open Graph en tempo real usando o mesmo estado do formulario, para que poidas ver exactamente como se truncarán o título e a descrición antes de copiar a saída.

Ferramentas relacionadas