IlmHamroh
JavaScript Full-stack/4-qism. HTML65/86-dars15 daqiqa
Mundarija (42)

Open Graph: ijtimoiy tarmoq kartalari va Telegram'dagi havola ko'rinishi

Qisqacha: Havolani Telegram, Facebook yoki X'da ulashganingizda chiqadigan sarlavha, matn va rasm sahifaning head qismidagi Open Graph teglaridan olinadi: og:title, og:description, og:image, og:url. Rasm 1200×630 piksel va to'liq (absolyut) manzil bilan beriladi. Telegram ko'rinishni o'z serverida eslab qoladi, uni yangilash uchun havolani @WebpageBot'ga yuborasiz.

Bu darsda

  • Havola ulashilganda karta qayerdan paydo bo'lishini tushuntira olasiz.
  • «Bahor» sayti uchun to'liq Open Graph va twitter:card teglarini yozasiz.
  • Karta rasmini to'g'ri o'lcham, hajm va manzil bilan tayyorlaysiz.
  • Telegram karta ko'rinishini qanday qurishini va eski kartani qanday yangilashni bilasiz.
  • Kartani Facebook Sharing Debugger va boshqa vositalarda tekshira olasiz.

Oldin bilishingiz kerak: head anatomiyasi va viewport, Qidiruv tizimlari uchun meta teglar.

1. Nega bu kerak?

O'tgan darsda «Bahor» saytining head qismiga description va canonical qo'shdik. Endi Google sahifani to'g'ri tushunadi. Lekin mehmonlarning ko'pchiligi saytga Google'dan emas, Telegram'dan keladi.

Choyxona oshpazi Rustam aka sayt havolasini oilaviy guruhga va choyxona kanaliga tashladi. Guruhda shunday ko'rinish chiqdi:

text
https://example.com/

Faqat quruq havola. Na rasm, na tavsif. Hech kim bosmadi.

Qo'shni kafening havolasi esa boshqacha chiqadi: tepasida kafe nomi, qalin sarlavha, ikki qator tavsif va katta, ishtaha ochadigan osh surati. Uni hamma bosadi.

Farq dizaynda emas. Farq — head ichidagi 6–8 qator HTML'da. Bu qatorlar Open Graph deb ataladi. Bugun ularni «Bahor» saytiga qo'shamiz.

2. Karta qanday paydo bo'ladi

2.1 Havolani kim "o'qiydi"

Siz Telegram'da havola yozasiz. Xabarni yuborishdan oldinoq Telegram serveri o'sha manzilga o'zi kirib chiqadi. U sahifani xuddi brauzer kabi so'raydi, lekin ekranga chizmaydi. Faqat head ichidan kerakli teglarni o'qiydi va karta yasaydi.

Bu ishni qiladigan dasturni krauler (crawler) deyiladi — saytlarni aylanib, ma'lumot yig'uvchi robot. Telegram'ning kraulerini server jurnallarida TelegramBot (like TwitterBot) nomi bilan ko'rasiz. Facebook'niki — facebookexternalhit.

Hayotdan o'xshatish: kitob do'koni. Sotuvchi har bir kitobni oxirigacha o'qib chiqmaydi. U muqovaga qaraydi: nomi, qisqa izoh, rasm. Open Graph — sahifangizning "muqovasi".

2.2 Open Graph nima

Open Graph — 2010-yilda Facebook taklif qilgan kelishuv. Unga ko'ra sahifa o'zi haqida "muqova ma'lumotini" maxsus meta teglarda beradi. Keyin uni Telegram, WhatsApp, LinkedIn, Discord, Slack va boshqalar ham qabul qildi. Bugun u amalda umumiy standart. Rasmiy tavsifi — ogp.me saytida.

Har bir Open Graph tegi shunday ko'rinadi:

html
<meta property="og:title" content="Choyxona «Bahor»">

Ikki narsaga e'tibor bering:

  • name emas, property atributi. Bu Open Graph'ning o'z qoidasi. description kabi oddiy meta teglarda name ishlatgan edik.
  • Nom og: bilan boshlanadi. Bu "Open Graph'ga tegishli" degan belgi.

