Generatore Meta Tag e Open Graph gratis

Come funziona

Tutto l'assemblaggio dei tag e l'analisi dell'head avviene direttamente nel tuo browser — nessun server coinvolto. Lo strumento usa useMemo di React per costruire reattivamente stringhe HTML e l'API DOMParser nativa del browser per leggere il markup di pagina esistente per la funzione importa/verifica.

1. 1
   L'input del form guida l'assemblaggio dal vivo

   Mentre digiti, un hook useMemo riassembla immediatamente l'intero blocco di tag — titolo, meta description, proprietà Open Graph, e attributi Twitter Card — facendo l'escape dei caratteri speciali (&, <, >, ") così l'output è sicuro da incollare direttamente in HTML.
2. 2
   Validazione URL tramite il costruttore URL del browser

   Ogni campo URL (URL pagina, immagine social) viene validato usando il costruttore URL integrato del browser. Solo indirizzi http:// o https:// ben formati con hostname puntati passano; valori non validi bloccano il pulsante copia e mostrano un errore inline.
3. 3
   Importa: DOMParser legge il markup head esistente

   Se incolli HTML <head> esistente per analizzarlo, lo strumento lo esegue attraverso DOMParser in modalità inerte — nessuno script viene eseguito e nessuna richiesta di rete viene fatta. Poi interroga il documento analizzato per selettori meta noti (og:title, twitter:description, link canonical, ecc.) e precompila i campi del form con qualsiasi cosa trovi.
4. 4
   Anteprime dal vivo di Google e card social

   Lo strumento rende un risultato di ricerca Google stilizzato e un'anteprima card Open Graph in tempo reale usando lo stesso stato del form, così puoi vedere esattamente come il titolo e la descrizione verranno troncati prima di copiare l'output.

Strumenti correlati