Meta teglar — charset, viewport, description

~15 daq · HTML · Semantik HTML va Meta

Muammodan boshlaylik

Uch muammo, uchalasining ham sababi — <head> dagi bir qator:

  1. Saytda "O'zbekiston" o'rniga O‘zbekiston ko'rinyapti
  2. Telefonda sayt mitti — butun sahifa kichraytirilgan, o'qish uchun kattalashtirish kerak
  3. Saytni Telegram ga tashlasangiz — chiroyli kartochka o'rniga oddiy havola; Google natijalarida esa sahifadan tasodifiy matn bo'lagi

Meta teglar — sahifa haqidagi ma'lumot (metama'lumot): ular sahifada ko'rinmaydi, lekin brauzer, qidiruv tizimlari va ijtimoiy tarmoqlarga sahifani qanday ko'rsatish kerakligini aytadi. Hammasi <head> ichida (2-dars).

charset — belgilar kodlash

<meta charset="UTF-8">

Brauzerga matn qaysi kodlashda yozilganini aytadi. UTF-8 — dunyodagi deyarli barcha harflar va belgilarni qamraydi: lotin, kirill, oʻ, gʻ, arab yozuvi, emoji.

Busiz brauzer kodlashni taxmin qiladi va ba'zan xato qiladi — darsning boshidagi O‘zbekiston (1-muammo).

  • <head> ning eng birinchi qatori bo'lsin (brauzer uni birinchi 1024 baytda topishi kerak)
  • Faylning o'zi ham UTF-8 da saqlangan bo'lsin (VS Code da pastki o'ng burchakda ko'rinadi)

viewport — mobil qurilmalar uchun

<meta name="viewport" content="width=device-width, initial-scale=1">

Telefon brauzeriga: "sahifa kengligi — qurilma ekranining haqiqiy kengligi, kichraytirma". Busiz telefon sahifani ~980px li kompyuter ekrani deb hisoblaydi va mitti qilib ko'rsatadi — 2-muammo.

Batafsil — CSS kursining 25-darsi (Responsive Design).

[!WARNING] maximum-scale=1 yoki user-scalable=no qo'shmang: ular foydalanuvchiga sahifani barmoq bilan kattalashtirishni taqiqlaydi. Ko'rish qobiliyati past odamlar uchun sayt foydalanib bo'lmaydigan bo'ladi.

title — sahifa sarlavhasi

<title>Flexbox nima? | CSS kursi | DevDocs</title>

Texnik jihatdan meta teg emas, lekin eng muhim metama'lumot:

  • Brauzer tabida ko'rinadi
  • Google natijalarida ko'k sarlavha sifatida
  • Xatcho'p (bookmark) nomi
  • Ekran o'quvchi sahifa ochilganda birinchi o'qiydigan narsa

Yaxshi title:

  • Har bir sahifada noyob
  • Eng muhim so'zlar boshida (tabda va qidiruvda kesilishi mumkin)
  • 50–60 belgi atrofida
  • Oxirida sayt nomi: Sahifa | Sayt
<!-- ❌ -->
<title>Bosh sahifa</title>
<title>DevDocs</title>                       <!-- hamma sahifada bir xil -->

<!-- ✅ -->
<title>CSS Grid — auto-fill va minmax | DevDocs</title>

description — qisqa tavsif

<meta name="description" content="CSS Grid da auto-fill, auto-fit va minmax() bilan media query siz responsive to'r yasash — misollar bilan, o'zbek tilida.">

Sahifaning qisqa mazmuni — Google natijalarida sarlavha ostidagi kulrang matn sifatida ko'rsatilishi mumkin (3-muammo).

CSS Grid — auto-fill va minmax | DevDocs              ← title
devdocs.uz › css › 22-grid-autofill
CSS Grid da auto-fill, auto-fit va minmax() bilan     ← description
media query siz responsive to'r yasash — misollar...
  • 150–160 belgi — uzunrog'i kesiladi
  • Har bir sahifada noyob, sahifa haqiqatan nima haqida ekanini aytsin
  • Foydalanuvchini bosishga undasin

[!INFO] description reytingga bevosita ta'sir qilmaydi, lekin foydalanuvchi natijalardan qaysi birini bosishini belgilaydi. Google uni har doim ham ko'rsatmaydi — ba'zan sahifadan qidiruv so'roviga mosroq bo'lak oladi.

Open Graph — ijtimoiy tarmoqlar uchun

Havola Telegram, Facebook, LinkedIn, WhatsApp ga tashlanganda chiroyli kartochka (rasm, sarlavha, tavsif) — Open Graph teglari:

