JavaScript ve Dinamik İçerik

Açılış sahnesi

Kiralık ve satılık ev ilanları yayımlayan yeni bir platform, modern bir yazılım altyapısıyla kuruluyor. Site çok hızlı hissettiriyor: bir ilana dokunulduğunda sayfa yenilenmeden açılıyor, filtreler anında çalışıyor, fotoğraflar akıcı biçimde kayıyor. Platformun kurucuları sitelerinden gurur duyuyor.

Birkaç ay sonra arama trafiği neredeyse yok. Kurucular teknik danışmana başvuruyor ve danışman, bir ilan sayfasının tarayıcıda sağ tıklanıp açılan kaynak koduna bakıyor. Kaynakta ilanın ne başlığı, ne fiyatı, ne de açıklaması var; yalnızca boş bir kutu ve yükleniyor yazısı duruyor. İlanın bütün içeriği, sayfa açıldıktan sonra tarayıcıda çalışan kodlarla başka bir yerden çekilip ekrana yerleştiriliyor. Üstelik bütün ilan sayfalarının başlığı aynı: platformun adı.

Ziyaretçiler ilanları rahatça görüyordu. Ama arama motoru sayfanın kapısında önce boş bir kutuyla karşılaşıyor ve içinin dolmasını beklemek zorunda kalıyordu; bazen bekliyor, bazen beklemiyordu.

Bu derste ne olacak

Emlak platformu, dans ayakkabısı dükkânı, müzik okulu ve öbürleri bu ders için uydurduğum işletmeler; arama motorlarının kodla oluşan sayfaları nasıl işlediğini de belirli bir şirketin iç ayrıntıları üzerinden değil, genel işleyiş olarak anlatıyorum.

Emlak platformunun sorunu kodun kendisi değildi; kodun, içeriği arama motorunun göremeyeceği bir ana ertelemesiydi. Bu ders, bir sayfanın ilk halinde ne olduğuna ve arama motorunun o sayfayı son haline getirmek için neyi çalıştırması gerektiğine bakıyor. Önce sunucunun gönderdiği ilk hale ve arama motorunun bu hali nasıl işlediğine bakacağım. Sonra bu işlemin nerelerde aksayabileceğine ve bağlantıların kodla kurulduğu durumlara geçeceğim. Ardından içeriğin sunucuda hazırlanmasının nasıl bir çözüm olduğunu konuşacağım. Son olarak sonradan yüklenen içeriğin, dış kaynaklardan gelen bölümlerin ve teknik ekiple bu sorunları teşhis etmenin yollarına bakacağız.

Sıfır noktası

Bu akademinin ilk dersinde, bir mobilya atölyesinin eski işlerinin yalnızca bir düğmeye basıldığında yüklendiği için taranmadığını görmüştük. Bu kursun ilk dersinde tarama yönergesini ve dizin dışı yönergesini, bir önceki derste de sayfanın yüklenmesini ve dokunuşlara tepkisini konuşmuştuk.

Modern sitelerin pek çoğu, sayfanın içeriğini tarayıcıda çalışan kodlarla, sektördeki adıyla JavaScript ile oluşturuyor. Bu kodlar sayfaları hızlı ve etkileşimli yapıyor; ama içeriğin görünmesini, kodun çalışmasına bağlıyor. Bir okurun tarayıcısı bu kodu hemen çalıştırıyor. Arama motoru ise sayfayı önce ilk haliyle alıyor, kodu çalıştırıp son halini görmek için daha fazla kaynak harcıyor ve bu işi çoğu kez ayrı bir aşamada, bazen gecikmeyle yapıyor. Bu ders bir yazılım dersi değil; bir pazarlamacının, bir sayfanın içeriğinin arama motoruna ne zaman ve nasıl ulaştığını anlaması ve teknik ekiple doğru soruları konuşabilmesi için.

Mekanizma — sayfanın ilk hali

Bir sayfa istendiğinde, sunucu tarayıcıya bir kaynak gönderiyor. Bazı sitelerde bu kaynak sayfanın içeriğinin tamamını taşıyor; bazılarında ise yalnızca boş bir iskeleti ve içeriği sonradan getirecek kodları.

Sayfanın başlığı ve açıklaması da kodla sonradan eklendiğinde, arama motoru her sayfayı aynı başlıkla görebiliyor.

Mekanizma — arama motorunun kodu çalıştırması

Arama motoru, ham kaynağı aldıktan sonra sayfanın son halini görmek için kodları çalıştırıyor. Bu işlem her zaman sorunsuz yürümüyor.

