Ključne informacije o Meta Oznakama
- Meta oznake pružaju ključne informacije o web stranici pretraživačima, analizatorima i web servisima.
- Osnovne vrste uključuju meta opis, Open Graph, viewport i HTTP-equiv oznake.
- Prilagođene meta oznake nude fleksibilnost, ali zahtevaju detaljnu dokumentaciju i planiranje.
Pored naslova vaše stranice, skripti i stilova, HTML head sekcija može da sadrži meta oznake. Ovo je izuzetno važno za SEO, pristupačnost i ukupan učinak web lokacije.
Naučite kako da koristite meta oznake i saznajte koje informacije one mogu da pruže.
Meta oznake su elementi koji daju dodatne detalje o web stranici. Pretraživači ne prikazuju direktno ove metapodatke, ali različiti alati ih mogu koristiti u razne svrhe. Ovo uključuje pretraživače, alate za analizu i druge web servise.
Informacije koje unesete u meta oznake poboljšavaju poziciju na pretraživačima, doprinose brzom odzivu i pristupačnosti web stranice, i unapređuju prikaz vaših stranica na društvenim mrežama.
Meta oznake su samozatvarajuće; ne postoji </meta>, jer one ne obuhvataju sadržaj. Sve svoje podatke sadrže unutar atributa. Možete dodati meta oznake u head sekciju vašeg HTML fajla:
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dokument</title>
Ovaj primer HTML šablona sadrži dve meta oznake u head sekciji. One pružaju informacije o skupu znakova (UTF-8) i oblasti prikaza, redom.
Većina meta oznaka koristi kombinaciju sledećih atributa za skladištenje podataka.
- name i content: Atribut name je oznaka, dok atribut content čuva podatke povezane sa tom oznakom. Ovo obezbeđuje fleksibilan i proširiv sistem za skladištenje svih potrebnih metapodataka.
- property: Ovaj atribut se koristi kao alternativa atributu name i ima sličnu funkciju.
- http-equiv: Znači „HTTP ekvivalent“ i definiše HTTP zaglavlje za vrednost specificiranu u atributu content.
- scheme: Ovaj atribut, koji se koristi sa atributom name, definiše tip podataka u atributu content.
Različiti web servisi i pretraživači obično podržavaju sledeće meta oznake.
Meta Oznaka Opisa
Ovaj isečak do 155 karaktera sumira sadržaj stranice. Pretraživači ga često prikazuju ispod naslova stranice i URL adrese. Neophodno je da pružite koncizan i tačan opis kako biste privukli korisnike da kliknu na vezu i posete vašu stranicu.
<meta name="description" content="Kratak opis vaše stranice">
Open Graph Meta Oznake
Facebook i druge platforme društvenih medija intenzivno koriste ove oznake. One koriste informacije u ovim oznakama za poboljšanje prezentacije veza do vaše stranice kada ih korisnici dele. Open Graph meta oznake sadrže atribute kao što su og:title, og:description i og:image:
<meta property="og:title" content="Naslov vaše stranice"> <meta property="og:description" content="Kratak opis vaše stranice"> <meta property="og:image" content="URL povezane slike">
SEO Meta Oznake
Ove oznake pružaju informacije pretraživačima i pomažu poboljšanju pozicije vaše stranice. One su takođe sastavni deo osnovnih SEO praksi. Uključuju atribute kao što su robots, author i mnoge druge. Iako je značaj ovih oznaka vremenom opao, i dalje je važno da ih uključite u svoj HTML dokument.
<meta name="robots" content="index, follow"> <meta name="author" content="Vaše Ime">
Meta Oznaka Viewporta
Meta oznaka viewporta je esencijalni element u responsivnom web dizajnu. Ona govori pretraživaču da prilagodi prikaz web stranice prema širini uređaja, osiguravajući da se sadržaj pravilno prikazuje i da je čitljiv na mobilnim uređajima.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTTP-equiv Meta Oznake
Ove meta oznake su ključne za kontrolisanje određenih aspekata načina na koji pretraživači i serveri obrađuju web stranice. One sadrže atribute kao što su refresh i X-UA-Compatible. Iako njihov direktan uticaj na SEO može da varira, one igraju važnu ulogu u ponašanju i kompatibilnosti stranice.
<meta http-equiv="refresh" content="5;url=https://example.com"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
Nećete koristiti sve ove oznake odjednom u vašim projektima, ali je bitno da dobro razumete različite dostupne meta oznake. Korišćenje meta oznaka takođe poboljšava organizaciju HTML dokumenata.
Meta oznake su fleksibilne jer:
- Možete koristiti bilo koje ime za skladištenje željenih podataka.
- Pretraživači neće prikazati njihov sadržaj, ali će on uvek biti vidljiv u kodu stranice.
Primer prilagođene meta oznake:
<meta name="target-audience" content="developers">
U ovom primeru, prilagođena oznaka specificira ciljnu publiku sadržaja, što ukazuje da su to programeri.
Prilagođene meta oznake pružaju način da proširite standardni skup opšte priznatih oznaka. Međutim, važno je da pažljivo dokumentujete prilagođene oznake koje koristite i da razumete kako ćete ih koristiti. Ostali servisi ih neće koristiti ili prepoznati po defaultu, tako da ćete verovatno pisati sopstveni kod za njihovu obradu.