On-Page SEO: Görsel ve Bağlantı Optimizasyonu

📚 Seviye 2 — SEO Uygulama ⏱ ~8 dakika

📌 Nereden Geliyoruz?

1.3 SEO Nedir? dersinde On-Page SEO kavramını tanımıştık. Bir önceki derste (2.2.2) title tag, meta description ve URL yapısını işledik. Şimdi On-Page SEO'nun devamı olarak görsel optimizasyonu, dahili bağlantı stratejisi ve harici bağlantı kurallarını uygulayacağız.

1. Görsel Optimizasyonu

Görseller sayfanın yüklenmesini en çok yavaşlatan unsur olabilir. Doğru optimize edilmiş görseller hem hız hem de Google Görseller trafiği kazandırır.

a) Dosya Adı

Görseli yüklemeden önce dosya adını anlamlı yap. IMG_2847.jpg yerine istanbul-dis-implant-oncesi-sonrasi.jpg kullan.

b) Alt Text (Alternatif Metin)

Görsel yüklenmediğinde veya ekran okuyucu kullanıldığında gösterilen metin. Google görseli anlamak için alt text'e bakar.

Kötü: alt="resim" veya alt=""
İyi: alt="İstanbul diş implant tedavisi öncesi ve sonrası karşılaştırma fotoğrafı"

🚫 Yaygın Yanılgı

❌ Yanlış: "Alt text'e sadece anahtar kelime yaz"

✅ Doğru: Alt text'in birincil amacı görselin ne gösterdiğini tanımlamaktır — erişilebilirlik ve görsel arama için. alt="diş implant diş implant fiyat" yerine alt="İstanbul diş implant tedavisi öncesi ve sonrası karşılaştırma" yaz. Görseli doğal dille tanımla, anahtar kelme organik olarak zaten dahil olur.

c) Görsel Formatları Karşılaştırması

Doğru format seçimi, sayfa hızını dramatik şekilde etkiler. Aşağıdaki tablo her formatın avantaj, dezavantaj ve kullanım alanlarını özetler:

Format	Avantaj	Dezavantaj	Ne Zaman Kullan
JPEG/JPG	Küçük boyut, fotoğraflarda iyi	Şeffaflık yok, kayıplı sıkıştırma	Fotoğraflar, arka plan görselleri
PNG	Şeffaflık destekler, kayıpsız	Dosya boyutu büyük	Logo, ikon, şeffaf arka plan gereken görseller
WebP	JPEG'den %25-35 daha küçük, şeffaflık destekler	Çok eski tarayıcılar desteklemeyebilir	Modern web'de hemen her yerde (önerilen format)
AVIF	WebP'den bile küçük dosya boyutu	Tarayıcı desteği henüz sınırlı	İleri düzey optimizasyon
SVG	Vektörel, sonsuz ölçeklenebilir, çok küçük	Fotoğraflar için uygun değil	Logo, ikon, diyagram
GIF	Animasyon destekler	Renk sınırlı (256), büyük boyut	Basit animasyonlar (video tercih edilmeli)

💡 Boyut Farkının Etkisi

Aynı görselin 1MB'lık JPEG versiyonu vs 100KB'lık WebP versiyonu — PageSpeed skorunda dramatik fark yaratır. Özellikle mobil kullanıcılar için her KB önemlidir. Bir sayfada 10 görsel varsa fark 9MB'a ulaşabilir — bu 3G bağlantıda 30+ saniye ek yükleme süresi demek.

d) Sıkıştırma ve Performans

Sıkıştırma araçları: TinyPNG, ShortPixel, Squoosh — görselleri kaliteden ödün vermeden küçültür.
Boyut belirle: width ve height attribute'ları ile görselin boyutunu HTML'de belirt — CLS (layout kayması) sorunlarını önler.

e) Lazy Loading

Sayfanın altındaki görseller, kullanıcı o bölgeye scroll ettiğinde yüklenir. Böylece ilk yükleme süresi kısalır.

<img src="gorsel.webp" alt="Açıklama" loading="lazy" width="800" height="450">