Tekshirib ko'ring: Telegram karta yasash uchun sahifangizdagi JavaScript'ni ishga tushiradimi yoki faqat HTML'ni o'qiydimi?

Javob

Faqat serverdan kelgan HTML'ni o'qiydi. Krauler sahifani ekranga chizmaydi va JavaScript'ni bajarmaydi. Shuning uchun Open Graph teglari HTML faylning o'zida yozilgan bo'lishi kerak. Keyinroq JavaScript bilan qo'shilgan teglarni Telegram ko'rmaydi.

3. To'rt asosiy teg

ogp.me to'rtta tegni majburiy deb hisoblaydi. «Bahor» bosh sahifasi uchun:

html
<meta property="og:title"
      content="Choyxona «Bahor» — Chilonzor, Toshkent">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:image"
      content="https://example.com/assets/images/og-bahor.jpg">

Har birini ko'ramiz:

Teg Vazifasi «Bahor»da
og:title Kartadagi qalin sarlavha Choyxona nomi va shiori
og:type Sahifa turi website
og:url Sahifaning asosiy manzili Bosh sahifa URL'i
og:image Kartadagi rasm Osh surati

3.1 og:title

Odatda title bilan bir xil yoki biroz qisqaroq. Qidiruv meta teglari darsidagi qoida shu yerda ham ishlaydi: sarlavha 60 belgidan oshsa, kesilib qolishi mumkin. og:title bo'lmasa, ko'p platformalar title ga qaytadi.

3.2 og:type

Ikki qiymat ko'p ishlatiladi:

  • website — oddiy sahifa: bosh sahifa, menyu, aloqa.
  • article — maqola yoki yangilik: «Bahor» blogidagi post.

article bo'lsa, qo'shimcha teglar ham yozish mumkin — masalan, e'lon qilingan sana:

html
<meta property="og:type" content="article">
<meta property="article:published_time"
      content="2026-09-27T09:00:00+05:00">

Sana time tegidagi datetime kabi mashina formatida yoziladi. +05:00 — Toshkent vaqt mintaqasi.

3.3 og:url

Sahifaning asosiy, "rasmiy" manzili. U canonical bilan bir xil bo'lishi kerak. Nega kerak? Bir sahifaga turli manzillar bilan kelish mumkin: https://example.com/?utm_source=telegram yoki https://example.com/index.html. og:url platformaga "bularning hammasi bitta sahifa" deydi. Shunda layklar va ulashishlar soni bir joyga yig'iladi.

3.4 og:image

Kartaning eng muhim qismi — rasm. Unga quyida alohida bo'lim ajratamiz. Hozircha asosiy qoida: manzil to'liq (absolyut) bo'lishi shart, https:// bilan boshlanib.

Bo'sh joyni to'ldiring: Open Graph teglarida name o'rniga qaysi atribut yoziladi?

4. Karta rasmi: o'lcham, hajm, manzil

4.1 1200×630 — oltin o'lcham

Eng keng tarqalgan tavsiya: 1200×630 piksel. Bu taxminan 1,91:1 nisbat — eni bo'yidan deyarli ikki barobar katta. Facebook, LinkedIn, Telegram va X'ning katta kartasi shu nisbatga moslangan.

Talab Tavsiya Nega
O'lcham 1200×630 Katta karta uchun aniq nisbat
Eng kichik 600×315 Kichikrog'i xira yoki umuman chiqmaydi
Format JPEG yoki PNG Hamma platforma o'qiydi
Hajm 300 KB atrofida WhatsApp katta rasmni ko'rsatmay qo'yishi mumkin

Telegram va Facebook 5–8 MB gacha rasmni qabul qiladi. Lekin og'ir rasm sekin yuklanadi, ba'zi platformalar esa uni tashlab ketadi. Rasm formatlari darsidagi usul bilan siqing: foto uchun sifati 80% atrofidagi JPEG yetarli. WebP'ni ba'zi ilovalar hali ko'rsatmaydi, shuning uchun karta rasmi uchun JPEG xavfsizroq.

4.2 Muhim narsani o'rtaga qo'ying

