Open Graph meta tag
Та хуудсынхаа холбоосыг Facebook, Twitter, Telegram, WhatsApp-д хуваалцахад зураг, гарчиг, тайлбар хэрхэн харагддагийг тохируулж байсан уу? Энэ бол Open Graph protocol-ийн хийдэг зүйл юм.
Open Graph гэж юу вэ?
Open Graph (OG) нь Facebook-ийн 2010 онд гаргасан стандарт бөгөөд өнөөдөр бүх нийгмийн сүлжээ ашигладаг. <head> доторх <meta> tag-уудаар тодорхойлно.
Үндсэн OG tag-ууд
<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 URLog: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 тэдгээрийг ч ашиглах боловч тусгайлан тохируулбал илүү сайн:
<!-- 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 хуудасны бүтэн жишээ
<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, гар утасны нүүр дэлгэцэнд хуудсын дүрс хэрхэн тохируулах талаар үзнэ.