Gratis Meta-tag og Open Graph-generator

Hvordan det fungerer

All sammensetting av tagger og tolking av head skjer direkte i nettleseren — ingen server er involvert. Verktøyet bruker Reacts useMemo til å bygge HTML-strenger reaktivt og nettleserens innebygde DOMParser-API til å lese eksisterende sidekode for import-/revisjonsfunksjonen.

1. 1
   Skjemafeltene driver live sammensetting

   Mens du skriver, setter en useMemo-hook straks sammen hele taggblokken på nytt — tittel, metabeskrivelse, Open Graph-egenskaper og Twitter Card-attributter — og escaper spesialtegn (&, <, >, "), så resultatet er trygt å lime rett inn i HTML.
2. 2
   URL-validering via nettleserens URL-konstruktør

   Hvert URL-felt (side-URL, delingsbilde) valideres med nettleserens innebygde URL-konstruktør. Bare velformede http://- eller https://-adresser med vertsnavn som inneholder punktum godtas; ugyldige verdier blokkerer kopieringsknappen og viser en feilmelding ved feltet.
3. 3
   Import: DOMParser leser eksisterende head-kode

   Limer du inn eksisterende <head>-HTML for å revidere den, kjører verktøyet den gjennom DOMParser i inaktiv modus — ingen skript kjøres og ingen nettverksforespørsler gjøres. Deretter søker det i det tolkede dokumentet etter kjente meta-selektorer (og:title, twitter:description, canonical-lenke osv.) og fyller ut skjemafeltene med det det finner.
4. 4
   Live forhåndsvisning av Google og delingskort

   Verktøyet viser et stilisert Google-søkeresultat og en forhåndsvisning av et Open Graph-kort i sanntid med samme skjemadata, så du ser nøyaktig hvordan tittel og beskrivelse vil bli avkortet før du kopierer resultatet.

Relaterte verktøy