rel=”…” Kodları ve Anlamları: Nerelerde, Hangi Amaçla Kullanılır?

0 52 3 dakika okuma süresi

rel kodları ve anlamları, nerelerde hangi amaçla kullanılır?

HTML’de rel (relationship) özniteliği; bir kaynağın hedefle olan ilişkisini tanımlar. Hem <a> hem de <link> etiketlerinde kullanılır ve doğrudan SEO, güvenlik/gizlilik ve performans sonuçları üretir. Bu rehberde, en kritik rel değerlerini amaç, kullanım alanı ve pratik örneklerle derledim.

`rel` Nedir? `<a>` ve `<link>` Arasındaki Fark

<a href="…">: Kullanıcı tıklayacağı sayfa dışı/İç bağlantılar.
<link href="…">: Tarayıcının/arama motorlarının tükettiği ilişkili kaynaklar (stil, alternatif sürüm, ipucu).
Aynı rel değeri iki etikette farklı bağlamlara hizmet edebilir (örn. alternate).

SEO Odaklı `rel` Değerleri

1) `rel="canonical"`

Amaç: Yinelenen/similar içeriklerde asıl URL’yi (konsolide sinyal) işaret etmek.
Kullanım:

<link rel="canonical" href="https://www.ornek.com/icerik/asli-url/">

İpuçları:

Mutlak URL kullanın.
Bir sayfa yalnızca tek canonical göndersin.
Canonical hedefi 200 OK ve indexlenebilir olmalı.

2) `rel="nofollow"`, `rel="ugc"`, `rel="sponsored"`

Amaç: Harici linklerin sinyal aktarımını ve bağlamını belirtmek. Arama motorlarında “hint” olarak değerlendirilir (kesin direktif değil).

nofollow: Güvenmediğiniz/denetlemediğiniz bağlantı.
ugc: Kullanıcı üretimli içerik (yorum, forum).
sponsored: Reklam/affiliates/sponsorlu bağlantı.
Örnekler:

<a href="https://dis-site.com" rel="nofollow">Kaynak</a>
<a href="/kullanici/yorum/42" rel="ugc">Yorum</a>
<a href="https://kampanya.com" rel="sponsored">Sponsorlu</a>

Kombinasyon mümkün:

<a href="…" rel="nofollow sponsored">Reklam</a>

3) `rel="alternate"` (+ `hreflang`)

Amaç: Aynı içeriğin farklı dil/bölge sürümlerini belirtmek.

<link rel="alternate" hreflang="tr" href="https://example.com/tr/icerik/">
<link rel="alternate" hreflang="en" href="https://example.com/en/content/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

İpuçları:

Karşılıklı (return) etiketleme yapın.
Dizi tam olsun; x-default ana giriş sayfasını işaret edebilir.

Not: Eski rel="next/prev" sayfalama işaretleri Google tarafından yıllar önce göz ardı ediliyor. Yine de UX ve dahili bağlantı mantıklı kalsın.

Güvenlik & Gizlilik İçin `rel`

4) `rel="noopener"`

Amaç: Yeni sekmede açılan linklerde tabnabbing saldırısını engellemek (hedef sayfanın window.opener ile kaynağı manipüle etmesini önler).

<a href="https://dis-site.com" target="_blank" rel="noopener">Dış Bağlantı</a>

5) `rel="noreferrer"`

Amaç: Hedef siteye referrer başlığını göndermemek (gizlilik).

<a href="https://dis-site.com" target="_blank" rel="noreferrer">Gizli Geçiş</a>

Dikkat: Analitik tarafında kaynak/gönderim kırpılabilir. Genelde noopener tek başına güvenlik için yeterli, noreferrer gerçekten gerekliyse ekleyin.

Pratik öneri (genel outbound şablon):

<a href="https://dis-site.com" target="_blank" rel="nofollow noopener">Harici Link</a>

Performans/Resource Hint’leri İçin `rel` (Tarayıcı İpuçları)

6) `rel="preload"`

Amaç: Kritik kaynağı (font, hero görsel, üstteki JS/CSS) erken yükletmek.

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

İpuçları:

as zorunlu; tür doğru olmalı.
Yanlış/kapsamlı preload, fayda yerine bütçe israfı yaratır.

7) `rel="prefetch"` / `rel="prerender"`

Amaç: Yakında gerekebilecek kaynağı/URL’yi önceden getir.

<link rel="prefetch" href="/sonraki-sayfa">

Dikkat: Kullanıcı veri/hücresel bağlantıda gereksiz yük olabilir.

