Meta teglar: kam ma'lum, lekin foydali — referrer, format-detection va sayt tasdig'i

Qisqacha: Sahifa head ida description va Open Graph'dan tashqari bir nechta kichik, lekin foydali meta teglar bor. Masalan, referrer boshqa saytlarga qancha ma'lumot ketishini boshqaradi. Teg format-detection esa iPhone'ning oddiy raqamlarni telefon havolasiga aylantirishini to'xtatadi. Sayt sizniki ekanini google-site-verification kabi teglar tasdiqlaydi. Server sarlavhalarining o'rnini http-equiv bosadi, lekin refresh ni ishlatmagan ma'qul.

Bu darsda

• meta name va meta http-equiv farqini tushuntira olasiz.
• referrer bilan maxfiylikni boshqarasiz va unga qachon tegmaslik kerakligini bilasiz.
• iPhone'dagi "ko'k raqamlar" muammosini format-detection bilan hal qilasiz.
• Saytni Google Search Console va Yandex Webmaster'da tasdiqlash tegini qo'ya olasiz.
• Qaysi meta teglar eskirgan va nega ularni ko'chirmaslik kerakligini bilasiz.

Oldin bilishingiz kerak: Favicon, ilova ikonkalari va web manifest, Qidiruv tizimlari uchun meta teglar, Maxsus havolalar va rel qiymatlari.

1. Nega bu kerak?

«Bahor» saytining head qismi endi ancha to'la: qidiruv teglari, Open Graph, ikonkalar, manifest. Sayt tayyordek. Lekin bir hafta ichida uchta kichik shikoyat keldi.

• Oshpaz Rustam aka iPhone'da menyuni ochdi. "Buyurtma raqami: 200145678901" degan yozuv ko'k havolaga aylanib qolibdi. Bosgan edi — telefon qo'ng'iroq qilmoqchi bo'ldi.
• Marketolog Malika saytni Google Search Console'ga qo'shmoqchi. Google "sayt sizniki ekanini isbotlang" deyapti.
• Choyxona egasi Jasur aka internetdan "foydali meta teglar to'plami"ni ko'chirib keldi. Unda 20 ta qator bor. Qaysi biri kerak, qaysi biri keraksiz — noma'lum.

Bu darsda uchala muammoni hal qilamiz. Har bir tegni ko'rganda bitta savol beramiz: "bu 2026-yilda hali ishlaydimi?"

2. Ikki xil meta teg: name va http-equiv

Siz shu paytgacha asosan name li meta teglarni yozdingiz:

<meta name="description" content="Chilonzordagi choyxona">

name — "sahifa haqida ma'lumot": tavsif, muallif, rang. Uni brauzer, qidiruv tizimi yoki boshqa dastur o'qiydi.

Ikkinchi turi — http-equiv:

<meta http-equiv="content-security-policy"
      content="default-src 'self'">

http-equiv — "HTTP ekvivalenti". HTTP sarlavhalari darsida ko'rdik: server javob bilan birga sarlavhalar yuboradi. http-equiv — o'sha sarlavhaning HTML ichidagi o'rinbosari. Server sozlamalariga kirish imkoni bo'lmaganda qo'l keladi.

Hayotdan o'xshatish: name — posilka ustidagi yozuv ("ichida kitob bor"). http-equiv — pochtachi aytishi kerak bo'lgan gapni qutiga yozib qo'yish ("ehtiyot bo'ling, shisha"). Pochtachi aytsa yaxshiroq, lekin yozuv ham ishlaydi.

Tekshirib ko'ring: Nega server sarlavhasi http-equiv dan yaxshiroq bo'lishi mumkin?

3. referrer: boshqa saytga qancha ma'lumot ketadi

3.1 Eslatma: Referer nima

Mehmon «Bahor» saytidagi Instagram havolasini bosdi. Brauzer Instagram'ga so'rov yuborayotganda "bu odam qayerdan keldi" degan ma'lumotni ham qo'shadi. Bu Referer sarlavhasi (HTTP sarlavhalari darsida ko'rgansiz). Nomidagi imlo xatosi (Referrer o'rniga Referer) 1990-yillardan qolgan va standartga o'shanday kirib ketgan.