Ba'zi joylarda karta rasmi kvadrat kichik rasmcha bo'lib chiqadi: Telegram'ning kichik ko'rinishida, WhatsApp'da. Bunda chetlar kesiladi. Shuning uchun choyxona nomi yoki logotipni rasmning o'rtasiga qo'ying. Chetga yozilgan matn kesilib ketadi.

4.3 Nega manzil to'liq bo'lishi shart

Havola asoslari darsida nisbiy yo'lni o'rgandik: assets/images/og-bahor.jpg. Brauzer uni joriy sahifa manziliga qarab to'ldiradi. Krauler esa buni ko'pincha qilmaydi. U content dagi matnni tayyor manzil deb oladi va rasmni topolmaydi.

html
<!-- ❌ nisbiy yo'l: karta rasmsiz chiqadi -->
<meta property="og:image" content="/assets/images/og-bahor.jpg">
html
<!-- ✅ to'liq manzil -->
<meta property="og:image"
      content="https://example.com/assets/images/og-bahor.jpg">

E'tibor bering: validator birinchi qatorni xato demaydi. HTML nuqtai nazaridan u to'g'ri. Xatoni faqat karta rasmsiz chiqqanda sezasiz.

4.4 Rasm haqida qo'shimcha teglar

html
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt"
      content="Qozonda bug'lanib turgan Toshkent oshi">
  • width va height — rasmni yuklamasdan o'lchamini bilish uchun. Facebook ularsiz birinchi ulashishda rasmni ko'rsatmay qolishi mumkin: u rasmni fonda yuklab, o'lchagunicha kutadi.
  • og:image:alt — alt matn ning kartadagi varianti. Ekran o'quvchi foydalanuvchilar uchun.

Tekshirib ko'ring: Dizayner Malika karta rasmini 800×800 kvadrat qilib chizdi. Qanday muammo bo'ladi?

Javob

Katta kartalar 1,91:1 nisbatda (masalan 1200×630). Kvadrat rasm yuqori va pastdan kesiladi yoki platforma uni kichik rasmcha qilib ko'rsatadi. Rasmni 1200×630 qilib, muhim qismini o'rtaga joylash kerak.

5. Qo'shimcha teglar: tavsif, sayt nomi, til

html
<meta property="og:description"
      content="Chilonzordagi choyxona: Toshkent oshi 35 000 so'm,
               lag'mon va kabob. Har kuni 7:00–23:00.">
<meta property="og:site_name" content="Choyxona «Bahor»">
<meta property="og:locale" content="uz_UZ">
  • og:description — kartadagi 1–2 qator matn. Odatda meta description bilan bir xil. Bo'lmasa, ko'p platformalar description ni oladi.
  • og:site_name — butun saytning nomi. Telegram uni kartaning eng tepasida, rangli harflar bilan ko'rsatadi.
  • og:locale — kontent tili. Format til_DAVLAT, pastki chiziq bilan: uz_UZ, ru_RU. lang atributidagi uz dan farqli — adashtirmang.

Sayt ikki tilda bo'lsa, qolgan tilni og:locale:alternate bilan aytasiz: content="ru_RU".

6. twitter:card: katta yoki kichik karta

6.1 X'ning o'z teglari

X (sobiq Twitter) Open Graph'ni o'qiydi, lekin uning o'z teglari ham bor. Ular property emas, oddiy name bilan yoziladi:

html
<meta name="twitter:card" content="summary_large_image">

twitter:card karta turini aytadi:

Qiymat Ko'rinish
summary Kichik kvadrat rasmcha, yonida matn
summary_large_image Katta, keng rasm, tagida matn

twitter:title, twitter:description, twitter:image ham bor. Lekin ular bo'lmasa, X og: teglarini oladi. Shuning uchun ularni takrorlash shart emas — faqat twitter:card ni yozing. Kompaniyaning X akkaunti bo'lsa, twitter:site qo'shiladi: content="@sizning_akkaunt".

6.2 Telegram ham shu tegga qaraydi