<meta property="og:title" content="CSS Grid — auto-fill va minmax">
<meta property="og:description" content="Media query siz responsive to'r — misollar bilan.">
<meta property="og:image" content="https://devdocs.uz/og/css-grid.png">
<meta property="og:url" content="https://devdocs.uz/css/22-grid-autofill">
<meta property="og:type" content="article">
<meta property="og:site_name" content="DevDocs">
<meta property="og:locale" content="uz_UZ">
  • og:image — to'liq URL (https://...), o'lchami 1200×630 piksel, PNG yoki JPG (SVG ishlamaydi)
  • Bo'lmasa, platforma sahifadan tasodifiy rasm yoki hech narsa olmaydi

X (Twitter) uchun qo'shimcha:

<meta name="twitter:card" content="summary_large_image">

Tekshirish: Telegram da havolani o'zingizga yuboring. Kesh bor — o'zgartirganingizdan keyin Telegram ning @WebpageBot i orqali yangilash mumkin.

Boshqa foydali teglar

<!-- Kanonik URL — bir xil kontent bir nechta manzilda bo'lsa, asosiysi qaysi (13-dars) -->
<link rel="canonical" href="https://devdocs.uz/css/22-grid-autofill">

<!-- Sahifa tili — html tegida (meta emas, lekin muhim) -->
<html lang="uz">

<!-- Brauzer paneli rangi (mobil) -->
<meta name="theme-color" content="#10162F">

<!-- Ikonka -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Qidiruvda ko'rsatmaslik (test sahifalari, shaxsiy kabinet) -->
<meta name="robots" content="noindex">

[!INFO] <meta name="keywords"> — 2009 yildan beri Google tomonidan e'tiborsiz qoldiriladi (spamerlar suiiste'mol qilgani uchun). Yozish shart emas.

To'liq head shabloni

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Flexbox nima? | CSS kursi | DevDocs</title>
  <meta name="description" content="Flexbox — elementlarni qator yoki ustun bo'ylab joylashtirish va markazlash. Misollar bilan, o'zbek tilida.">
  <link rel="canonical" href="https://devdocs.uz/css/13-flexbox-nima">

  <meta property="og:title" content="Flexbox nima?">
  <meta property="og:description" content="Elementlarni joylashtirish va markazlash — misollar bilan.">
  <meta property="og:image" content="https://devdocs.uz/og/flexbox.png">
  <meta property="og:url" content="https://devdocs.uz/css/13-flexbox-nima">
  <meta property="og:type" content="article">
  <meta name="twitter:card" content="summary_large_image">

  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <meta name="theme-color" content="#10162F">

  <link rel="stylesheet" href="/style.css">
</head>

Sahifaning kodini ko'rish (Ctrl+U) — har qanday saytning head qismini o'rganishning oson usuli. DevDocs ning o'zida ham har bir dars sahifasi shunday teglar bilan yaratiladi.

Nima uchun shunday?

Nima uchun bu ma'lumotlar sahifada ko'rinmaydigan maxsus teglarda — ularni sahifa matnidan avtomatik olsa bo'lmaydimi?

Olish mumkin — va dasturlar ko'pincha shunday qiladi — lekin natija taxmin bo'ladi. Qidiruv tizimi sahifaning qaysi qismi uning mazmunini eng yaxshi aytishini bilmaydi; Telegram qaysi rasm sahifani eng yaxshi ifodalashini bilmaydi; brauzer matn qaysi kodlashda ekanini faqat taxmin qiladi. Meta teglar — bu sahifa muallifining aniq ko'rsatmasi: "mening sahifam mana shu, uni shunday ko'rsat". Bir necha qator evaziga sahifangiz qidiruvda, ijtimoiy tarmoqlarda va har qanday qurilmada siz xohlaganday ko'rinadi — tasodifiy natija o'rniga.

Xulosa

Eslab qoling:

  • <meta charset="UTF-8"> — <head> ning birinchi qatori; buzilgan harflarni oldini oladi
  • <meta name="viewport" content="width=device-width, initial-scale=1"> — mobil uchun majburiy; zoom ni taqiqlamang
  • <title> — noyob, 50–60 belgi, muhim so'zlar boshida
  • description — 150–160 belgi, noyob; qidiruvda ko'rinadi
  • Open Graph: og:title, og:description, og:image (1200×630, to'liq URL), og:url
  • canonical, lang, theme-color, ikonka; keywords — kerak emas
  • noindex — qidiruvda ko'rsatmaslik

Keyingi dars

12-dars: Script tegi — defer, async, type="module" — farqlari