Maxsus havolalar darsida bitta havola uchun rel="noreferrer" ni, iframe darsida esa referrerpolicy atributini ko'rdik. Meta teg esa butun sahifa uchun qoida qo'yadi:

<meta name="referrer" content="strict-origin-when-cross-origin">

3.2 Qiymatlar

Jadvaldagi birinchi qiymat 2020–2021-yillardan beri barcha brauzerlarda standart. Ya'ni meta teg yozmasangiz ham, brauzer shunday ishlaydi. Shuning uchun oddiy sayt uchun bu tegni yozish shart emas.

unsafe-url nomidagi "unsafe" (xavfli) so'zi bejiz emas. Uni ishlatmang.

3.3 Qachon no-referrer kerak

Manzilida maxfiy ma'lumot bo'lgan sahifalarda. Masalan, «Bahor» bron tasdiqlash sahifasi:

https://example.com/bron/tasdiq?kod=K7X2-91QA

Bu sahifada "Instagram'da kuzating" havolasi bor. Standart qoida boshqa saytga faqat https://example.com/ ni yuboradi — kod ketmaydi. Lekin ba'zi eski yoki noto'g'ri sozlangan brauzerlar va kengaytmalar boshqacha ishlashi mumkin. Maxfiy sahifada xavfni butunlay yopish uchun:

<meta name="referrer" content="no-referrer">

Kamchiligi: sizning saytingizdan kelgan mehmonlarni boshqa sayt endi ko'rmaydi. Hamkor sayt "bizga «Bahor» dan qancha odam keldi" deb hisoblay olmaydi. Shuning uchun no-referrer faqat maxfiy sahifalarga.

4. Hujumchi nigohi

Bu darsdagi ikki teg xavfsizlikka bevosita tegishli.

Manzildagi sir. Parolni tiklash havolasi ko'pincha shunday: https://example.com/parol?token=a8f3.... Sahifada tashqi rasm yoki reklama skripti bo'lsa, brauzer ularga so'rov yuboradi. Eski unsafe-url qoidasi yoki xato sozlama bilan token begona serverning jurnaliga tushadi. Jurnalni o'qigan odam parolingizni o'zgartira oladi. Himoya: bunday sahifalarda no-referrer, eng yaxshisi — tokenni bir martalik va qisqa muddatli qilish (buni backend qismida qilamiz).

generator sotib qo'yadi. WordPress kabi tizimlar head ga o'zini qo'shadi:

<meta name="generator" content="WordPress 6.2">

Hujumchi dastur minglab saytlarni aylanib, aynan shu qatorni qidiradi. "6.2" da ma'lum zaiflik bo'lsa, u shu saytlarga hujum qiladi. Himoya: tizimni yangilab turish va versiyani oshkor qilmaslik. Faqat generator ni olib tashlash yolg'iz o'zi himoya emas, lekin hujumchining ishini qiyinlashtiradi.

5. format-detection: iPhone'dagi "ko'k raqamlar"

5.1 Muammo

iPhone'dagi Safari telefon raqamiga o'xshagan har qanday raqamlar qatorini o'zi havolaga aylantiradi. Maqsad yaxshi: raqamni bosib qo'ng'iroq qilish. Lekin Safari xato ham qiladi. U buyurtma raqami, karta raqamining bir qismi yoki uzun narxni ham telefon deb o'ylaydi:

<p>Buyurtma raqami: 200145678901</p>

iPhone'da 200145678901 ko'k, tagiga chizilgan havola bo'lib chiqadi. Mehmon bosadi — telefon qo'ng'iroq qilishni taklif qiladi. Sahifaning ko'rinishi ham buziladi.

5.2 Yechim

<meta name="format-detection" content="telephone=no">

Endi Safari raqamlarni o'zboshimchalik bilan havolaga aylantirmaydi. Haqiqiy telefon raqamlarini esa o'zingiz aniq belgilaysiz — Maxsus havolalar darsidagi tel: bilan:

<p>Stol band qilish:
  <a href="tel:+998900000000"
    >+998&nbsp;90&nbsp;000&nbsp;00&nbsp;00</a>
</p>

