Générateur de balises méta et Open Graph — outil gratuit

Comment ça marche

Tout l'assemblage de balises et l'analyse de l'en-tête se fait directement dans votre navigateur — aucun serveur impliqué. L'outil utilise useMemo de React pour construire de façon réactive des chaînes HTML et l'API DOMParser native du navigateur pour lire le balisage de page existant pour la fonctionnalité d'import/audit.

1. 1
   La saisie du formulaire pilote l'assemblage en direct

   Pendant que vous tapez, un hook useMemo réassemble immédiatement le bloc de balises complet — titre, meta description, propriétés Open Graph, et attributs Twitter Card — en échappant les caractères spéciaux (&, <, >, ") afin que le résultat soit sûr à coller directement dans du HTML.
2. 2
   Validation d'URL via le constructeur URL du navigateur

   Chaque champ d'URL (URL de page, image sociale) est validé avec le constructeur URL intégré du navigateur. Seules les adresses bien formées http:// ou https:// avec des noms d'hôte pointés passent ; les valeurs invalides bloquent le bouton copier et affichent une erreur en ligne.
3. 3
   Import : DOMParser lit le balisage d'en-tête existant

   Si vous collez un HTML <head> existant pour l'auditer, l'outil l'exécute via DOMParser en mode inerte — aucun script ne s'exécute et aucune requête réseau n'est faite. Il interroge ensuite le document analysé pour des sélecteurs meta connus (og:title, twitter:description, lien canonical, etc.) et préremplit les champs du formulaire avec ce qu'il trouve.
4. 4
   Aperçus Google et de carte sociale en direct

   L'outil rend un résultat de recherche Google stylisé et un aperçu de carte Open Graph en temps réel avec le même état de formulaire, afin que vous voyiez exactement comment le titre et la description seront tronqués avant de copier le résultat.

Outils associés