Havolalar va navigatsiya uchun <a> tegidan qanday to'g'ri foydalanish kerak?

JuniorHTML #html #links #navigation

Savol

hrefdagi nisbiy va absolyut URL'lar bir-biridan nimasi bilan farq qiladi, target atributi nima uchun kerak, rel="noopener noreferrer nofollow" qiymatlari nima qiladi va sahifa ichidagi langar havolalar qanday ishlaydi?

Qisqa javob

Absolyut URL to'liq manzilni o'z ichiga oladi (https://site.com/page), nisbiy URL esa joriy hujjatdan yo'lni (/page, ./page, ../page). target="_blank" havolani yangi vkladkada ochadi va xavfsizlik hamda unumdorlik nuqtai nazaridan rel="noopener" talab qiladi. rel="noreferrer" referrer'ni yashiradi, rel="nofollow" qidiruv tizimlaridan havola vaznini uzatmaslikni so'raydi. Langar havolalar (href="#id") sahifani qayta yuklamasdan mos idga ega elementga skroll qiladi.

Batafsil javob

Nisbiy va absolyut URL'lar:

Absolyut URL protokol va domenni o'z ichiga oladi: https://example.com/products/1. U qayerdan havola qilinganidan qat'i nazar ishlaydi.
Nisbiy URL joriy sahifa manziliga nisbatan hal qilinadi: /products/1 (domen ildizidan), products/1 (joriy yo'ldan), ../products/1 (bir daraja yuqoriga), #section (joriy hujjatdagi langar).
Nisbiy havolalar saytni domenlar/muhitlar (dev/staging/prod) o'rtasida ko'chirishda qulay, absolyut havolalar esa tashqi havolalar uchun majburiy va bir ma'nolilik uchun ko'pincha og:*/canonical'da afzal ko'riladi.

target:

_self (standart) — bir xil ko'rish kontekstida ochish.
_blank — yangi vkladka/oynada ochish.
_parent, _top — freymlardagi sahifalar uchun dolzarb.

Xavfsizlik va SEO uchun rel:

noopener — target="_blank" bo'lganda yangi vkladka standart holatda window.openerga kirish huquqini oladi, u orqali (eski brauzerlarda) asl vkladkani fishing saytga yo'naltirishi mumkin (tabnabbing). noopener bu bog'lanishni bekor qiladi. Zamonaviy brauzerlar _blank uchun buni allaqachon standart holatda amalga oshiradi, lekin uni aniq ko'rsatish yaxshi amaliyot bo'lib qoladi va bu kafolatlanmagan joylarda majburiy.
noreferrer — qo'shimcha ravishda maqsadli saytga Referer sarlavhasini uzatmaydi (o'tish qayerdan bo'lganini yashiradi) va shuningdek noopenerni ham anglatadi.
nofollow — qidiruv robotlariga qabul qiluvchi sahifaning obro'sini hisoblashda ushbu havolani hisobga olmaslikni bildiradi; foydalanuvchi kontenti, reklama va tasdiqlanmagan havolalar uchun ishlatiladi.
sponsored / ugc — mos ravishda reklama havolalari va foydalanuvchi kontenti uchun nofollowning aniqlashtiruvchi variantlari.

Langar havolalar:

href="#some-id" sahifani qayta yuklamasdan id="some-id"ga ega elementga skroll qiladi. href="#" (id'siz) odatda o'rin bosuvchi sifatida ishlatiladi, lekin bundan qochish va navigatsiya bajarmaydigan elementlar uchun <button>dan foydalanish yaxshiroq.

Misol

<!-- sayt ichidagi nisbiy havola -->
<a href="/products/42">42-mahsulot</a>

<!-- tashqi havola, yangi vkladkada xavfsiz ochilgan -->
<a href="https://external-partner.com" target="_blank" rel="noopener noreferrer">
  Hamkor
</a>

<!-- SEO vaznini uzatmasdan foydalanuvchi kontentiga havola -->
<a href="https://random-blog.com" rel="nofollow ugc">Izohdan havola</a>

<!-- sahifa ichidagi langar navigatsiyasi -->
<nav>
  <a href="#pricing">Narxlar</a>
  <a href="#faq">FAQ</a>
</nav>

<section id="pricing">...</section>
<section id="faq">...</section>

Qo'shimcha savollar

Zamonaviy brauzerlar noopener muammosini qisman o'zlari hal qilgan bo'lsa-da, nega uni baribir aniq ko'rsatish kerak?
Google nuqtai nazaridan nofollow sponsored va ugcdan nimasi bilan farq qiladi?
JavaScript'siz langarga silliq skrollni qanday amalga oshirish mumkin?