Bu eng yaxshi kombinatsiya: tasodifiy havolalar yo'q, kerakli raqam esa bosiladi.   — Maxsus belgilar darsidagi uzilmas bo'sh joy: raqam qator oxirida ikkiga bo'linib ketmaydi. Uzun qatorni telefon ekraniga sig'dirish uchun ikkiga bo'ldik. a tegining yopuvchi > belgisi ataylab keyingi qatorda: shunda havola matni boshiga ortiqcha bo'sh joy tushmaydi.

Boshqa brauzerlar (Android'dagi Chrome) raqamlarni o'zi havolaga aylantirmaydi. Shuning uchun bu teg asosan iPhone va iPad uchun. Internetda date=no, address=no, email=no qiymatlari ham uchraydi. Apple'ning rasmiy hujjatida esa faqat telephone yozilgan — asosiysi shu.

Bo'sh joyni to'ldiring: iPhone'ning raqamlarni telefon havolasiga aylantirishini to'xtatadigan qiymat: content=""

Tekshirib ko'ring: telephone=no qo'yilgach, <a href="tel:..."> havolasi iPhone'da ishlaydimi?

6. http-equiv: ikki muhim holat

6.1 refresh — nega uni ishlatmaslik kerak

refresh sahifani ma'lum vaqtdan keyin yangilaydi yoki boshqa manzilga o'tkazadi:

<!-- ❌ 5 soniyadan keyin boshqa sahifaga o'tkazadi -->
<meta http-equiv="refresh"
      content="5; url=https://example.com/menyu/">

Ko'rinishidan qulay. Lekin u bir nechta muammo tug'diradi:

• Accessibility. Ekran o'quvchi foydalanuvchi matnni o'qib ulgurmay, sahifa almashadi. Sekin o'qiydigan odam ham shunday. Accessibility qoidalari (WCAG) foydalanuvchi boshqara olmaydigan avtomatik o'tishni xato deb hisoblaydi.
• "Orqaga" tugmasi. Mehmon orqaga qaytadi — 5 soniyadan keyin yana oldinga uloqtiriladi. Tuzoq.
• SEO. Qidiruv tizimlari uchun eng to'g'ri yo'naltirish — serverdagi 301 (status kodlari darsida ko'rgansiz).

html-validate buni ushlaydi:

error  Meta refresh must be instant (0 second delay)  meta-refresh

Tarjimasi: "Meta refresh darhol bo'lishi kerak (0 soniya kechikish)". Ya'ni kechikishli variantga umuman ruxsat yo'q.

Faqat bitta istisno bor. Server sozlamalariga kira olmaysiz (masalan, bepul statik hostingda), sahifa esa boshqa manzilga ko'chdi. Shunda oxirgi chora sifatida darhol yo'naltirish:

<meta http-equiv="refresh"
      content="0; url=https://example.com/menyu/">

Sahifaga baribir "Menyu ko'chdi" matni va oddiy havola ham qo'ying. Imkon topilishi bilan server yo'naltirishiga o'ting.

6.2 content-security-policy — xavfsizlik qoidasi

CSP (Content Security Policy — kontent xavfsizlik siyosati) brauzerga aytadi: "bu sahifa faqat shu manbalardan skript, rasm va boshqa fayllarni yuklashi mumkin". Hujumchi sahifaga begona skript joylashtirsa ham, brauzer uni ishga tushirmaydi.

Hayotdan o'xshatish: choyxona oshxonasiga faqat ro'yxatdagi yetkazib beruvchilardan mahsulot qabul qilinadi. Begona odam go'sht olib kelsa ham, eshikdan qaytariladi.

<meta http-equiv="content-security-policy"
      content="default-src 'self'; img-src 'self' https:">

• default-src 'self' — "hamma narsa faqat o'z saytimizdan".
• img-src 'self' https: — "rasmlar o'z saytimizdan va istalgan HTTPS manzildan".

Meta tegdagi CSP'ning cheklovlari bor:

• U faqat o'zidan keyingi qatorlarga ta'sir qiladi. Shuning uchun head ning eng boshiga, charset dan keyin qo'yiladi.
• Ba'zi qoidalar (frame-ancestors, hisobot yuborish) meta tegda ishlamaydi — faqat server sarlavhasida.
• Noto'g'ri qoida saytni buzadi: masalan, yuqoridagi CSP Cloudflare Turnstile yoki Google xaritasini to'sib qo'yadi.

