Besplatan Generator meta tagova i Open Graph oznaka

Kako radi

Cijelo sastavljanje oznaka i raščlanjivanje zaglavlja se odvija direktno u vašem pregledniku — server nije uključen. Alat koristi React useMemo da reaktivno gradi HTML nizove i native DOMParser API preglednika da čita postojeću oznaku stranice za funkciju uvoza/revizije.

1. 1
   Unos forme pokreće sastavljanje uživo

   Dok kucate, useMemo kuka odmah ponovo sastavlja cijeli blok oznaka — naslov, meta opis, Open Graph svojstva, i atribute Twitter Card — escape-ujući posebne znakove (&, <, >, ") tako da je izlaz siguran za direktno lijepljenje u HTML.
2. 2
   Validacija URL-a putem URL konstruktora preglednika

   Svako polje URL-a (URL stranice, slika za društvene mreže) se validira koristeći ugrađeni URL konstruktor preglednika. Prolaze samo dobro formirane http:// ili https:// adrese sa nazivima domena sa tačkama; nevalidne vrijednosti blokiraju dugme za kopiranje i prikazuju inline grešku.
3. 3
   Uvoz: DOMParser čita postojeću oznaku zaglavlja

   Ako zalijepite postojeći <head> HTML da ga revidirate, alat ga izvršava kroz DOMParser u inertnom modu — nijedan skript se ne izvršava i nijedan mrežni zahtjev se ne šalje. Zatim pretražuje raščlanjeni dokument za poznate meta selektore (og:title, twitter:description, canonical link, itd.) i unaprijed popunjava polja forme onim što pronađe.
4. 4
   Pregledi uživo za Google i društvene mreže

   Alat iscrtava stilizovan Google rezultat pretrage i pregled Open Graph kartice u realnom vremenu koristeći isto stanje forme, tako da možete vidjeti tačno kako će naslov i opis biti skraćeni prije nego što kopirate izlaz.

Povezani alati