Kritik: Sayfanın üst kısmındaki (above-the-fold) görsellere lazy loading ekleme — onlar hemen yüklenmeli.

f) Srcset ve Responsive Görseller

Farklı ekran boyutlarına farklı boyutta görsel sunarak hem mobilde hem masaüstünde optimal performans sağla:

<img
  srcset="gorsel-400.webp 400w,
          gorsel-800.webp 800w,
          gorsel-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1024px) 800px,
         1200px"
  src="gorsel-800.webp"
  alt="Açıklayıcı alt text"
  loading="lazy"
>

Tarayıcı, ekran boyutuna ve çözünürlüğe göre en uygun görseli otomatik seçer.

g) Alt Text Yazma Kuralları

Görseli tanımla: Gözü kapalı birine görseli anlatır gibi yaz.
Anahtar kelime içer ama spam yapma: Doğal bir cümle içinde anahtar kelimeyi kullan.
Erişilebilirlik: Ekran okuyucu kullanan görme engelli kullanıcılar alt text'i duyar — anlamlı olsun.
Kısa tut: 125 karakteri geçme.
"Resmi", "görseli" kelimelerini kullanma: Ekran okuyucu zaten bunun bir görsel olduğunu söyler.

h) Dosya Adı Optimizasyonu

Kameradan gelen varsayılan dosya adlarını anlamlı hale getir:

Kötü	İyi
`IMG_20240315.jpg`	`istanbul-dis-implant-tedavisi.webp`
`photo_2025.png`	`seo-danismanligi-sonuclari.webp`
`DSC_0042.jpeg`	`klinik-ic-mekan-fotografi.webp`

🎯 Mini Görev

Şu 3 dosya adını SEO uyumlu şekilde yeniden isimlendir: 1) IMG_20240315.jpg 2) DİŞ KLİNİĞİ FOTO.png 3) ürün_foto (1).jpeg

i) Gorsel Isimlendirme Kurallari — Detayli Rehber

Gorsel dosya adlari hem SEO hem de dosya yonetimi acisindan kritik oneme sahiptir. Asagidaki kurallara uy:

Turkce karakter kullanma: s→s, c→c, o→o, u→u, g→g, i→i donusumleri uygula
Tamami kucuk harf olmali: BUYUK HARF kullanma
Bosluk yerine duz cizgi (tire) kullan: "dis implant" → "dis-implant"
Alt cizgi (_) kullanma, tire (-) kullan: Google tire'yi kelime ayirici olarak okur, alt cizgiyi okumaz
Latin karakterler kullan: Özel karakter, noktalama isareti kullanma
Gorseli tanimlayici olsun: "IMG_20240315.jpg" degil, "istanbul-dis-implant-tedavisi.webp"
Sifatlar kullanilabilir: "modern-dis-klinigi-ic-mekan.webp"
Çok uzun olmasin: 3-6 kelime ideal

Isimlendirme Ornekleri

Kotu	Iyi	Neden
`IMG_20240315_143022.jpg`	`istanbul-dis-implant-tedavisi.webp`	Tanimlayici, SEO uyumlu, WebP format
`DIS_KLINIGI_FOTO.png`	`dis-klinigi-ic-mekan.webp`	Kucuk harf, Turkce karakter yok, tire kullanilmis
`urun_foto (1).jpeg`	`organik-yuz-serumu-30ml.webp`	Alt cizgi yok, parantez yok, tanimlayici
`slider-1.jpg`	`yaz-indirimi-kampanya-banner.webp`	Anlamli isim, slayt numarasi degil
`foto.jpg`	`ankara-avukat-ofisi-dis-cephe.webp`	Konum + konu + detay

Neden Önemli?

Google Gorsel Arama'da siralama faktoru: Dosya adi Google'in gorselin konusunu anlamasina yardimci olur
Alt text ile birlikte calisir: Dosya adi + alt text = gorselin ne hakkinda olduğunu Google'a anlatır
Dosya adi URL'nin bir parcasi olur: site.com/images/istanbul-dis-implant.webp seklinde gorunur
Düzgün isimlendirme = organik gorsel trafigi: Google Gorseller'den gelen trafik önemli bir kaynak olabilir