Shu sababli bugun «Bahor» ga CSP qo'shmaymiz. Uni to'liq HTML darajasidagi xavfsizlik va Brauzer xavfsizlik modeli darslarida, skriptlarni o'rganganimizdan keyin yozamiz. Hozircha bilishingiz kifoya: CSP bor, u XSS'ga qarshi kuchli himoya va uni meta teg bilan ham berish mumkin.

7. Sayt egaligini tasdiqlash

Malika «Bahor» ni Google Search Console'ga qo'shmoqchi. Bu Google'ning bepul xizmati: sayt qidiruvda qanday ko'rinayotgani, qaysi so'zlar bilan topilayotgani va qanday xatolar borligini ko'rsatadi. Lekin Google hisobotni istalgan odamga ko'rsatmaydi. Avval sayt sizniki ekanini isbotlash kerak.

Usullardan biri — Google bergan meta tegni bosh sahifaga qo'yish:

<meta name="google-site-verification"
      content="Google-bergan-kod-shu-yerga">

Google sahifani ochadi, tegni topadi va "ha, bu sayt shu hisob egasiniki" deydi. Kodni hech kimga ko'rsatmaslik shart emas — u sahifada ochiq turadi. U faqat bitta hisobni saytga bog'laydi.

O'zbekistonda Yandex ham ko'p ishlatiladi. Boshqa xizmatlarning ham o'z tegi bor:

Diqqat: Tasdiqlangandan keyin tegni o'chirmang. Google va Yandex vaqti-vaqti bilan qayta tekshiradi. Teg yo'qolsa, tasdiq ham bekor bo'ladi va hisobotlarga kirish yopiladi.

Muqobil usul — domen sozlamalariga DNS yozuvi qo'shish (Domen va DNS darsidagi TXT yozuv). U butun domenni birdaniga tasdiqlaydi va sahifa kodiga bog'liq emas. Domen sozlamalariga kirish imkoni bo'lsa, DNS usuli ishonchliroq.

8. Yana bir nechta foydali qator

8.1 author

<meta name="author" content="Choyxona «Bahor»">

Sahifa muallifi. Google reyting uchun ishlatmaydi. Lekin ba'zi dasturlar (brauzer "o'qish rejimi", xatcho'p xizmatlari) muallifni shu yerdan oladi. Blog postlarda foydali.

8.2 application-name

<meta name="application-name" content="Bahor">

Sahifa veb-ilova bo'lsa — ilovaning nomi. title sahifaga qarab o'zgaradi ("Menyu — Choyxona «Bahor»"), application-name esa butun ilova uchun bitta. Bugun bu vazifani ko'proq manifestdagi name bajaradi (oldingi dars). Hujjatda faqat bitta application-name bo'lishi mumkin.

8.3 google — "tarjima qilma"

<meta name="google" content="notranslate">

Chrome sahifani tarjima qilishni taklif qilmaydi. Ko'p tilli matn darsidagi translate="no" atributi bitta elementni himoya qiladi — masalan, "Bahor" so'zi "Spring" bo'lib qolmasin. Meta teg esa butun sahifani. Odatda atribut to'g'riroq: mehmon tushunmagan qismini tarjima qila olsin.

8.4 rel="me" — head ichida

Maxsus havolalar darsida a tegidagi rel="me" ni ko'rgan edik: "havola qilingan profil ham menga tegishli". Profil havolasini sahifada ko'rsatish shart bo'lmasa, xuddi shu ma'lumotni head ga link bilan qo'yish mumkin:

<link rel="me" href="https://mastodon.social/@sizning_akkaunt">

Mastodon ikkala usulni ham tan oladi: profil sahifasida saytingiz yonida yashil "tasdiqlangan" belgisi chiqadi. Mastodon'ning yana bir tegi bor — fediverse:creator. U Mastodon'da ulashilgan maqola kartasiga muallif nomini qo'shadi:

<meta name="fediverse:creator"
      content="@sizning_akkaunt@mastodon.social">

9. Apple'ning eski teglari

iPhone'ga moslangan eski saytlarda apple- bilan boshlanadigan teglar ko'p. Manifest paydo bo'lishidan oldin ular yagona yo'l edi.