Bu mahalliy dasturchilar uchun muhim detal. Telegram katta yoki kichik rasm tanlashda twitter:card ga ham qaraydi. Dasturchilar tajribasiga ko'ra, summary_large_image bo'lmasa, Telegram ko'pincha rasmni kichik rasmcha qilib, matn yoniga qo'yadi. Telegram buni rasmiy hujjatda yozmagan. Shuning uchun har doim o'zingiz sinab ko'ring — qanday qilib, keyingi bo'limda.

2023-yil oxiridan Telegram'da yuboruvchi ham ko'rinishni o'zgartira oladi. Xabar yozish oynasida karta ustiga bosib, rasmni kattalashtirish yoki kichraytirish, kartani xabar ustiga yoki tagiga ko'chirish mumkin. Lekin bu imkoniyat faqat sahifada yaxshi rasm bo'lsa ishlaydi.

Maslahat: O'zbekistonda saytga kelayotgan ijtimoiy trafikning katta qismi Telegram'dan keladi. Karta chiroyli chiqishi — bepul reklama. Har yangi sahifani chiqarganda uni avval o'zingizga, "Saved Messages" ga yuborib ko'ring.

7. Telegram karta ko'rinishini qanday quradi

7.1 Kartaning qismlari

Guruhda «Bahor» havolasi endi shunday chiqadi:

text
┃ Choyxona «Bahor»                   ← og:site_name
┃ Choyxona «Bahor» — Chilonzor,      ← og:title
┃ Toshkent
┃ Chilonzordagi choyxona: Toshkent   ← og:description
┃ oshi 35 000 so'm, lag'mon va ...
┃ ┌──────────────────────────────┐
┃ │   katta rasm (1200×630)      │   ← og:image
┃ └──────────────────────────────┘

Biror teg bo'lmasa, Telegram zaxiraga o'tadi: sarlavha uchun title, matn uchun meta description. Rasm bo'lmasa — karta rasmsiz chiqadi.

7.2 Telegram kartani eslab qoladi

Telegram havolani bir marta o'qiydi va natijani o'z serverida saqlaydi — kesh qiladi. HTTP va kesh darsidagi g'oya: bir xil narsani qayta-qayta yuklamaslik.

Muammo shu yerda boshlanadi. Rustam aka havolani teglar qo'shilishidan oldin bir marta yuborgan edi. Telegram o'shanda "rasmsiz, quruq" kartani eslab qoldi. Endi teglarni qo'shdingiz, lekin Telegram hamon eski kartani ko'rsatadi. Bu kesh ancha uzoq saqlanadi — bir necha kun yoki undan ham ko'p.

7.3 @WebpageBot bilan yangilash

Telegram'ning rasmiy boti — @WebpageBot — keshni yangilaydi:

  1. Telegram'da @WebpageBot ni qidirib, oching va Start bosing.
  2. Sahifa manzilini yuboring: https://example.com/. Bir xabarda 10 tagacha havola yuborsa bo'ladi.
  3. Bot sahifani qaytadan o'qiydi va yangi kartani ko'rsatadi.

Shundan keyin havolani yangidan yuborsangiz, yangi karta chiqadi.

Diqqat: Allaqachon yuborilgan xabarlardagi kartalar o'zgarmaydi. Ular yuborilgan paytdagi holatda qoladi. Shuning uchun teglarni havolani kanalga tashlashdan oldin tekshiring.

Yana bir tuzoq. Sahifada bir paytlar <meta name="robots" content="noindex"> turgan bo'lsa, Telegram buni ham eslab qolishi mumkin. Tegni olib tashlagach, @WebpageBot orqali yangilashni unutmang.

Tekshirib ko'ring: Siz karta rasmini almashtirdingiz, fayl nomi o'sha-o'sha: og-bahor.jpg. @WebpageBot'da yangiladingiz, lekin rasm eski. Nima bo'lishi mumkin?

Javob

Rasmning o'zi ham keshlanadi — manzil o'zgarmagani uchun platforma eski rasmni ishlatishi mumkin. Eng ishonchli yo'l — yangi rasmga yangi nom berish: og-bahor-2.jpg, va og:image ni yangilash. Shunda krauler buni boshqa fayl deb, yangidan yuklaydi.

8. Tekshirish vositalari

