Element <head>, koji služi kao kontejner za metapodatke, je osnovna komponenta HTML-a. Ti metapodaci su povezani sa dokumentom i ne prikazuju se direktno krajnjem korisniku. U ovom članku ćemo pogledati mnoge elemente koji se mogu uključiti u element head i njihov značaj. Razumijevanje prirode i primjene elementa head je ključno za dizajniranje web stranica prilagođenih pretraživačima. Dakle, hajde da istražimo ove elemente:
- title - element title u oznaci head je obavezan i odgovara naslovu stranice. Ovaj element koriste pretraživači za prikazivanje naziva u rezultatima pretrage.
- link - element link uspostavlja vezu između trenutnog sadržaja i eksternog izvora, obično za stilove, skripte i ikone. Uglavnom se koristi za povezivanje CSS datoteka za stilizovanje web stranica.
- meta - meta element se koristi za obezbjeđivanje metapodataka web stranice kao što su kodiranje karaktera, podešavanja okvira za prikaz, informacije o autoru, ključne riječi i opis. Važan su dio koji utiče na optimizaciju pretraživača (SEO) jer informišu pretraživače o sadržaju i svrsi web stranice. Svaki meta element sadrži dva argumenta:
- name - za definisanje naziva meta elementa.
- content - prikaz sadržaja meta elementa.
- script - oznaku script obično koristimo za definisanje JavaScript-a na strani klijenta.
- style - element se koristi za definisanje CSS stilova unutar HTML dokumenta.
<html lang="en">
<head>
<title>Nazi Web Sajta</title>
<link rel="relationship" href="external_source" />
<!-- Meta oznake -->
<!-- charset se koristi da definišemo sistem kodiranja znakova -->
<meta charset="UTF-8" />
<!-- ključne reči pretraživača (više nemaju mnogo svrhe) -->
<meta name="keywords" content="Programming, Web Development" />
<!-- opis stranice u maksimalno 150-160 karaktera, sve preko toga u pretraživaču se prikazuje kao 3 tačke. Vidljivo prilikom prikazivanja rezultata pretrage -->
<meta name="description" content="Free Web tutorials" />
<!-- autor stranice -->
<meta name="author" content="Oh My Me" />
<!-- osvježavanje stranice ( svakih 30 sekundi ) -->
<meta http-equiv="refresh" content="30" />
<!-- podešavanje okvira za prikaz tako da sajt izgleda dobro na svim uređajima -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Kraj meta oznaka -->
<!-- atribut defer označava da će skripta biti preuzeta dok se stranica parsira, ali da se neće pokrenuti dok stranica ne završi raščlanjivanje -->
<script type="text/javascript" src="path/to/skript.js" defer></script>
<style>
/* CSS stil */
</style>
<!-- base element ukazuje na osnovni URL i/ili cilj relativnih URL-ova unutar stranice. Element mora imati atribut href ili target, ili oboje. U dokumentu možemo definisati samo jedan osnovni element. -->
<base href="your_base_url" target="_blank" />
</head>
<body>
<!-- Sadržaj stranice -->
</body>
</html>Open Graph oznake
OGT su meta oznake koje se koriste u HTML dokumentima za definisanje metapodataka koje mreže društvenih medija koriste kada se web stranica dijeli na društvenim platformama. Kada se objave na društvenim medijima, ove oznake pomažu društvenim platformama da razumiju i prikažu sadržaj web stranice na vizuelno privlačan i informativan način. Neke najčešće korišćene ogt metaoznake:
- og:title- naslov web stranice onako kako bi trebalo da izgleda kada se dijeli na društvenim medijima. Pojavljuje se kao glavni naslov dijeljene objave i trebalo bi na odgovarajući način da prikaže sadržaj veb stranice.
- og:description - koristi se za definisanje kratkog opisa veb stranice koja se pojavljuje kao prateći tekst uz dijeljeni post na društvenim medijima. Trebalo bi da pruži sažet i informativan pregled sadržaja veb stranice.
- og:image – ova slika treba da se prikaže kao sličica ili slika za pregled povezan sa dijeljenom objavom na društvenim medijima.
- og:url - treba da bude kanonska URL adresa veb stranice kako bi se osiguralo da deljeni post usmerava korisnike na ispravnu veb stranicu.
- og:type - ova oznaka se koristi za određivanje tipa sadržaja koji se dijeli (članak, veb lokacija, blog, …). Pomaže platformama društvenih medija da kategorizuju i prikažu dijeljeni post na odgovarajući način.
- og:site_name - koristi se za određivanje naziva web lokacije ili brenda povezanog sa web stranicom koja se dijeli.
<html lang="en">
<head>
<meta property="og:title" content="Web Site Title" />
<meta property="og:description" content="Description" />
<meta property="og:image" content="path/to/image" />
<meta property="og:url" content="web_page_url" />
<meta property="og:type" content="content_type" />
<meta property="og:site_name" content="website_name" />
</head>
<body>
<!-- Body sadržaj -->
</body>
</html>Content Security Policy
CSP je bezbjednosna funkcija web pretraživača koja pomaže protiv cross-site skriptovanja na više lokacija (XSS), ubrizgavanja koda i drugih napada koji uključuju izvršavanja koda. Omogućava web programerima da dizajniraju skup pravila koja regulišu koji izvori sadržaja mogu biti učitani ili obrađeni na veb stranici. Primarni cilj CSP-a je da smanji rizik od napada ubrizgavanjem koda ograničavanjem izvora sadržaja koje web stranica može da učita ili izvrši. Web programeri mogu da koriste CSP da odrede pouzdane izvore sadržaja kao što su skripte, slike, stilovi i fontovi dok blokiraju sve druge izvore. Da bismo definisali CSP, koristimo meta tag sa http-equiv i atributima sadržaja. U atributu sadržaja možemo postaviti direktive koje mogu biti uključene u zaglavlja HTTP odgovora ili u meta oznaku u HTML dokumentu:
<html lang="en">
<head>
<!--
self - specificira da se nešto može učitati sa istog porijekla/domena
unsafe-inline - dozvoljava inline sadržaj
unsafe-eval - dozvoljava upotrebu eval() i sličnih funkcija
example.com - dozvoli sa domena ekample.com
-->
<meta
http-equiv="Content-Security-Policy"
content="
default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval' example.com;
img-src 'self' img.example.com;
style-src 'self' 'unsafe-inline';
"
/>
</head>
<body>
<!-- Body sadržaj -->
</body>
</html>