SEO va meta teglar

SEO, title, description, viewport, charset, lang, Open Graph, robots

10-sinfAdvanced UX/UI5-hafta · 15-dars

Bugun nimalarni o'rganamiz?

SEO nima

Qidiruvda ko'rinish

Meta teglar

head bo'limi

Ulashish va robotlar

OG, canonical, robots

Takrorlash

Maydon nomini input bilan nima bog'laydi?

for = id.

SEO nima

Qidiruvda ko'rinish

SEO omillari

SEO uchun yaxshi tuzilma


<main>
  <h1>Maktab qabuli 2026</h1>
  <p>Qabul qoidalari va muddatlari.</p>
  <img src="bino.jpg" alt="Maktab binosi">
  <h2>Hujjatlar ro'yxati</h2>
</main>

Bitta h1, mazmunli alt va ketma-ket sarlavhalar robot va foydalanuvchiga bir xil yordam beradi.

Mini-test

SEO ning maqsadi nima?

SEO — qidiruv tizimlarida ko'rinish.

Meta teglar

head bo'limi

Qidiruv natijasi

Asosiy meta teglar


<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Qabul 2026 | 1-maktab</title>
  <meta name="description" content="1-maktabga qabul: hujjatlar, muddatlar va ariza formasi.">
</head>

title va description har sahifada har xil bo'lsin. Barcha sahifaga bir xil matn yozish — keng tarqalgan xato.

Mini-test

Qidiruv natijasidagi sarlavha qaysi tegdan olinadi?

title qidiruv natijasida sarlavha bo'ladi.

Ulashish va robotlar

OG, canonical, robots

Robot yo'li

OG, canonical, robots


<link rel="canonical" href="/qabul">
<meta property="og:title" content="Qabul 2026">
<meta property="og:description" content="Hujjatlar va muddatlar.">
<meta property="og:image" content="https://maktab.uz/qabul.jpg">
<meta name="robots" content="index, follow">

noindex yozilgan sahifa qidiruvda chiqmaydi. Uni bosh sahifaga tasodifan qo'yib yubormang.

Mini-test

Ulashilgan havola kartochkasini nima boshqaradi?

og: teglari kartochka matni va rasmini beradi.

Meta yo'q va bor

Meta teglarsiz

title yo'q, mobilda mayda, ulashilganda kartochka yo'q

Meta teglar bilan

Aniq title va description, viewport, Open Graph kartochka

Bir necha qator head kodi sahifani topiladigan va qulay qiladi.

Atamalar. Bosing

SEO

bosing

Qidiruvda yaxshi topilish

meta description

bosing

Natijadagi qisqa tavsif

canonical

bosing

Asosiy manzilni ko'rsatadi

sitemap

bosing

Sahifalar ro'yxati fayli

Sahifani SEO ga tayyorlash

1. Tuzilma

Bitta h1, sarlavhalar va alt ni tekshiring.

2. Meta

title, description, viewport ni yozing.

3. Tekshiruv

Lighthouse SEO hisobotini oling.

Asosiy meta teglar

Teg	Vazifasi	Tavsiya
`charset`	belgilar kodlashi	UTF-8
`viewport`	mobil moslik	width=device-width
`title`	sarlavha	~60 belgigacha
`description`	qisqa tavsif	~150–160 belgi
`lang`	sahifa tili	`uz`

Pastga bosing: tekshirish

SEO tekshiruvi

Sahifani oching, DevTools > Lighthouse.
Faqat SEO ni tanlab, hisobotni oling.
Kamida 2 ta tavsiyani bajarib, qayta tekshiring.

head ni to'ldirish


<head>
  <title>Sahifa</title>
</head>

head ni to'ldirish


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Qabul 2026 | 1-maktab</title>
  <meta name="description" content="Qabul qoidalari.">
</head>

SEO raqamlarda

belgigacha tavsiya etiladigan title

belgigacha tavsiya etiladigan tavsif

ta asosiy omil: kontent, tuzilma, texnik

Belgi chegaralari taxminiy tavsiya.

Amaliy topshiriq 20 daqiqa

Osontitle va description: Maktab bosh sahifasi uchun title va description yozing.

O'rtahead ni to'ldiring: head ga charset, viewport, title, description qo'shing va html ga lang="uz" yozing.

QiyinMaktab sayti uchun SEO: 3 sahifa (bosh, qabul, aloqa) uchun takrorlanmas title/description, Open Graph va canonical yozing; Lighthouse SEO hisobotini oling.

Bonusnoindex: noindex qachon kerak? Misol keltiring.

Dars xulosasi

SEO

Kontent, tuzilma va texnik tomon.

Meta teglar

charset, viewport, title, description, lang.

Ulashish va robotlar

Open Graph, canonical, robots, sitemap.

Uyga vazifa: meta teglar va SEO tahlili.

Keyingi dars: CSS3 selektorlari va Box Model

selektor, kaskad, box model

6-hafta · 16-dars