Web Sitesi Kaynak Kodu Görüntüleme Yöntemleri

Bir web sitesinin arka planında nasıl çalıştığını, hangi etiketlerin kullanıldığını veya teknik SEO kurgusunu merak ediyorsanız, aradığınız cevap kaynak kodunda gizli. Web sayfası kaynak kodunu görmek, sayfanın yapısını, meta verilerini, schema işaretlemesini, yüklenen script ve stil dosyalarını doğrulamak için gereklidir. Peki bir sitenin html kaynak kodları nasıl görüntülenir? İşte adım adım kılavuzunuz…

Farklı tarayıcılar, web sayfası kaynak kodu incelemesi için ufak farklılıklar sunabilir. En temel ve sık kullanılan iki yaklaşım vardır: “Sayfa Kaynağını Görüntüle” ve “Geliştirici Araçları (DevTools)”. İşte en popüler tarayıcılarda adım adım bir sitenin html kodlarını görme:

# Google Chrome Sayfa Kaynağı Görüntüleme

Google Chrome, geliştiriciler ve SEO uzmanları tarafından en çok tercih edilen tarayıcıdır ve Chrome sayfa kaynağı görüntüleme işlemi oldukça basittir:

1. İncelemek istediğiniz web sayfasına gidin.
2. Sayfada boş bir alana sağ tıklayın.
3. Açılan menüden “Sayfa Kaynağını Görüntüle” seçeneğine tıklayın.
4. Yeni açılan sekmede Ctrl + F (Mac için Cmd + F) yaparak kodlar içinde spesifik bir kelime veya etiket (örneğin <title>) arayabilirsiniz.

⭐ Chrome Developer Tools – Profesyonel Analiz

Ham kaynak kodu yerine sayfanın tarayıcı tarafından nasıl yorumlandığını (DOM yapısını) ve anlık CSS değişikliklerini görmek istiyorsanız “Öğeyi İncele” (Inspect Element) özelliğini kullanmalısınız. Sayfaya sağ tıklayıp “İncele” diyerek (alternatif olarak F12 veya CTRL + SHIFT + I da kullanabilirsiniz) tuşuna basarak Developer Tools’a ulaşarak dinamik içerikleri görebilirsiniz.

• “Elements” Sekmesi (Canlı DOM)– Burada tarayıcıda render edilmiş hali görürsünüz.
  • Her elementi canlı düzenleyebilirsiniz.
  • CSS stillerini görebilirsiniz.
  • Hiyerarşik DOM yapısını inceleyebilirsiniz.
  • Hidden elementleri görebilirsiniz.
  • JS ile eklenen yapıları görebilirsiniz.
  • Lazy-load içerikleri analiz edebilirsiniz.
• “Sources” Sekmesi – Bu alanda:
  • .js dosyaları
  • .css dosyaları
  • font dosyaları
  • framework dosyaları
  • bundle yapıları görülür.
• “Network” Sekmesi– Bu kısım en kritik teknik analiz alanıdır. Burada şunları görürsünüz:
  • API çağrıları
  • JSON response’lar
  • AJAX istekleri
  • Fetch/XHR istekleri
  • CDN bağlantıları
  • Görsel yükleme yapısı
  • Script yükleme sırası
  • CSS render blocking dosyalar

# Safari Kaynak Kodu Görüntüleme

Apple ekosistemini kullanıyorsanız, Safari kaynak kodu görüntüleme işlemi için öncelikle “Geliştirici” menüsünü aktif etmeniz gerekir.

1. Safari’yi açın ve üst menüden Safari > Ayarlar (veya Tercihler) sekmesine tıklayın.
2. Gelişmiş sekmesine geçin.
3. En alttaki “Geliştirme menüsünü menü çubuğunda göster” kutucuğunu işaretleyin.
4. Artık herhangi bir sayfadayken Cmd + Option + U kısayolunu kullanabilir veya sağ tıklayıp “Sayfa Kaynağını Göster” diyebilirsiniz.

# Mobil Sayfa Kaynağı Görüntüleme (iOS ve Android)

Bilgisayar başında değilseniz ve acilen bir sitesinin sayfa kaynağını görme ihtiyacı duyarsanız, mobil cihazlarınızdan da bu işlemi yapabilirsiniz. Mobil sayfa kaynağı görüntüleme işlemi için tarayıcıların sunduğu bir komut vardır.

1. Telefonunuzda Chrome, Safari veya Firefox’u açın.
2. Adres çubuğuna dokunun ve kaynağını görmek istediğiniz sitenin URL’sinin en başına şu komutu ekleyin: view-source:
3. Örneğin adres şu şekilde görünmelidir: view-source:https://www.ornek.com
4. Git (veya Enter) tuşuna bastığınızda, sayfanın HTML kodları ekranınızda belirecektir.

📌 Eğer mobil cihazda kodlar çok küçük görünüyorsa, “Masaüstü Sitesi İste” seçeneğini aktif ederek görünümü düzenleyebilirsiniz.

# Dinamik İçerik ve JavaScript ile Oluşan HTML’yi Görüntüleme

Modern web siteleri içeriği JavaScript ile sonradan ekler. Bu durumda view-source sadece sunucunun gönderdiği ilk HTML’yi gösterir. Dinamik içeriği görmek için:

• DevTools → Elements: Render edilmiş DOM’u gösterir.
• Network → XHR/Fetch filtrelemesi: API taleplerini ve dönen JSON’u inceleyin.
• JavaScript çalıştırma sonucu oluşan HTML’yi kaydetmek için DevTools → sağ tık → “Edit as HTML” veya “Copy → Copy outerHTML”.

Sıkça Sorulan Sorular

1. Bir sitenin kaynak kodlarını görmek yasal mıdır?
   • Evet, tamamen yasaldır. Bir web sitesini ziyaret ettiğinizde, o sitenin sunucusu web sayfası kaynak kodu dosyalarını (HTML, CSS, JavaScript) doğrudan sizin tarayıcınıza gönderir. Sizin tarayıcınız bu kodları işleyerek görsel bir sayfaya dönüştürür. Yani kaynağı görüntülediğinizde, zaten bilgisayarınıza indirilmiş olan halka açık (public) verileri inceliyorsunuz demektir. Ancak, bu kodları kopyalayıp birebir kendi sitenizde kullanmak telif hakkı ihlaline girebilir.
2. “Sayfa Kaynağını Görüntüle” ile “Öğeyi İncele” arasındaki fark nedir?
   • “Sayfa Kaynağını Görüntüle” (View Page Source), sunucudan tarayıcıya ilk gelen, ham ve değiştirilmemiş HTML kodunu gösterir. “Öğeyi İncele” (Inspect Element) ise tarayıcının oluşturduğu DOM (Belge Nesne Modeli) yapısını gösterir. Eğer sayfada JavaScript ile sonradan yüklenen dinamik bir içerik (örneğin kaydırdıkça açılan ürünler) varsa, bunu “Sayfa Kaynağı”nda göremezsiniz; ancak “Öğeyi İncele” panelinde görebilirsiniz.
3. Kaynak kodunda aradığım bir bilgiyi nasıl hızlıca bulurum?
   • Kaynak kodunu açtığınız sekmede, klavyenizden Ctrl + F (Windows) veya Cmd + F (Mac) tuş kombinasyonuna basarak bir arama kutucuğu açabilirsiniz. Bu kutucuğa aradığınız kelimeyi (örneğin “description”, “h1” veya spesifik bir resim linki) yazdığınızda, tarayıcı o kelimeleri kod içinde sarı renkle vurgulayacaktır.