Kartani sinash uchun sahifa internetda bo'lishi kerak. Telegram serveri sizning http://127.0.0.1:5500 ga kira olmaydi — bu faqat sizning kompyuteringiz ichidagi manzil (IP va port darsini eslang). Saytni internetga Birinchi deploy darsida chiqaramiz. Ungacha teglarni DevTools'da tekshirasiz.

Vosita Nima qiladi
@WebpageBot Telegram kartasini ko'rsatadi va keshni yangilaydi
Facebook Sharing Debugger Facebook ko'rgan teglarni, xatolarni ko'rsatadi, keshni yangilaydi
LinkedIn Post Inspector LinkedIn kartasi va keshni yangilash
opengraph.xyz, metatags.io Bir nechta platformadagi ko'rinishni bir sahifada ko'rsatadi

8.1 Facebook Sharing Debugger

Manzili: developers.facebook.com/tools/debug. Facebook hisobi bilan kiriladi. Sahifa manzilini yozib, Debug bosasiz. Vosita uchta narsani ko'rsatadi:

  • Facebook qaysi teglarni topdi va ularning qiymati.
  • Ogohlantirishlar. Masalan: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags. — "og:image ni aniq yozish kerak, hatto uni boshqa teglardan taxmin qilish mumkin bo'lsa ham".
  • Scrape Again tugmasi — Facebook keshini yangilaydi.

Facebook, Instagram va Messenger bitta kompaniyaniki. Shu sababli bu vosita ular uchun umumiy.

8.2 WhatsApp va X

WhatsApp va X'da keshni yangilaydigan rasmiy vosita yo'q. X'ning eski "Card Validator" ko'rinish qismi 2022-yilda olib tashlangan — endi kartani post yozish oynasida ko'rasiz. WhatsApp uchun odatiy usul — manzil oxiriga ?v=2 qo'shish. Platforma buni yangi manzil deb, qaytadan o'qiydi. og:url va canonical esa baribir asosiy manzilni ko'rsatib turadi.

8.3 Localhost'da: DevTools

Deploydan oldin F12 → Elements panelida head ni oching va og: teglar joyidaligini ko'ring. Ctrl + F bilan og:image ni qidiring. Manzil https:// bilan boshlanayotganini tekshiring. Manzilni yangi yorliqda ochib, rasm haqiqatan borligini ko'ring.

9. «Bahor» sayti: yangi head

O'tgan darsdagi head ga Open Graph blokini qo'shamiz. Tartib bo'yicha: avval qidiruv tizimi uchun, keyin ijtimoiy tarmoqlar uchun.

html
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Choyxona «Bahor» — Chilonzor, Toshkent</title>
  <meta name="description"
        content="Chilonzordagi choyxona: Toshkent oshi 35 000 so'm,
                 lag'mon va kabob. Har kuni 7:00–23:00.">
  <link rel="canonical" href="https://example.com/">

  <!-- Ijtimoiy tarmoqlar uchun karta -->
  <meta property="og:site_name" content="Choyxona «Bahor»">
  <meta property="og:type" content="website">
  <meta property="og:locale" content="uz_UZ">
  <meta property="og:url" content="https://example.com/">
  <meta property="og:title"
        content="Choyxona «Bahor» — Chilonzor, Toshkent">
  <meta property="og:description"
        content="Chilonzordagi choyxona: Toshkent oshi 35 000 so'm,
                 lag'mon va kabob. Har kuni 7:00–23:00.">
  <meta property="og:image"
        content="https://example.com/assets/images/og-bahor.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt"
        content="Qozonda bug'lanib turgan Toshkent oshi">
  <meta name="twitter:card" content="summary_large_image">
</head>

Loyiha papkasiga assets/images/og-bahor.jpg faylini qo'shing — 1200×630 osh surati.

Har bir sahifaning o'z kartasi bo'ladi. Menyu sahifasida og:title — "Menyu — Choyxona «Bahor»", og:url — menyu manzili, rasm — taomlar surati. Blog postida esa og:type — article.