8) `rel="preconnect"` / `rel="dns-prefetch"`

Amaç: Üçüncü taraf alanlara erken bağlantı kurulumu (DNS/TLS el sıkışması).

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="//cdn.example.com">

İpuçları: Az ve öz kullanın; gereksiz hedefler gecikmeyi artırır.

9) `rel="stylesheet"`

Amaç: CSS dosyalarını bağlamak.

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

İleri seviye: media ile kritik olmayan stilleri erteleyin.

İçerik İlişkileri/Meta Bilgi İçin `rel`

10) `rel="author"`, `rel="license"`, `rel="me"`, `rel="tag"`, `rel="bookmark"`, `rel="external"`

Amaçlar:

author: Yazar sayfası/profil.
license: İçerik lisansına bağlantı.
me: Aynı kişiye ait diğer profil/bağlantı.
tag: Bir etiket sayfasına işaret (blog ekosistemlerinde).
bookmark: Kalıcı bağlantı (permalink).
external: Harici kaynağı vurgulama (standartlaştırılmış anlamı sınırlı, ama bazı sistemler yorumlar).

Örnek:

<a href="/yazar/cagri-deniz/" rel="author">Yazar</a>
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">

Hızlı Karar Ağacı – Hangi `rel` Ne Zaman?

Harici link, yeni sekme: target="_blank" rel="noopener" (+ gerekliyse nofollow / sponsored / ugc)
Kopya/Benzer URL konsolidasyonu: <link rel="canonical">
Dil/bölge sürümleri: <link rel="alternate" hreflang="…">
Kritik font/görsel/JS erken yükleme: <link rel="preload" as="…">
CDN/3P alanlara erken bağlantı: <link rel="preconnect"> / <link rel="dns-prefetch">

Sık Yapılan Hatalar ve Kaçınma Yolları

Yanlış canonical hedefi

301’e giden, noindex olan, sayfa bulunamayan URL’yi canonical yapmayın.
Çözüm: Asıl, indexlenebilir 200 OK URL.

Aşırı preload/prefetch

Gereksiz kaynakları önden çekmek TTFB/TTI’ı kötüleştirebilir.
Çözüm: Yalnız kritik kaynakları hedefleyin; ölçümleyin (LCP/INP).

Outbound linklerde noopener eksikliği

Tabnabbing riski.
Çözüm: target="_blank" ile daima rel="noopener".

hreflang yanlış matris

Karşılıklı etiket yok, dizi eksik.
Çözüm: Tüm dil/bölge varyasyonlarını karşılıklı bağlayın.

nofollowyu “gizlemek” için kullanmak

nofollow sıralamayı silmez; sadece bir ipucudur.
Çözüm: Amacına uygun kullanın; kaliteyi yükseltin.

Kısa Kod Şablonları

1) Güvenli dış bağlantı (varsayılan şablon):

<a href="https://dis-site.com" target="_blank" rel="noopener">Bağlantı</a>

2) Sponsorlu/affiliate bağlantı:

<a href="https://kampanya.com" target="_blank" rel="sponsored noopener">İş Ortağı</a>

3) UGC (yorum/foruma giden link):

<a href="/uye/yorum/42" rel="ugc nofollow">Kullanıcı Yorumu</a>

4) Çok dilli sayfa seti:

<link rel="alternate" hreflang="tr" href="https://example.com/tr/urun/">
<link rel="alternate" hreflang="en" href="https://example.com/en/product/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

5) Canonical ile birleştirme:

<link rel="canonical" href="https://example.com/icerik/asli-url/">

6) Performans ipuçları:

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>

Kontrol Listesi (Yayın Öncesi)

Canonical hedefi doğru ve 200 OK
Hreflang’lar karşılıklı ve eksiksiz
Dış bağlantılarda target="_blank" varsa rel="noopener" eklendi
Sponsor/UGC bağlantılar doğru etiketli
Preload/prefetch/preconnect ölçümlenerek kullanıldı
rel öznitelikleri hem <a> hem <link> bağlamında doğru etiketlendi

Sonuç

rel="…" değerleri küçük bir öznitelik gibi görünse de; sinyal konsolidasyonu (canonical), bağlam bildirimi (sponsored/ugc/nofollow), güvenlik (noopener/noreferrer) ve hız (preload/prefetch/preconnect) gibi kritik alanlarda fark yaratır. Doğru kullanıldığında tarayıcıya da arama motoruna da net niyet bildirir; yanlış kullanıldığında ise tarama/bütçe/sinyal kaybına yol açabilir.