Toplu Isimlendirme Ipucu

Mevcut gorselleri yeniden isimlendirirken URL degisecegi için eski URL'leri yonlendirmeyi unutma
Yeni yuklenen her gorseli YUKLEMEDEN ONCE isimlendir — sonradan degistirmek zor ve URL değişikliği gerektirir

graph LR GO["🖼️ Görsel Optimizasyonu"] G1["📛 Dosya Adı
Anlamlı isim"] G2["📝 Alt Text
Açıklayıcı metin"] G3["📦 Sıkıştırma
WebP + TinyPNG"] G4["⏳ Lazy Loading
loading=lazy"] G5["📐 Boyut
width + height"] GO --> G1 GO --> G2 GO --> G3 GO --> G4 GO --> G5 style GO fill:#29ABE2,stroke:#1E8EBF,color:#fff,stroke-width:2px style G1 fill:#E8F6FC,stroke:#29ABE2,stroke-width:2px style G2 fill:#E8F6FC,stroke:#29ABE2,stroke-width:2px style G3 fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style G4 fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px style G5 fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px

2. Dahili Bağlantı (Internal Linking) Stratejisi

Dahili bağlantılar, sitenin kendi sayfaları arasındaki bağlantılardır. Google'ın sitenin yapısını anlamasına, link equity (bağlantı değeri) dağılımına ve kullanıcı deneyimine doğrudan etki eder.

a) Neden Önemli?

Taranabilirlik: Googlebot dahili bağlantıları takip ederek yeni sayfaları keşfeder.
Link equity dağılımı: Güçlü sayfalardan zayıf sayfalara bağlantı vererek otoriteyi dağıtırsın.
Kullanıcı deneyimi: Kullanıcıyı ilgili içeriklere yönlendirirsin, sitede kalma süresi artar.

b) Anchor Text (Bağlantı Metni)

Bağlantının tıklanabilir metni — buna anchor text denir. Google, anchor text'e bakarak hedef sayfanın ne hakkında olduğunu anlar.

Kötü: "buraya tıklayın", "bu sayfa", "daha fazlası"
İyi: "diş implant fiyatları rehberimiz", "on-page SEO optimizasyonu"

📌 Pratik İpucu

Her yeni içerik yayınladığında, mevcut içeriklerden yenisine ve yenisinden mevcut içeriklere bağlantı eklemeyi unutma. Bu iki yönlü bağlantı hem Google'ın yeni sayfayı keşfetmesini hızlandırır hem de eski sayfanın da değerini artırır.

c) Site İçi Linkleme Kuralları — Detaylı Rehber

1. Anchor Text (Bağlantı Metni) Kuralları

Anchor text = link verdiğin kelimenin kendisi. Google bu kelimeye bakarak hedef sayfanın ne hakkında olduğunu anlar. Bu yüzden anchor text seçimi son derece önemlidir.

Kötü Anchor Text	İyi Anchor Text	Neden
"buraya tıklayın"	"diş implant tedavisi"	Google "buraya tıklayın"dan sayfa konusunu anlayamaz
"örneğin"	"Google Ads kampanya yapısı"	"Örneğin" kelimesine link vermek anlamsız — Google bu kelimeyi hedef sayfayla ilişkilendirir
"detaylar için tıklayın"	"SEO anahtar kelime araştırması rehberi"	Tanımlayıcı anchor text hem kullanıcıya hem Google'a sayfa içeriğini anlatır
"burada"	"iletişim sayfamız"	"Burada" kelimesi hiçbir SEO değeri taşımaz
"bu yazımızda"	"içerik pazarlama stratejisi yazımızda"	Bağlam veren anchor text kullan

KURAL: Anchor text, hedef sayfanın konusunu tanımlamalı. "Örneğin", "buraya", "tıklayın" gibi genel kelimelere link verme — bu Google'a yanlış sinyal verir ve SEO değeri taşımaz.