İçeriğin uzun bir bekleme ya da bir kullanıcı hareketinden sonra gelmesi, arama motorunun onu hiç görmemesine yol açabiliyor.

Mekanizma — kodla kurulan bağlantılar

Arama motoru bir siteyi, sayfalardaki bağlantıları izleyerek keşfediyor. Ama bu bağlantıların arama motoru tarafından izlenebilmesi için, gerçek birer bağlantı olarak, yani gittikleri adresi taşıyan öğeler olarak kurulmuş olmaları gerekiyor.

Bazı sitelerde bir sayfanın farklı bölümleri, adres hiç değişmeden aynı sayfada gösteriliyor. Arama motoru için bu bölümlerin hepsi tek bir adrestir.

Mekanizma — içeriği sunucuda hazırlamak

Kodla oluşan içeriğin arama motoruna ulaşmasını güvenceye almanın en sağlam yolu, sayfanın içeriğini tarayıcıda değil sunucuda hazırlamak ve ham kaynağa koymak.

Usta katmanı — sonradan gelen, dışarıdan gelen, test edilen

Bazı içerikler, okur sayfayı kaydırdıkça yükleniyor. Bu yöntem sayfayı hızlandırıyor, ama arama motoru kaydırmadığı için bu içeriklerin bir kısmını hiç görmeyebiliyor.

Müşteri yorumları gibi bölümler çoğu kez dış bir hizmetten, sayfaya sonradan eklenen bir kutuyla geliyor. Bu içerik okur için görünür, ama arama motoru onu her zaman sayfanın parçası olarak görmüyor.

Bir sayfanın bazı bölümlerinin başka bir hizmetten gecikmeli gelmesi, önemli bilgilerin işlemede kaybolmasına yol açabiliyor.

Kodla oluşan sayfalarda, bir sayfanın bulunamadığını bildiren yanıt da çoğu kez yanlış kuruluyor.

Bir sitenin kodla oluşan içerik riskini görmenin en pratik yolu, ham kaynak ile işlenmiş sayfayı karşılaştırmak. Arama motorlarının yönetim panellerinde, bir sayfanın motorun gözünde nasıl işlendiğini gösteren bir önizleme de bulunabiliyor.

Bu sorunların çoğu teknik ekibin elinde; ama pazarlama ekibinin teknik ekiple ortak bir dil kurması, sorunların fark edilmesini hızlandırıyor.

Deneme yapmak için sayfanın içeriğini kodla değiştiren araçlar da, dikkatli kullanılmadığında arama motoruna farklı bir içerik gösterebiliyor.

Yaygın hatalar

Aklında kalsın

Ham kaynak, sunucunun gönderdiği ilk haldir. Arama için önemli bir sayfanın başlığı, açıklaması, ana metni ve bağlantıları ham kaynakta yer aldığında, arama motoru onları kod çalıştırmadan okuyabilir.

Sayfa işleme, arama motorunun kodları çalıştırarak sayfanın son halini oluşturmasıdır; daha fazla kaynak ister, gecikebilir ve kod dosyaları engellendiğinde, kodlar hata verdiğinde ya da içerik bir kullanıcı hareketi beklediğinde aksar.

Bağlantılar gittikleri adresi taşıyan gerçek bağlantılar olarak kurulur; yalnızca kodla çalışan düğmeler arama motoru için yol değildir ve her önemli içeriğin kendi adresi olur.

Sunucuda işleme, arama için önemli sayfaların içeriğinin ham kaynakta gönderilmesini sağlar; etkileşimli bölümler içerik geldikten sonra kodla canlandırılır. Ham kaynak ile işlenmiş sayfa düzenli olarak karşılaştırılır ve teknik ekiple ortak bir soru listesi, bu sorunların yayından önce fark edilmesini sağlar.

Sonraki derse köprü

Bu derste arama motorunun bir sayfanın içeriğini görebilmesini güvenceye aldık. Ama görmek, anlamakla aynı şey değil. Bir sayfada bir tarif, bir etkinlik, bir ürün ya da bir işletme anlatıldığında, arama motoru bunun bir tarif mi, bir etkinlik mi olduğunu, fiyatın, tarihin ve adresin hangi satırda durduğunu metinden çıkarmaya çalışıyor.

Sıradaki ders yapılandırılmış veriyi ele alıyor. Uygun sayfa türlerinde içeriğin anlamını arama motoruna açıkça işaretlemeyi ve bu işaretlemeyi doğrulama sürecini nasıl kuracağımızı orada göreceğiz.