apple-mobile-web-app-capable ni ko'rsangiz, Chrome konsolda shunday ogohlantiradi:

<meta name="apple-mobile-web-app-capable" content="yes"> is deprecated. Please include <meta name="mobile-web-app-capable" content="yes">

Tarjimasi: "bu teg eskirgan, o'rniga mobile-web-app-capable ni qo'shing". Lekin eng to'g'ri yo'l — ikkalasi ham emas, manifestdagi "display": "standalone".

apple-itunes-app esa kompaniyaning App Store'da ilovasi bo'lsa kerak. iPhone'dagi Safari sahifa tepasida "Ilovani ochish" banneri chiqaradi:

<meta name="apple-itunes-app" content="app-id=123456789">

123456789 o'rniga ilovaning App Store'dagi raqami yoziladi. «Bahor» ning ilovasi yo'q, shuning uchun bizga kerak emas.

10. Eskirgan teglar: ko'chirmang

Jasur olib kelgan "20 ta foydali teg" ro'yxatini tozalaymiz. Uning bir qismini Qidiruv meta teglari darsida ko'rgan edik: keywords, revisit-after va http-equiv="content-language" — Google ularni o'qimaydi. Yana bir nechtasi ham kerak emas:

Qoida: tegni ko'chirishdan oldin MDN'da qidiring. MDN'da topilmasa yoki "deprecated" (eskirgan) deb belgilangan bo'lsa — ko'chirmang.

Tekshirib ko'ring: Jasur: "X-UA-Compatible zarar qilmaydi-ku, qolaversin" dedi. Unga nima deysiz?

11. «Bahor» sayti: yangi qatorlar

Bosh sahifaning head iga qo'shiladi (ikonkalar blokidan keyin):

<!-- iPhone: raqamlarni o'zi havolaga aylantirmasin -->
<meta name="format-detection" content="telephone=no">

<!-- Sayt egaligini tasdiqlash (faqat bosh sahifada) -->
<meta name="google-site-verification"
      content="Google-bergan-kod-shu-yerga">
<meta name="yandex-verification"
      content="Yandex-bergan-kod-shu-yerga">

Bron tasdiqlash sahifasiga (bron/tasdiq/index.html) esa alohida:

<meta name="referrer" content="no-referrer">

Nima qo'shmadik va nega:

• Bosh sahifaga referrer — kerak emas, brauzer standarti allaqachon yaxshi.
• http-equiv="refresh" — hech qayerda.
• CSP — xavfsizlik darsida, skriptlarni o'rganganimizdan keyin.
• keywords, X-UA-Compatible — eskirgan.

12. Ko'p uchraydigan xatolar

12.1 Tasdiq tegini ichki sahifaga qo'yish

Google tegni faqat siz ko'rsatgan manzilda — odatda bosh sahifada — qidiradi. menyu/ sahifasiga qo'ysangiz, tasdiq o'tmaydi. Tuzatish: bosh sahifaning head iga.

12.2 format-detection bor, lekin telefon bosilmaydi

Teg qo'shildi, endi hech bir raqam havola emas — hatto choyxona telefoni ham. Tuzatish: haqiqiy raqamni <a href="tel:+998..."> bilan o'rang.

12.3 CSP'ni sinab ko'rmasdan qo'yish

Internetdan qattiq CSP qatorini ko'chirdingiz — sahifadagi xarita va bron himoyasi yo'qoldi. Konsolda shunga o'xshash xato chiqadi:

Refused to load the script 'https://challenges.cloudflare.com/turnstile/v0/api.js' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

Tarjimasi: "skriptni yuklash rad etildi, chunki u CSP'ning default-src 'self' qoidasini buzadi. Skriptlar uchun alohida qoida yozilmagan, shuning uchun umumiy default-src ishlatildi". CSP to'g'ri ishladi — begona manbani to'sdi. Faqat bu manba sizga kerak edi. Tuzatish: CSP'ni kerakli manbalar ro'yxati bilan yozish. Buni xavfsizlik darsida o'rganamiz.

12.4 Bir xil tegni ikki marta yozish

description yoki referrer ikki marta yozilsa, qaysi biri ishlashi tegga bog'liq. Masalan, referrer da oxirgisi g'olib, ba'zi dasturlar esa birinchisini oladi. Tuzatish: har bir name — bir marta (faqat theme-color kabi media bilan ajratilganlari bundan mustasno).

