HTML / Open Graph meta tag

Open Graph meta tag

Та хуудсынхаа холбоосыг Facebook, Twitter, Telegram, WhatsApp-д хуваалцахад зураг, гарчиг, тайлбар хэрхэн харагддагийг тохируулж байсан уу? Энэ бол Open Graph protocol-ийн хийдэг зүйл юм.

Open Graph гэж юу вэ?

Open Graph (OG) нь Facebook-ийн 2010 онд гаргасан стандарт бөгөөд өнөөдөр бүх нийгмийн сүлжээ ашигладаг. <head> доторх <meta> tag-уудаар тодорхойлно.

Үндсэн OG tag-ууд

html
<head>
  <!-- Заавал байх ёстой дөрвөн tag -->
  <meta property="og:title" content="HTML гэж юу вэ? | Ulaanbaatar.app" />
  <meta
    property="og:description"
    content="HTML-ийн үндсийг Монгол хэлээр сур. Tag, attribute, хуудасны бүтцийг практик жишээтэйгээр тайлбарлана."
  />
  <meta
    property="og:image"
    content="https://www.ulaanbaatar.app/og/html-intro.png"
  />
  <meta
    property="og:url"
    content="https://www.ulaanbaatar.app/courses/html/01-intro"
  />

  <!-- Нэмэлт боловч зөвлөмжтэй -->
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Ulaanbaatar.app" />
  <meta property="og:locale" content="mn_MN" />
</head>

Attribute-уудын тайлбар:

  • og:title — хуваалцах үед харагдах гарчиг (хуудасны <title>-тай ижил эсвэл арай богино байж болно)
  • og:description — 2–4 өгүүлбэрийн тайлбар
  • og:image — хуваалцах картын зураг. Заавал бүтэн URL байна (харьцангуй зам ажиллахгүй)
  • og:url — хуудасны canonical URL
  • og:type — website, article, video.movie гэх мэт

Зургийн хэмжээ

| Платформ | Зөвлөмжтэй хэмжээ | Хамгийн бага | |----------|-------------------|--------------| | Facebook | 1200 × 630 px | 600 × 315 px | | Twitter | 1200 × 628 px | 300 × 157 px | | LinkedIn | 1200 × 627 px | — |

Бүх платформд тохирох нэг хэмжээ: 1200 × 630 px.

Twitter Card

Twitter өөрийн twitter: namespace-тэй. OG tag байвал Twitter тэдгээрийг ч ашиглах боловч тусгайлан тохируулбал илүү сайн:

html
<!-- Summary card — жижиг зураг, текст -->
<meta name="twitter:card" content="summary" />

<!-- Summary with large image — том зураг -->
<meta name="twitter:card" content="summary_large_image" />

<meta name="twitter:site" content="@ulaanbaatarapp" />
<meta name="twitter:title" content="HTML гэж юу вэ?" />
<meta
  name="twitter:description"
  content="HTML-ийн үндсийг Монгол хэлээр сур."
/>
<meta
  name="twitter:image"
  content="https://www.ulaanbaatar.app/og/html-intro.png"
/>

Article хуудасны бүтэн жишээ

html
<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-ийн үндсийг Монгол хэлээр сур."
  />
  <link
    rel="canonical"
    href="https://www.ulaanbaatar.app/courses/html/01-intro"
  />

  <!-- Open Graph -->
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Ulaanbaatar.app" />
  <meta property="og:title" content="HTML гэж юу вэ?" />
  <meta
    property="og:description"
    content="HTML-ийн үндсийг Монгол хэлээр сур."
  />
  <meta
    property="og:image"
    content="https://www.ulaanbaatar.app/og/html-intro.png"
  />
  <meta
    property="og:url"
    content="https://www.ulaanbaatar.app/courses/html/01-intro"
  />
  <meta property="og:locale" content="mn_MN" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="HTML гэж юу вэ?" />
  <meta
    name="twitter:description"
    content="HTML-ийн үндсийг Монгол хэлээр сур."
  />
  <meta
    name="twitter:image"
    content="https://www.ulaanbaatar.app/og/html-intro.png"
  />
</head>

Хэрхэн шалгах

OG tag-уудаа дараах хэрэгслүүдээр шалгаж болно:

  • Facebook Sharing Debugger — developers.facebook.com/tools/debug — URL оруулахад preview харуулна, cache цэвэрлэх боломжтой
  • Twitter Card Validator — cards-dev.twitter.com/validator
  • LinkedIn Post Inspector — linkedin.com/post-inspector
  • opengraph.xyz — нэг дор бүх платформын preview харах

Хуудсаа нийтлэхийн өмнө эдгээр хэрэгслээр шалгах нь заримдаа харагдахгүй зураг, буруу текстийг олоход тусалдаг.

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

Favicon болон Web App Manifest-ийг судлана — хөтчийн tab, гар утасны нүүр дэлгэцэнд хуудсын дүрс хэрхэн тохируулах талаар үзнэ.

← Өмнөх хичээлSEO үндэсДараах хичээл →Favicon ба manifest