<head> ichida nimalar bo'lishi kerak va meta-teglar nima uchun kerak?

Savol

Hujjatning <head>iga odatda qanday teglar qo'yiladi va charset, viewport, description, Open Graph va favicon kabi meta-teglar nima uchun kerak?

Qisqa javob

<head> foydalanuvchiga ko'rinmaydigan sahifa metama'lumotlarini o'z ichiga oladi: kodlash, vkladka sarlavhasi, uslublar/skriptlarga havolalar va renderingni (viewport), SEO'ni (description) va ijtimoiy tarmoqlarda ulashganda havolaning qanday ko'rinishini (Open Graph) boshqaruvchi meta-teglar. <head> ichidagi hech narsa sahifa tanasida ko'rsatilmaydi.

Batafsil javob

<head>ning asosiy elementlari:

• <meta charset="UTF-8"> — hujjat kodlashi. Fayl boshidan 1024 baytgacha bo'lishi kerak, aks holda brauzer noto'g'ri kodlash bilan tahlil qilishni boshlab yuborishi mumkin.
• <title> — brauzer vkladkasi sarlavhasi va qidiruv natijalaridagi snippet sarlavhasi.
• <meta name="viewport" content="width=device-width, initial-scale=1"> — bu teg bo'lmasa, mobil brauzerlar sahifani taxminan 980px kenglikdagi virtual oynada render qilib, keyin uni masshtablashtiradi, natijada moslashuvchan verstka buziladi. width=device-width viewport'ni ekranning haqiqiy kengligiga tenglashtiradi.
• <meta name="description" content="..."> — qidiruv tizimlari ko'pincha natijalarda sarlavha ostida ko'rsatadigan sahifaning qisqacha tavsifi. Reytingga bevosita ta'sir qilmaydi, lekin CTR'ga ta'sir qiladi.
• Open Graph (og:title, og:description, og:image, og:url) — havola ulashganda oldindan ko'rish kartochkasini yaratish uchun ko'pchilik messenjerlar va ijtimoiy tarmoqlar o'qiydigan Facebook protokoli. og:image bo'lmasa, kartochka odatda bo'sh va jozibasiz ko'rinadi.
• <link rel="icon" href="/favicon.ico"> — vkladka ikonkasi (favicon), shuningdek xatchoʻplar va brauzer tarixida ham ishlatiladi.
• <link rel="canonical" href="..."> — takrorlanuvchi mazmun mavjud bo'lganda (masalan, ?utm_source bilan va bo'lmagan holatda) qidiruv tizimiga sahifaning kanonik versiyasini ko'rsatadi.
• <link rel="stylesheet"> va <script> — CSS va JS ulash; ularning tartibi va atributlari (defer/async) birinchi renderning tezligiga ta'sir qiladi.

Misol

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Poyabzal do'koni — Nuxt UZ</title>
  <meta name="description" content="O'zbekiston bo'ylab yetkazib berish bilan krossovka va botinkalar katalogi" />

  <!-- Ulashishda oldindan ko'rish uchun Open Graph -->
  <meta property="og:title" content="Poyabzal do'koni — Nuxt UZ" />
  <meta property="og:description" content="Yetkazib berish bilan krossovka va botinkalar katalogi" />
  <meta property="og:image" content="https://example.com/og-cover.jpg" />
  <meta property="og:url" content="https://example.com" />

  <link rel="canonical" href="https://example.com" />
  <link rel="icon" href="/favicon.ico" />
  <link rel="stylesheet" href="/styles/main.css" />
</head>

Qo'shimcha savollar

• viewport tegisiz moslashuvchan verstkaga nima bo'ladi?
• og:* teglari Twitter Card teglaridan (twitter:card) nimasi bilan farq qiladi?
• rel="canonical" nima uchun kerak va u takrorlanuvchi mazmunga qanday ta'sir qiladi?