HTML / Meta tag, title, charset

Meta tag, title, charset

<head> хэсэг нь хэрэглэгчид шууд харагдахгүй боловч хуудасны ажиллагаа, хайлтын системд олдох байдал, нийгмийн сүлжээнд хуваалцагдах байдлыг шийддэг. Энэ хичээлд <head>-ийн гол агуулгуудыг үзнэ.

<title> — хуудасны гарчиг

html
<head>
  <title>HTML сургалт — ulaanbaatar.app</title>
</head>

<title> нь:

  • Хөтчийн tab дээр харагдана
  • Bookmark хийхэд нэр болно
  • Google хайлтын үр дүнд том цэнхэр холбоос болно
  • Screen reader хуудас нээхэд эхлээд уншиж өгдөг

SEO-д нөлөөлөх байдал

html
<!-- МУУГИЙН МУУ — хэтэрхий ерөнхий -->
<title>Нүүр хуудас</title>

<!-- МУУГИЙН МУУ — хэт урт (60 тэмдэгтээс хэтрэхгүй байх) -->
<title>Монгол хэлний вэб программчлалын үнэгүй онлайн сургалтын платформ ulaanbaatar.app дээр HTML CSS JavaScript React Next.js Python сурах</title>

<!-- ЗӨВ — тодорхой, товч, keyword агуулсан -->
<title>HTML сургалт — Монгол хэлээр | ulaanbaatar.app</title>

<!-- Хуудас бүрт өвөрмөц байх -->
<title>CSS Grid дэлгэрэнгүй — HTML/CSS | ulaanbaatar.app</title>

Зөвлөмж: 50–60 тэмдэгт. Хамгийн чухал keyword эхэнд. Сайтын нэр төгсгөлд.

charset — тэмдэгтийн кодчилол

html
<meta charset="UTF-8" />

UTF-8 нь дэлхийн бүх хэлийг — Кирилл, Хятад, Арабаас эхлээд emoji хүртэл — нэг стандартаар хадгалдаг. Энэ мөргүй:

html
<!-- charset байхгүй — Монгол үсэг иймэрхүү харагдана: -->
<!-- Монгол -->

<head>-ийн хамгийн эхэнд, <title>-ийн өмнө бичнэ — хөтөч гарчгийг унших үедээ аль encoding ашиглахаа мэдэх ёстой.

viewport — гар утасны тохируулга

html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Энэ мөргүй гар утсанд хуудас томоор харагдан, хэрэглэгч zoom хийх шаардлагатай болно.

  • width=device-width — дэлгэцийн бодит өргөнийг ашиглана
  • initial-scale=1.0 — анхны томруулалтыг 1x байлгана

Responsive дизайн хийхэд энэ meta tag заавал байх ёстой.

description — хайлтын дэд тайлбар

html
<meta
  name="description"
  content="ulaanbaatar.app — HTML, CSS, JavaScript, Python сургалт Монгол хэлээр. Үнэгүй, практик, хэн ч эхлэж болно."
/>

Google хайлтын үр дүнд гарчгийн доор харагдах дэд тайлбар. Хэрэглэгч энэ текстийг уншаад хуудас руу орох эсэхээ шийднэ.

  • 150–160 тэмдэгт хязгаар
  • Хуудас бүрт өвөрмөц байх
  • Keyword оруулах боловч байгалийн монгол өгүүлбэр байна
  • Google заримдаа энэ утгыг үл тооцон хуудсаас өөрөө дэд тайлбар үүсгэдэг

keywords — хоцрогдсон

html
<!-- Одоо хэрэглэгддэггүй — Google 2009 оноос хойш тооцдоггүй -->
<meta name="keywords" content="html, css, javascript, сургалт" />

1990-ээд онд SEO-д ашиглагддаг байсан. Хэт их spam болсон тул Google болон бусад хайлтын систем 2009-2011 оноос хойш үл тоодог болсон. Бичих шаардлагагүй.

robots — хайлтын системийн зөвшөөрөл

html
<!-- Индексэлж, холбоосыг дагана (default) -->
<meta name="robots" content="index, follow" />

<!-- Индексэлэхгүй (хайлтад гарахгүй) -->
<meta name="robots" content="noindex" />

<!-- Холбоосыг дагахгүй -->
<meta name="robots" content="nofollow" />

<!-- Хоёуланг хориглох -->
<meta name="robots" content="noindex, nofollow" />

Нэвтрэх хуудас, нууц хэсэг, хуулбар агуулгад noindex ашиглана.

Бүрэн <head> жишээ

html
<!DOCTYPE html>
<html lang="mn">
  <head>
    <!-- 1. Charset эхэлж -->
    <meta charset="UTF-8" />

    <!-- 2. Viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 3. Гарчиг -->
    <title>HTML сургалт — Монгол хэлээр | ulaanbaatar.app</title>

    <!-- 4. Тайлбар -->
    <meta
      name="description"
      content="HTML-ийн үндсээс advanced хүртэл монгол хэлээр. Үнэгүй онлайн хичээлүүд."
    />

    <!-- 5. Robots (default бол заахгүй ч болно) -->
    <meta name="robots" content="index, follow" />

    <!-- 6. CSS холбох (дараагийн сургалтаас) -->
    <!-- <link rel="stylesheet" href="/styles.css" /> -->
  </head>
  <body>
    ...
  </body>
</html>

Хурдан лавлах хүснэгт

| Meta tag | Зорилго | Чухлын зэрэг | |----------|---------|--------------| | charset="UTF-8" | Кирилл зөв харуулах | Заавал | | viewport | Гар утсанд зөв харагдах | Заавал | | <title> | Хайлт + tab гарчиг | Заавал | | description | Хайлтын дэд тайлбар | Чухал | | robots | Хайлтын системийн зөвшөөрөл | Шаардлагатай үед | | keywords | — | Ашиглахгүй |

Дараагийн хичээлд:

<video> ба <audio> элементүүд ашиглан хуудсанд медиа файл суулгах талаар үзнэ. controls, autoplay, loop, muted, poster зэрэг attribute-уудыг тайлбарлана.

← Өмнөх хичээлHTML attribute-уудДараах хичээл →Video ба audio