Generador de meta etiquetes i Open Graph de franc

Com funciona

Tot l'assemblatge d'etiquetes i l'anàlisi de capçalera passa directament al teu navegador — sense cap servidor implicat. L'eina utilitza el useMemo de React per construir reactivament cadenes HTML i l'API DOMParser nativa del navegador per llegir el marcatge de pàgina existent per a la funció d'importació/auditoria.

1. 1
   L'entrada del formulari condueix l'assemblatge en directe

   Mentre escrius, un hook useMemo torna a assemblar immediatament el bloc d'etiquetes complet — títol, meta descripció, propietats d'Open Graph, i atributs de Twitter Card — escapant caràcters especials (&, <, >, ") perquè la sortida sigui segura per enganxar directament a l'HTML.
2. 2
   Validació d'URL via el constructor URL del navegador

   Cada camp d'URL (URL de pàgina, imatge social) es valida utilitzant el constructor URL integrat del navegador. Només passen adreces ben formades http:// o https:// amb noms d'amfitrió amb punts; els valors no vàlids bloquegen el botó de còpia i mostren un error en línia.
3. 3
   Importació: DOMParser llegeix el marcatge de capçalera existent

   Si enganxes HTML de <head> existent per auditar-lo, l'eina l'executa a través de DOMParser en mode inert — no s'executa cap script i no es fa cap sol·licitud de xarxa. Després consulta el document analitzat per selectors meta coneguts (og:title, twitter:description, enllaç canonical, etc.) i preomple els camps del formulari amb el que trobi.
4. 4
   Previsualitzacions en directe de Google i targetes socials

   L'eina renderitza un resultat de cerca de Google amb estil i una previsualització de targeta d'Open Graph en temps real utilitzant el mateix estat del formulari, així pots veure exactament com es truncaran el títol i la descripció abans de copiar la sortida.

Eines relacionades