HTML / SEO үндэс

SEO үндэс

SEO (Search Engine Optimization) бол хайлтын системүүд (Google, Bing гэх мэт) таны хуудсыг хайлтын үр дүнд өндөр байрлалд харуулахын тулд хуудсаа оновчлох практик юм. HTML-ийн зөв бичиц нь SEO-ийн суурь юм.

<title> tag

Хайлтын үр дүнд томоор харагддаг гарчиг. Хөтчийн tab-д ч харагдана.

html
<head>
  <!-- Зөв: хуудас бүр өвөрмөц, тодорхой title-тэй -->
  <title>HTML курс — Хичээл 1: HTML гэж юу вэ? | Ulaanbaatar.app</title>
</head>

Зөвлөмж:

  • 50–60 тэмдэгтийн урттай байна (илүү урт бол Google таслана)
  • Хуудас бүр өвөрмөц title-тэй байна
  • Хамгийн чухал түлхүүр үг эхэнд байна
  • Сайтын нэрийг адилтгал (| эсвэл —) ашиглан нэмж болно

Meta description

Хайлтын үр дүнд title-ийн доор харагдах товч тайлбар:

html
<head>
  <meta
    name="description"
    content="HTML курсын эхний хичээлд HTML гэж юу болох, хэрхэн ажилладгийг Монгол хэлээр тайлбарлана. Эхлэгчдэд зориулсан безплатн сургалт."
  />
</head>

Зөвлөмж:

  • 150–160 тэмдэгтийн урттай байна
  • Хуудасны агуулгыг үнэн зөвөөр дүрслэнэ
  • Хэрэглэгчийг дарж орохыг уриалах үг ашиглаж болно
  • Google заримдаа description-г өөрөө сонгодог ч заасан нь дээр

Heading шатлал

Google хуудасны бүтцийг heading-ийг ашиглан ойлгодог. Нэг <h1> хуудсанд нэг удаа байна, дараа нь шатлалаар буурна:

html
<h1>HTML курс</h1>               <!-- Хуудасны гол сэдэв — нэг удаа -->
  <h2>Суурь ойлголтууд</h2>
    <h3>Tag гэж юу вэ?</h3>
    <h3>Attribute гэж юу вэ?</h3>
  <h2>Практик жишээнүүд</h2>
    <h3>Анхны HTML хуудас</h3>

<h2> алгасаад шууд <h4> ашиглахаас зайлсхийнэ — энэ нь SEO болон accessibility хоёуланд нь муугаар нөлөөлнө.

Alt текст ба зураг

Google зурагнуудыг alt attribute-аар ойлгодог. Зөв бичсэн alt нь Google Images хайлтад харагдах боломжийг нэмэгдүүлнэ:

html
<!-- Зөв: тайлбарлагдсан alt -->
<img
  src="html-structure.png"
  alt="HTML баримт бичгийн бүтцийг харуулсан диаграм"
/>

<!-- Буруу: хоосон эсвэл хэт ерөнхий -->
<img src="img1.png" alt="" />
<img src="img1.png" alt="зураг" />

Semantic HTML ба SEO

Google semantic элементүүдийг ашиглан хуудасны бүтцийг ойлгодог:

html
<header>
  <nav><!-- Навигацийн холбоосууд --></nav>
</header>

<main>
  <article>
    <h1>Хичээлийн гарчиг</h1>
    <p>Үндсэн агуулга...</p>
  </article>
</main>

<footer>
  <p>© 2024 Ulaanbaatar.app</p>
</footer>

<div>-ийн оронд <main>, <article>, <nav> гэх мэт semantic элементүүд ашиглах нь Google-д хуудасны аль хэсэг чухал агуулга болохыг мэдүүлнэ.

Canonical URL

Нэг агуулга өөр өөр URL-д байрлах үед Google аль нь "жинхэнэ" болохыг мэдэхгүй болдог. canonical meta нь үүнийг шийдэнэ:

html
<head>
  <!-- Энэ хуудасны үндсэн URL -->
  <link rel="canonical" href="https://www.ulaanbaatar.app/courses/html/01-intro" />
</head>

Жишээ нь ?utm_source=newsletter параметртэй URL болон параметргүй URL хоёул нэг агуулгатай байвал canonical нь Google-д "хоёул ижил хуудас, энийг нь тооцоорой" гэж хэлнэ.

Robots meta tag

Хайлтын системд хуудсыг индекслэх эсэхийг заана:

html
<!-- Энгийн нийтийн хуудас — индекслэх зөвшөөрнө -->
<meta name="robots" content="index, follow" />

<!-- Нэвтрэх шаардлагатай хуудас — индекслэхгүй -->
<meta name="robots" content="noindex, nofollow" />

Ихэнх хуудсанд тусгайлан тохируулах шаардлагагүй — хайлтын систем default-оор индексэлнэ.

Нийт жишээ

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

    <title>HTML гэж юу вэ? | Ulaanbaatar.app</title>
    <meta
      name="description"
      content="HTML-ийн үндсийг Монгол хэлээр сур. Tag, attribute, хуудасны бүтэц зэргийг практик жишээтэйгээр тайлбарлана."
    />

    <link rel="canonical" href="https://www.ulaanbaatar.app/courses/html/01-intro" />
  </head>
  <body>
    <main>
      <article>
        <h1>HTML гэж юу вэ?</h1>
        <p>HTML бол вэб хуудасны бүтцийг тодорхойлдоог тэмдэглэгээний хэл юм...</p>
      </article>
    </main>
  </body>
</html>

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

Open Graph meta tag-уудыг судлана — Facebook, Twitter, Telegram зэрэг нийгмийн сүлжээнд хуудсаа хуваалцахад зураг, гарчиг хэрхэн харагддагийг тохируулах талаар үзнэ.

← Өмнөх хичээлAccessibility үндэс (aria)Дараах хичээл →Open Graph meta tag