13. Mashqlar

1-mashq (oson): Keraklisini tanlang

Jasur ro'yxatidagi har bir qator uchun "qoldiramiz" yoki "o'chiramiz" deb yozing va sababini ayting:

1. <meta name="keywords" content="osh, choyxona, Toshkent">
2. <meta name="format-detection" content="telephone=no">
3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
4. <meta name="google-site-verification" content="...">
5. <meta http-equiv="refresh" content="30">

2-mashq (o'rta): Kurs sayti

Malikaning yangi loyihasi — "Oshpazlik kurslari" sayti. Talablar:

• iPhone'da kurs narxlari (1250000 so'm) telefon havolasiga aylanmasin, lekin aloqa raqami (+998 90 000 00 00) bosilsin.
• Sayt Google va Yandex'da tasdiqlansin (kodlar o'rniga ... yozing).
• Sahifa muallifi — "Oshpazlik kurslari".

head qatorlarini va aloqa raqami uchun HTML'ni yozing.

<meta name="format-detection" content="telephone=no">
<meta name="author" content="Oshpazlik kurslari">
<meta name="google-site-verification" content="...">
<meta name="yandex-verification" content="...">

<p>Aloqa:
  <a href="tel:+998900000000"
    >+998&nbsp;90&nbsp;000&nbsp;00&nbsp;00</a>
</p>

3-mashq (qiyin): Maxfiy sahifa

«Bahor» da "Stol bronini bekor qilish" sahifasi bor. Uning manzili: https://example.com/bron/bekor?token=Q9Z4-77LM. Sahifada choyxonaning Instagram havolasi va Google xarita rasmi bor.

1. Qaysi ma'lumot va qayerga sizib chiqishi mumkinligini tushuntiring.
2. Sahifa head iga qaysi qatorni qo'shasiz?
3. Nega bu qatorni butun saytga qo'ymaymiz?

<meta name="referrer" content="no-referrer">

14. Real ishda

• SEO va marketing. Yangi saytni ishga tushirishning birinchi kunida Search Console va Yandex Webmaster tasdiqlanadi. Bu ko'pincha dasturchining vazifasi — marketolog kodni beradi, siz head ga qo'yasiz.
• Kod review. Tajribali dasturchi head ni ko'rib, eskirgan teglarni darhol o'chirishni so'raydi: keywords, X-UA-Compatible, kechikishli refresh. Bu darsdan keyin siz ham shunday qila olasiz.
• Xavfsizlik auditi. Auditorlar generator versiyasini, referrer siyosatini va CSP'ni tekshiradi. Server sarlavhalarini sozlashni kursning backend va server qismlarida o'rganamiz.
• Intervyuda so'raladi: "meta http-equiv nima?" va "Nega meta refresh yomon?".

Xulosa

• meta name — sahifa haqida ma'lumot; meta http-equiv — server sarlavhasining HTML'dagi o'rinbosari.
• referrer standarti (strict-origin-when-cross-origin) yetarli; maxfiy manzilli sahifalarga — no-referrer.
• format-detection = telephone=no iPhone'ning tasodifiy "ko'k raqamlari"ni to'xtatadi; haqiqiy raqam — tel: havola bilan.
• refresh ni ishlatmang; majbur bo'lsangiz — faqat 0 soniya. CSP meta teg bilan ham beriladi, lekin server sarlavhasi yaxshiroq.
• google-site-verification, yandex-verification — tasdiqdan keyin ham qolsin.
• X-UA-Compatible, content-type, apple-mobile-web-app-capable — eskirgan, ko'chirmang.

Keyingi dars: Skriptlarni ulash: defer, async, module — JavaScript fayllarni sahifaga qayerda va qanday ulash tezlikni belgilaydi.

Manbalar

• MDN: "<meta> standard metadata names", "Referrer-Policy", "http-equiv", "Content-Security-Policy" — developer.mozilla.org
• Apple: "Supported Meta Tags" (Safari HTML Reference) — developer.apple.com
• Google Search Central: "Verify your site ownership" va "Meta tags that Google understands" — developers.google.com
• html-validate: "meta-refresh" qoidasi — html-validate.org