Pređi na glavni sadržaj
LibraTool logoLibraTool

Generator meta tagova i Open Graph podataka — besplatno

Generišite SEO meta tagove, Open Graph i Twitter Card markup sa pregledom Googlea i deljenja na društvenim mrežama uživo. Kopirajte direktno u zaglavlje stranice.

Radi van mreže kada se učita
0 · 0/580px
0 · 0/920px

Najbolje: 1200×630 px, ispod 5 MB, apsolutna https:// veza.

Uključi i
Naslov 0/580px (cilj 30-60)Opis 0/920px (cilj 70-160)

Prikaz Google pretrage

example.com
Ovde se prikazuje naslov tvoje stranice
Ovde se prikazuje vaš meta opis. Neka bude ubedljiv da biste poboljšali stopu klikova iz rezultata pretrage.

Širine su procena: Google skraćuje po pikselima, a ne po znakovima.

Prikaz socijalne kartice

og:image prikaz
example.com
Naslov stranice
Opis stranice
Nalepi u svoj <head>

Popunite bar jedno polje gore da generišete meta oznake.

Uobičajene upotrebe

  • Metatagovi za članke na bloguGenerišite naslov, opis i društvene tagove kako bi članci izgledali odlično kada se dele.
  • Metatagovi za stranice proizvodaNapravite da se stranice proizvoda dele prelepo i dobro čitaju u rezultatima pretrage.
  • Metatagovi za celine za sletanjePrecizno kontrolišite kako se stranice vašske kampanje za sletanje prikazuju kada se dele i pretražuju.
  • Generišite metatagove za bilo koju veb aplikacijuBrzo napravite kompletan skup glavnih metatagova za novu stranicu ili sajt.
  • Ispravite ružne predpreglede vezaSprečite da vaše veze budu prikazane kao goli URL-ovi — dodajte tagove koji prave kartice sa bogatim predpregleidima.

Kako funkcioniše

Celo sastavljanje oznaka i parsiranje zaglavlja se dešava direktno u vašem pregledaču — bez uključenog servera. Alatka koristi React useMemo da reaktivno gradi HTML nizove i prirodni DOMParser API pregledača da čita postojeći markup stranice za funkciju uvoza/provere.

  1. 1
    Unos forme pokreće sastavljanje uživo
    Dok kucate, useMemo hook odmah ponovo sastavlja ceo blok oznaka — naslov, meta opis, Open Graph svojstva, i atribute Twitter Card — eskejpujući posebne znakove (&, <, >, ") tako da je izlaz bezbedan za direktno lepljenje u HTML.
  2. 2
    Provera URL-a preko konstruktora URL pregledača
    Svako polje URL-a (URL strane, slika za društvene mreže) se proverava koristeći ugrađeni konstruktor URL pregledača. Samo dobro formirane http:// ili https:// adrese sa domenima sa tačkom prolaze; nevalidne vrednosti blokiraju dugme za kopiranje i prikazuju inline grešku.
  3. 3
    Uvoz: DOMParser čita postojeći markup zaglavlja
    Ako nalepite postojeći <head> HTML da ga proverite, alatka ga pokreće kroz DOMParser u inertnom režimu — nijedan skript se ne izvršava i nijedan mrežni zahtev se ne pravi. Zatim upituje parsirani dokument za poznate meta selektore (og:title, twitter:description, canonical link, itd.) i unapred popunjava polja forme sa svime što nađe.
  4. 4
    Pregledi Google-a i društvenih kartica uživo
    Alatka iscrtava stilizovan Google rezultat pretrage i pregled Open Graph kartice u realnom vremenu koristeći isto stanje forme, tako da možete videti tačno kako će naslov i opis biti odsečeni pre nego što kopirate izlaz.

Slične alatke

Česta pitanja