Gratis Meta tag og Open Graph-generator

Sådan fungerer det

Al sammensætning af tags og fortolkning af head sker direkte i din browser — ingen server involveret. Værktøjet bruger Reacts useMemo til reaktivt at bygge HTML-strenge og browserens indbyggede DOMParser API til at læse eksisterende sidemarkup til import- og revisionsfunktionen.

1. 1
   Formularinput styrer den løbende sammensætning

   Mens du skriver, sammensætter en useMemo-hook straks hele tagblokken — titel, metabeskrivelse, Open Graph-egenskaber og Twitter Card-attributter — og escaper specialtegn (&, <, >, "), så outputtet er sikkert at indsætte direkte i HTML.
2. 2
   URL-validering via browserens URL-konstruktør

   Hvert URL-felt (sidens URL, socialt billede) valideres med browserens indbyggede URL-konstruktør. Kun velformede http://- eller https://-adresser med værtsnavne med punktum godkendes; ugyldige værdier blokerer kopiér-knappen og viser en fejl ved feltet.
3. 3
   Import: DOMParser læser eksisterende head-markup

   Indsætter du eksisterende <head>-HTML for at revidere den, sender værktøjet den gennem DOMParser i inaktiv tilstand — ingen scripts køres, og der foretages ingen netværksforespørgsler. Derefter søger det i det fortolkede dokument efter kendte meta-selektorer (og:title, twitter:description, canonical-link osv.) og udfylder formularfelterne med det, den finder.
4. 4
   Live forhåndsvisning af Google-resultat og sociale kort

   Værktøjet viser et formateret Google-søgeresultat og et Open Graph-kort i realtid ud fra samme formulardata, så du kan se præcis, hvordan titel og beskrivelse bliver afkortet, før du kopierer outputtet.

Relaterede værktøjer