<meta> oznake u <head> pružaju metapodatke o stranici — kodiranje znakova, ponašanje viewport-a, SEO opise i društvene pretpreglede. Nisu prikazane, ali ih čitaju preglednici, tražilice i društvene platforme.
Zašto je ovo važno
<meta> oznake u <head> pružaju metapodatke o stranici — kodiranje znakova, ponašanje viewport-a, SEO opise i društvene pretpreglede. Nisu prikazane, ali ih čitaju preglednici, tražilice i društvene platforme.
charset osigurava da se tekst (pogotovo ne-ASCII) dekodira ispravno. Stavite ga prvo.viewport je ono što čini web stranicu responsive na mobilu — bez njega, telefoni prikazuju na lažnoj širini od 980px i zumiraju van, razaraju vašu responsive CSS.<title>Page Title — 50–60 chars</title>
<meta name="description" content="Summary shown in search results, ~150 chars" />
<link rel="canonical" href="https://site.com/page" /> <!-- avoid duplicate-content penalties -->
<title> i description su ono što se pojavljuje u rezultatima Google-a, pa pokretaju kliknutost. canonical govori tražilicama autoritetni URL.
<meta property="og:title" content="Shareable title" />
<meta property="og:description" content="Shown when shared" />
<meta property="og:image" content="https://site.com/preview.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta name="twitter:card" content="summary_large_image" />
Ovi kontroliraju karticu koja se pojavljuje kada se vaša poveznica dijeli na Facebook-u, LinkedIn-u, Slack-u, X-u, itd. — bez njih dobijate ružan ili prazan pretpregled.
charset i viewport su neizostavni za ispravan prikaz i mobilni odgovor; title/description/canonical pokretaju SEO; Open Graph oznake kontroliraju kako vaše veze izgledaju kada se dijele.
Zajedno su metapodatak sloj koji čini stranicu ispravno prikazanom, rangiranom i dobro dijelanom.