⚠️ Gerçek Hayat Hatası: "Örneğin" Kelimesine Link Vermek

Yanlış: "İletişim sayfamıza ulaşmak için örneğin buraya tıklayabilirsiniz." — "örneğin" kelimesine iletişim sayfası linki verilmiş. Google "örneğin" kelimesini iletişim sayfasıyla ilişkilendirir — bu hem anlamsız hem zararlı.

Doğru: "Bize ulaşmak için iletişim sayfamızı ziyaret edebilirsiniz." — "iletişim sayfamızı" ifadesine link verilmiş — Google hedef sayfanın iletişim hakkında olduğunu anlar.

2. Link Verirken Dikkat Edilecekler

İlgili sayfalar arasında link ver — alakasız sayfalara link verme
Doğal akış içinde ver — zorla araya sıkıştırma
Her sayfadan her sayfaya link verme — önemli sayfalara öncelik ver
Orphan page bırakma — her sayfaya en az 1 iç bağlantı olmalı
Aynı anchor text'i farklı sayfalara verme — Google hangisine gideceğini karıştırır
Çok fazla link koyma — bir sayfada 100+ iç link varsa değer sulanır
Footer/sidebar link spam yapma — içerik içindeki bağlamsal linkler daha değerli

3. İç Linkleme Stratejisi

Pillar page (sütun sayfa) → cluster (alt konu) sayfalarına link ver
Cluster sayfalarından pillar page'e geri link ver
Yeni blog yazısından ilgili eski yazılara link ver
Eski yazılardan yeni yazılara link ekle — bu sık unutulan ama çok değerli bir adım!
Yüksek otoriteli sayfalardan (ana sayfa, popüler blog) düşük otoriteli sayfalara link ver — link juice aktar

graph TD PP["📄 Pillar Page
Diş İmplant Rehberi"] C1["📄 Cluster 1
İmplant Fiyatları"] C2["📄 Cluster 2
İmplant Türleri"] C3["📄 Cluster 3
İmplant Bakımı"] C4["📄 Cluster 4
İmplant Süreci"] PP -->|"diş implant fiyatları"| C1 PP -->|"implant türleri karşılaştırması"| C2 PP -->|"implant sonrası bakım"| C3 PP -->|"implant tedavi süreci"| C4 C1 -->|"diş implant rehberi"| PP C2 -->|"diş implant rehberi"| PP C3 -->|"diş implant rehberi"| PP C4 -->|"diş implant rehberi"| PP C1 <-->|"implant türleri ve fiyatları"| C2 C3 <-->|"tedavi sonrası bakım"| C4 style PP fill:#29ABE2,stroke:#1E8EBF,color:#fff,stroke-width:2px style C1 fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style C2 fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style C3 fill:#E8F6FC,stroke:#29ABE2,stroke-width:2px style C4 fill:#E8F6FC,stroke:#29ABE2,stroke-width:2px

📌 Mermaid Diyagramını Oku

Oklar üzerindeki metinler anchor text örneklerini gösteriyor. Pillar page'den cluster sayfalara giderken her link, hedef sayfanın konusunu tanımlayan anchor text kullanıyor. Cluster sayfalar da pillar page'e "diş implant rehberi" anchor text'i ile geri dönüyor. Bu yapı Google'a net bir konu hiyerarşisi sinyali verir.

🚫 Site İçi Linklerde ASLA UTM Parametresi Kullanma!

Neden?

Oturum kaynağını sıfırlar: Kullanıcı Google'dan organik olarak geldi (source: google/organic). Site içinde UTM'li bir linke tıkladı → GA4 yeni bir oturum başlatır ve kaynağı "site_ici/banner" olarak yazar. Artık bu kullanıcı "organik" değil, "site_ici" olarak görünür → organik trafik veriniz yanlış düşer.
Dönüşüm attribution'ı bozulur: Kullanıcı organik trafik olarak form doldursa bile, son tıklama "site_ici" UTM'li link olduğu için GA4 dönüşümü organik'e değil site_ici'ne yazar.
Veri kirliliği: GA4 raporlarında "site_ici" diye anlamsız bir kaynak görünür, gerçek trafik kaynaklarını maskeleyerek analizi imkansız hale getirir.

Örnek:

❌ Yanlış: <a href="/urunler?utm_source=site_ici&utm_medium=banner&utm_campaign=slider">Ürünler</a>

✅ Doğru: <a href="/urunler">Ürünler</a>

UTM sadece DIŞ kaynaklı trafikte kullanılır: reklam, e-posta, sosyal medya paylaşımı. Site içi navigasyonda ASLA.

3. Harici Bağlantılar (External Links)

Sayfandan başka sitelere verdiğin bağlantılar da önemli bir SEO sinyalidir.

a) Neden Harici Bağlantı Vermelisin?

