Link etiketinde rel özniteliği neden gereklidir?

<link> etiketi içindeki rel özniteliği, mevcut belge ile etiketin referans verdiği belge arasındaki ilişkiyi (relationship) tanımlar. Tarayıcıya, bağlı kaynağı nasıl kullanacağını bildirir.

En sık kullanılan rel değerleri şunlardır:

• stylesheet: Belgeye uygulanacak harici bir CSS dosyasını belirtir.
• icon/shortcut icon: Site için bir simge (favicon) belirtir ve bu, tarayıcı sekmesinde gösterilir.
• preload: Daha sonra ihtiyaç duyulacak kaynağı önceden yükler, böylece render engellenmez.
• preconnect: Belirtilen kaynağa önceden bağlantı kurar, böylece sonraki istekler hızlanır.
• prefetch: Kullanıcının gelecekteki gezinmesinde gerekebilecek kaynağı önceden yükler.
• canonical: Sayfanın kanonik URL'sini belirtir, böylece arama motorlarının içeriğin ana sürümünü belirlemesine yardımcı olur.
• alternate: Mevcut belgenin alternatif bir versiyonunu belirtir (örneğin, başka bir dilde veya farklı formatta).
• author: Belgenin yazarını belirtir.
• help: Yardım belgesini belirtir.

rel="stylesheet" kullanımına örnek:

<link rel="stylesheet" href="/css/style.css">

rel="icon" kullanımına örnek:

<link rel="icon" href="/favicon.ico" type="image/x-icon">

rel="preload" kullanımına örnek:

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

rel kullanımı, tarayıcı ve arama motorları tarafından dış kaynakların doğru şekilde işlenmesi ve performansın optimize edilmesi için gereklidir.