1.5 <head> tegi sirlari: meta, title va favicon ulash
1.5 <head> tegi sirlari: meta, title va favicon ulash
Mentor: Azizbek Alimov (TBC Bank (6+ yil tajriba))
Full HD 1080p • O'zbek tilida • 02:451.5 <head> tegi sirlari: meta, title va favicon ulash
<head> tegi sahifaning eng muhim strategik qismidir. UTF-8 kodlash, responsive dizayn uchun viewport meta tegi, Google SEO uchun description va keywords, ijtimoiy tarmoqlar (Telegram, Facebook) uchun Open Graph (OG) teglari va brauzer tabidagi ikonka (Favicon) ulash ko'rsatiladi.
Darsdan olinadigan amaliy ko'nikmalar:
- charset='UTF-8' nima uchun kerakligini (o'zbekcha harflar xatosiz chiqishi) tushunish
- viewport meta tegi bilan mobil moslashuvchanlik poydevorini qo'yish
- SEO uchun title va meta description yozish qoidalarini o'rganish
- Favicon (.ico yoki .svg) faylini to'g'ri ulash
1. <meta charset="UTF-8"> nima uchun kerak?
Harflar kompyuter xotirasida sonlar ko'rinishida saqlanadi. Agar kodlash (encoding) ko'rsatilmasa, o'zbek tilidagi 'O'g'il', 'G'ildirak' kabi so'zlardagi o' va g' harflari brauzerda g'alati belgilar (masalan, yoki ) bo'lib buzilib chiqadi.
UTF-8 — dunyodagi deyarli barcha tillar, emojilar va maxsus belgilarni to'g'ri aks ettiruvchi xalqaro standart kodlash tizimidir.
2. Viewport — Mobil ekranlar poydevori
`<meta name="viewport" content="width=device-width, initial-scale=1.0">` — bu satrsiz zamonaviy veb-saytni tasavvur qilib bo'lmaydi!
`width=device-width` brauzerga: 'Sahifa enini foydalanuvchining telefon yoki planshet ekrani kengligiga tenglashtir' deb buyuradi. Busiz telefonlarda sahifa mikroskopik kichkina bo'lib ko'rinadi.
3. SEO va Ijtimoiy tarmoqlar (Open Graph)
`<meta name="description" content="...">` — Google qidiruv natijalarida sahifa sarlavhasi ostidagi 2 qator tushuntirish matnidir.
`og:title`, `og:image`, `og:description` — Open Graph teglari bo'lib, veb-sayt havolasini Telegram, WhatsApp yoki Facebook orqali do'stingizga yuborganingizda chiroyli rasm va sarlavha bilan chiqishini ta'minlaydi.
4. Favicon ulash
Favicon — bu brauzer oynasining yuqori tabida sayt sarlavhasi yonida ko'rinadigan kichik logotip yoki ikonkadir. U `<link rel="icon" href="favicon.ico">` orqali ulanadi.