Što su meta oznake?

Meta oznake (<meta>) nalaze se unutar zaglavlja (<head>) HTML dokumenta i daju pregledne informacije preglednicima, tražilicama i pomagačkim tehnologijama. Iako nisu vidljive krajnjem korisniku, presudne su za SEO optimizaciju, pravilno prikazivanje na mobilnim uređajima i za točan prikaz znakova (eng. character encoding).

Najkorištenije meta oznake

charset – postavlja kodnu stranicu (npr. UTF‑8).
viewport – upravlja skaliranjem na mobilnim uređajima.
description – opis stranice prikazan u rezultatima pretraživanja.
keywords – zastarjelo za SEO, ali još mjestimice korisno.
author – autor dokumenta.

Primjeri – osnovne meta oznake

<!-- unutar <head> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Opis vaše stranice">
<meta name="author" content="Vaše ime">
<meta name="keywords" content="HTML, meta, tutorial">

Primjeri – društvene mreže (Open Graph & Twitter)

<!-- Facebook / LinkedIn / Viber -->
<meta property="og:title" content="Naslov članka">
<meta property="og:description" content="Sažetak članka">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://example.com">

<!-- Twitter kartice -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Naslov članka">
<meta name="twitter:description" content="Sažetak članka">

📄 Puni primjer <head> elementa sa svim meta oznakama

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Kratki opis stranice do 160 znakova.">
  <meta name="author" content="Brane">
  <title>Primjer stranice</title>
  <!--  Open Graph  -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Primjer stranice">
  <meta property="og:description" content="Opis za društvene mreže.">
  <meta property="og:image" content="https://example.com/og-image.jpg">
</head>

SEO & Robots meta oznake

Osim description i keywords, postoje i druge SEO‑orijentirane meta oznake:

robots – kontrolira indeksiranje (<meta name="robots" content="index,follow">)
googlebot – specifično za Google (noarchive, nosnippet...)
revisit-after – preporuka crawleru kada ponovno posjetiti stranicu (rijetko korišteno).
rating – oznaka prikladnosti sadržaja (npr. safe for kids).

Primjer robots meta oznake

<meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1">

Mobilne i UI meta oznake

Na mobitelima možemo poboljšati UX pomoću:

theme-color – boja adresne trake u mobilnim preglednicima
apple-mobile-web-app-capable & apple-mobile-web-app-status-bar-style
format-detection – onemogućava automatsko prepoznavanje tel./email linkova

Primjer theme-color

<meta name="theme-color" content="#2e2055">

HTTP‑Equiv i sigurnosne oznake

HTTP‑Equiv meta oznake simuliraju HTTP zaglavlja:

Content-Security-Policy – definira CSP pravila
Referrer-Policy – upravlja slanjem referera

Primjer CSP

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https: data:;">

Česte pogreške

Zaboravljen viewport što uzrokuje loš prikaz na mobitelu.
Dupli description meta tagovi – Google će ignorirati oba.
Zastarjeli keywords s previše pojmova (keyword stuffing).

Često postavljena pitanja

Je li meta keywords još uvijek važan?

Ne za moderne tražilice poput Googlea, ali neke specifične tražilice ga još uzimaju u obzir.

Mogu li koristiti više meta description oznaka?

Nije preporučljivo. Odaberite jednu opisnu oznaku do 160 znakova.

Utječe li theme-color na SEO?

Direktno ne, ali poboljšava korisničko iskustvo na mobitelima.

Meta oznake u HTML‑u

Kratki opis: što su i zašto su ključne za SEO i pristupačnost?