Maslahat: description va og:description bir xil matn. Ikki joyda takrorlash noqulay tuyulishi mumkin, lekin oddiy HTML saytda boshqa yo'l yo'q. Keyinroq Next.js kabi freymvorklarda (kursda alohida o'rganamiz) bu teglar bitta sozlamadan avtomatik yaratiladi.

10. Ko'p uchraydigan xatolar

10.1 Nisbiy rasm manzili

content="/assets/images/og-bahor.jpg" — karta rasmsiz chiqadi. Tuzatish: har doim https:// bilan to'liq manzil.

10.2 property o'rniga name

html
<!-- ❌ -->
<meta name="og:title" content="Choyxona «Bahor»">

Validator buni xato demaydi — name ga istalgan qiymat yozish mumkin. Ba'zi platformalar buni kechiradi, ba'zilari yo'q. Tuzatish: og: teglarida — property, twitter: teglarida — name.

10.3 Localhost manzilini yuborish

http://127.0.0.1:5500/ ni Telegram'ga yuborsangiz, karta chiqmaydi. Bu xato emas: Telegram serveri sizning kompyuteringizga kira olmaydi. Kartani faqat internetdagi saytda sinash mumkin.

10.4 Teglarni JavaScript bilan qo'shish

Ba'zi saytlar sahifa ochilgach, teglarni JavaScript bilan qo'shadi. Brauzerda hammasi joyida ko'rinadi, Telegram'da esa karta bo'sh. Sabab — dars boshida ko'rdik: krauler JavaScript'ni bajarmaydi. Tuzatish: teglar serverdan kelgan HTML'da bo'lsin.

10.5 Tuzatdim, lekin Telegram'da eski karta

Kesh. Tuzatish: @WebpageBot'ga manzilni yuboring, keyin havolani yangidan tashlang.

10.6 Hamma sahifada bitta karta

Menyu, blog va aloqa sahifalarining hammasida bosh sahifaning og:title va og:url i turibdi. Blog postini ulashsangiz, karta "Choyxona «Bahor»" deydi, post nomini emas. Tuzatish: har sahifaga o'z sarlavhasi, manzili va imkon bo'lsa o'z rasmi.

11. Mashqlar

1-mashq (oson): Menyu sahifasi kartasi

«Bahor» saytining menyu/index.html sahifasi uchun Open Graph teglarini yozing. Sarlavha: "Menyu — Choyxona «Bahor»". Manzil: https://example.com/menyu/. Rasm: https://example.com/assets/images/og-menyu.jpg. Tavsif: "Osh, kabob, lag'mon va 12 xil choy — narxlari bilan." Katta karta chiqsin.

Yechim
html
<meta property="og:site_name" content="Choyxona «Bahor»">
<meta property="og:type" content="website">
<meta property="og:locale" content="uz_UZ">
<meta property="og:url" content="https://example.com/menyu/">
<meta property="og:title" content="Menyu — Choyxona «Bahor»">
<meta property="og:description"
      content="Osh, kabob, lag'mon va 12 xil choy — narxlari bilan.">
<meta property="og:image"
      content="https://example.com/assets/images/og-menyu.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

og:site_name va og:locale bosh sahifadagidek qoladi — sayt bitta. O'zgaradiganlari: sarlavha, manzil, tavsif va rasm. Rasm o'lchamini yozishni unutmang.

2-mashq (o'rta): Xatolarni toping

Bu blokda 4 ta xato bor. Toping va tuzating.

html
<!-- ❌ 4 ta xato bor -->
<meta name="og:title" content="Osh bayrami — Choyxona «Bahor»">
<meta property="og:image" content="assets/images/osh-bayrami.jpg">
<meta property="og:locale" content="uz-UZ">
<meta property="twitter:card" content="large_image">
Yechim
html
<meta property="og:title"
      content="Osh bayrami — Choyxona «Bahor»">
<meta property="og:image"
      content="https://example.com/assets/images/osh-bayrami.jpg">
<meta property="og:locale" content="uz_UZ">
<meta name="twitter:card" content="summary_large_image">
  1. og:title — name emas, property.
  2. Rasm manzili nisbiy edi — to'liq manzil kerak.
  3. og:locale da chiziqcha emas, pastki chiziq: uz_UZ.
  4. twitter:card — aksincha, name bilan yoziladi. Qiymati esa summary_large_image, large_image degan qiymat yo'q.

3-mashq (qiyin): Blog posti va Telegram

«Bahor» blogida "Toshkent oshining 3 siri" posti chiqdi. Manzili: https://example.com/blog/osh-sirlari. 2026-yil 27-sentabr, soat 9:00 da (Toshkent vaqti) e'lon qilingan.

  1. Post uchun to'liq Open Graph blokini yozing (turi — maqola).
  2. Rustam aka postni teglarsiz holatda kanalga allaqachon tashlagan edi. Endi nima qilish kerakligini qadamma-qadam yozing.
Yechim
html
<meta property="og:site_name" content="Choyxona «Bahor»">
<meta property="og:type" content="article">
<meta property="og:locale" content="uz_UZ">
<meta property="og:url"
      content="https://example.com/blog/osh-sirlari">
<meta property="og:title" content="Toshkent oshining 3 siri">
<meta property="og:description"
      content="Oshpaz Rustam aka damlash sirlarini aytadi.">
<meta property="og:image"
      content="https://example.com/assets/images/og-osh-sirlari.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt"
      content="Katta qozonda zirvak tayyorlayotgan oshpaz">
<meta property="article:published_time"
      content="2026-09-27T09:00:00+05:00">
<meta name="twitter:card" content="summary_large_image">

Telegram uchun qadamlar:

  1. Teglar saytga yuklanganini tekshiring: sahifani oching, Ctrl + U bilan manba kodida og: teglarini toping.
  2. @WebpageBot'ga https://example.com/blog/osh-sirlari ni yuboring. Bot yangi kartani ko'rsatadi.
  3. Kanalda eski xabar o'zgarmaydi. Xohlasangiz, eski xabarni o'chirib, havolani yangidan joylang.

12. Real ishda

  • Marketing jamoasi har kampaniya uchun alohida karta rasmini buyurtma qiladi. Dasturchining vazifasi — to'g'ri teglar va to'g'ri o'lchamdagi fayl.
  • Onlayn do'konlarda har mahsulot sahifasi o'z kartasiga ega: mahsulot nomi, narxi, surati. Minglab sahifa uchun karta rasmlari dastur yordamida avtomatik yasaladi. Next.js'da buni SEO fayllari va OG rasmlar darsida qilamiz.
  • "Telegram'da rasm chiqmayapti" — O'zbekistondagi frontend dasturchiga eng ko'p keladigan shikoyatlardan biri. Tartibi: Ctrl + U → teglar bormi → manzil to'liqmi → rasm ochiladimi → @WebpageBot.
  • Intervyuda so'raladi: "Open Graph nima va nega kerak?". Javob: havola ulashilganda kartani boshqaradigan meta teglar; asosiylari og:title, og:description, og:image, og:url.

Xulosa

  • Havola kartasini platforma serveri sahifaning HTML'idan yasaydi va JavaScript'ni bajarmaydi.
  • Open Graph teglari property="og:..." bilan yoziladi; asosiylari — title, type, url, image, description, site_name.
  • Karta rasmi: 1200×630, JPEG yoki PNG, yengil, muhim qismi o'rtada, manzili to'liq https://....
  • twitter:card = summary_large_image — X'da ham, Telegram'da ham katta rasm uchun.
  • Telegram kartani keshlaydi: yangilash uchun @WebpageBot, eski xabarlar esa o'zgarmaydi.
  • Tekshirish: Facebook Sharing Debugger, LinkedIn Post Inspector, @WebpageBot va DevTools.

Keyingi dars: Favicon, ilova ikonkalari va web manifest — brauzer yorlig'idagi kichik ikonkadan telefon ekranidagi ilova belgisigacha.

Manbalar

  • The Open Graph protocol — ogp.me
  • X Developer: "Cards markup" — developer.x.com
  • Facebook for Developers: "Sharing Debugger" — developers.facebook.com/tools/debug
  • Telegram blog: "Replies 2.0, Adjustable Link Previews" — telegram.org/blog
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
Open Graph: ijtimoiy tarmoq kartalari va Telegram'dagi havola ko'rinishi — IlmHamroh