Güvenilirlik: Otoriter kaynaklara referans vermek içeriğinin güvenilirliğini artırır.
Kullanıcı değeri: Kullanıcıya ek kaynak sunmak deneyimi zenginleştirir.
Konu bütünlüğü: Google, harici bağlantılardan sayfanın hangi konuyla ilgili olduğunu anlar.

b) rel Attribute'ları

rel="nofollow": "Bu bağlantıyı takip etme, link equity aktarma" — güvenmediğin veya reklam/sponsorlu bağlantılar için.
rel="sponsored": Ücretli/sponsorlu bağlantılar için.
rel="ugc": Kullanıcı tarafından oluşturulan içerik (yorum, forum) için.
Dofollow (varsayılan): rel belirtmezsen bağlantı dofollow'dur, link equity aktarır.

graph TD OP["🔧 On-Page SEO Kontrol Listesi"] D["✅ Domain ve URL
Kısa domain, alt klasör
Temiz URL yapısı"] T["✅ Title Tag
50-60 karakter
Kelime başta"] M["✅ Meta Description
150-160 karakter
CTA içerir"] H["✅ Heading Hiyerarşisi
1 adet H1
Mantıksal sıra"] U["✅ URL Yapısı
Kısa, anlamlı
Tire ile ayır"] G["✅ Görseller
WebP, alt text
Lazy load, srcset"] IL["✅ Dahili Bağlantılar
İlgili sayfalar
Anlamlı anchor"] EL["✅ Harici Bağlantılar
Otoriter kaynaklar
Doğru rel attr"] OP --> D OP --> T OP --> M OP --> H OP --> U OP --> G OP --> IL OP --> EL style OP fill:#29ABE2,stroke:#1E8EBF,color:#fff,stroke-width:2px style D fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style T fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style M fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style H fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style U fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style G fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style IL fill:#DCFCE7,stroke:#22C55E,stroke-width:2px style EL fill:#DCFCE7,stroke:#22C55E,stroke-width:2px

⚠️ Sık Yapılan Hatalar

Hata: Görsellere alt text eklememek
Doğrusu: Her görselde tanımlayıcı alt text olmalı. Hem erişilebilirlik hem de görsel aramada sıralama için kritik.
Hata: İç bağlantıları "buraya tıklayın" metniyle vermek
Doğrusu: Anlamlı anchor text kullan. "SEO rehberimizi inceleyin" gibi açıklayıcı metinler hem kullanıcı hem Google için daha değerli.

🎯 Bu Dersten Öğrenmen Gerekenler

Görsellere anlamlı dosya adı, açıklayıcı alt text ve WebP formatı uygulayarak hem hız hem görsel arama trafiği kazanabilirsin.
Dahili bağlantılarda anlamlı anchor text kullanabilir, "buraya tıklayın" gibi genel ifadelerden kaçınabilirsin.
Site içi linklerde UTM parametresi kullanmanın neden GA4 verilerini bozduğunu açıklayabilirsin.
Harici bağlantılarda rel="nofollow", rel="sponsored" ve rel="ugc" attribute'larını doğru yere koyabilirsin.

📝 Quiz — Bilgini Test Et

← Önceki Ders Sonraki Ders →