HTML Konuları

HTML Link Etiketi

08/10/2022
HTML Link Types

<head></head> etiketlerini arasında kullanılan <link> etiketi sayfa dışındaki kaynakların sayfaya yükletilmesi için kullanılır.

<link> etiketinin hangi amaçla kullanılacağı da içerisindeki rel="" özelliği belirtilir.

Stil Dosyaları İçin <link> Etiketi (rel=”stylesheet”)

Sayfadaki kullanılan dış kaynak CSS dosyalarını sayfaya çağırmak için rel="stylesheet" link etiketi kullanılır.

<link rel="stylesheet" href="https://example.com/style.css" type="text/css" media="all" />

Canonical için <link> Etiketi (rel=”canonical”)

Sayfanın standart URL’ini belirtmek için kullanılan canonical rel="canonical" <link> özelliği ile kullanılır.

<link rel="canonical" href="https://example.com/"/>

Favicon için <link> Etiketi (rel=”icon”)

Sayfaya favicon eklemek için rel="icon" <link> etiketi sayfanın kaynak kodunda kullanılır.

<link rel="icon" href="https://example.com/icon-32.png" sizes="32x32" />
<link rel="icon" href="https://example.com/icon-32.png" sizes="1922x922" />

Sayfaların Dil Versiyonları İçin <link> Etiketi (rel=alternate)

Web sayfalarının yabancı dillerdeki alternatif sayfalarını belirtmek için rel="alternate" <link> etiketi kullanılır.

<link rel="alternate" href="https://juniortoexpert.com/de/" hreflang="de" /> 
<link rel="alternate" href="https://juniortoexpert.com/en/" hreflang="en" /> 
<link rel="alternate" href="https://juniortoexpert.com/tr/" hreflang="tr" /> 
<link rel="alternate" href="https://juniortoexpert.com/fr/" hreflang="fr" /> 
<link rel="alternate" href="https://juniortoexpert.com/" hreflang="x-default" />

Sayfa Yüklenme Performansı İçin <link> Etiketleri

rel="dns-prefetch", rel="preconnect", rel="preload" sayfa yüklenme sürecini hızlandırmak için kullanılırlar.

rel=”dns-prefetch” <link> Etiketi

<link rel="dns-prefetch" href="https://tagmanager.google.com/" />

rel=”preconnect” <link> Etiketi

<link rel="preconnect" href="https://example.com">

rel=”preload” <link> Etiketi

<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2">

Link Etiketi <head> Etiketinin Dışında Kullanılır Mı?

<link> etiketlerinin HTML mimarisinde <head> etiketlerinin içerisinde kullanılması öneriliyor fakat <head> etiketinin dışına konumlandırıldığında da <link> etiketi çalışır.

Kaynak:

https://web.dev/