JavaScript SEO Nedir?
CSR, SSR ve JavaScript SEO Fatih Battal ve JS Logosu

Javascript SEO

Yazıda Bulunan İçerik Başlıkları

Bu içerikte: 799 Kelime, 528 Özel Kelime, 6560 karakter, 77 cümle, 30 paragraf var. Fakat, 4 dakika içinde bu yazıyı okuyabilir misin?

Nedir?

Javascript temelli SEO hakkında genel olarak herkesin biraz da olsa fikri var. Temel olarak nereye yaradığını ve neden yapıldığı hakkında ise herhangi bir çözümleri sunan yok.

Bu konuda Google Developers kısmında o kadar çok kaynak paylaşıyor ki, araştırma yaparken ya da bu tarz komplike işlemleri olan programlama dillerinde ilk kaynağınız olması gereken bir alan. Neden böyle söylediğimi ise şöyle aktarayım sizlere;

JavaScript SEO temel kavramlarını anlama adresinden Google'ın yapmış olduğu kapsamlı açıklamaya ve yönergelere ulaşabilmeniz mümkün.

Öncelikle, Bot'un nasıl işlediğini bilmemiz faydamıza olur, bknz;

Googlebot JavaScript'i nasıl işler?

Googlebot, JavaScript web uygulamalarını üç ana aşamada işler:

  1. Tarama
  2. Oluşturma
  3. Dizine ekleme
Google Bot Nasıl Crawl Eder?
GoogleBot'un Crawl Şeması bu şekildedir.

JavaScript İşleme Çeşitleri Neler?

İki çeşit olarak ele alabiliriz, bunlardan biri kullanıcı taraflı işleme yapar bir diğeri ise uzak sunucu tarafında işleme sağlar. Yani kısaca kullanıcı tabanlı ve sunucu tabanlı olmak üzere ikiye ayrılır.

İngilizce ve bilinen adları ile Client-Side Rendering (CSR), Server-Side Rendering biçimindedir.

  1. Client-Side Rendering (Kullanıcı Taraflı İşleme)

    CSR bulunduğunuz sayfanın içeriğini ve bilgilerini yüklemek için sunucu tarafı yerine tarayıcı üzerinde JavaScript kullanır. Bu da sunucunun minimum HTML içeriğinin sizin tarafınıza ulaştırıldığı anlamına gelir. Örnek vermek gerekirse React tarafında verilen CSR örneği şöyle olur;

    <!DOCTYPE html>
    <html lang="en">
     <head>
       <meta charset="utf-8">
       <link rel="icon" href="/favicon.ico">
       <title>React ile Yapıyorum</title>
     </head>
     <body>
       <div id="root"></div>
       <script src="/app.js"></script>
     </body>
    </html>
    
  2. Server-Side Rendering (Sunucu Taraflı İşleme)

    Server-Side Rendering yani Sunucu Taraflı işleme, iş yükü ve işlemeleri sunucu tarafında sağlar. Sunucu, HTML sayfalarını dönüştürür ve tarayıcının Javascript'in indirilmesini ve yürütülmesini ve beklemesine gerek kalmadan tam anlamıyla oluşturulmaya ve görüntülenmeye hazır olan HTML dökümanı ile yanıt döndürür. Bu nedenle, SSR’ın ilk yükleme süresi CSR’den daha hızlıdır ve boş, beyaz sayfa olasılığını azaltır.

    SSR'ın da CSR gibi, sıkıntılı tarafı var. Tarayıcı yeni bilgilerin görüntülenmesini istediğinde, değişiklik ne kadar küçük olursa olsun sunucu yalnızca yeni içeriği değil, tüm sayfayı yeniden oluşturur. Bu nedenle, ilk sayfadan sonraki yükleme süresi daha uzun sürebilir.

Nasıl Eşsiz ve Harika JavaScript SEO Çalışması Yapabilirsiniz?

Öncelikle yapınızın ne kadar temiz ve anlaşılabilir olduğundan emin olarak bu işlemi yapabilirsiniz. Yani öncelikle çalışacağınız projenizin gerçekten temiz, anlaşılabilir ve net cevaplar veren yapısı olmalı. Bunun için de aşağıda bahsedeceğimiz başlıklara çok dikkat etmeli ve eksik olanları kullanmalısınız.

Alt başlığa geçmeden önce net olarak bilmemiz gereken HTTP Durum kodlarını paylaşmak istiyorum.

HTTP Durum KoduKullanılma Alanı / Bilgisi
301 / 302Sayfa Taşındı Kalıcı / Geçici
401 / 403Sayfa Yetkilenmemiş / Yasaklanmış
404 / 410Sayfa Bulunamıyor, yok / Sayfa Yayınsız
500 / 5xxSunucu Hatası / Hataları

Dikkat Edeceğimiz ve Kullanacağımız Özellik ve Bileşenler

  1. Schema / Yapısal Veri Sağlayacak Kodlar: Bu kodlara dikkat edin, özenli ve net bir şekilde sitenizde doğru yüklettiğinizden ve yüklendiğinden emin olun. Aksi halde sorunlar ile karşılaşabilirsiniz.
  2. Uyumlu kodlar yazarak içeriğinizi etkin kılabilirsiniz. Bu yöntem ile benzersiz olduğunu Google ve diğer Arama Motorlarına kanıtlarsınız.
  3. Snippet kullanımını çoğaltın ve Snippetler ile sitenizi düzenli, özel, görünebilir kılın.
  4. Eğer web siteniz ya da uygulamanız tek sayfadan oluşuyor ise 404 Hatalarından sitenizi koruyun. 404 hataları web sitenizin var olmadığını o anlık takip eden Googlebot'una iletir ve bu durum sitenizin otoritesini kaybetmesine neden olur. Hatalı sayfalar için geçici olarak sayfalarınızın etiketleri arasına kodlar ekleyin. Mesela;

    <meta name="robots" content="noindex">


    Örnek olarak verilen yönlendirme yaklaşımı Google Tarafından iletildi:
    fetch(`/api/products/${productId}`)
    .then(response => response.json())
    .then(product => {
     
    if(product.exists) {
        showProductDetails
    (product); // shows the product information on the page
     
    } else {
       
    // this product does not exist, so this is an error page.
        window
    .location.href = '/not-found'; // redirect to 404 page on the server.
     
    }
    })
    NoIndex yaklaşımı verecek örnek kod yapısı da aşağıdadır;
    fetch(`/api/products/${productId}`)
    .then(response => response.json())
    .then(product => {
     
    if(product.exists) {
        showProductDetails
    (product); // shows the product information on the page
     
    } else {
       
    // this product does not exist, so this is an error page.
       
    // Note: This example assumes there is no other meta robots tag present in the HTML.
       
    const metaRobots = document.createElement('meta');
        metaRobots
    .name = 'robots';
        metaRobots
    .content = 'noindex';
        document
    .head.appendChild(metaRobots);
     
    }
    })
  5. MetaRobot ve Meta Etiketlerinizi kullanırken gerçekten işlem uyguladığınız sayfaya uygun olduğundan lütfen emin olun. Aksi halde işlem yapmak istediğiniz ve içeriğinizin öne çıkmasını istediğiniz sayfanızda NoIndex Etiketi ile yayınlama yaparsanız web site sayfanız index almayacaktır. Bu da sizin istediğiniz o içeriğin arama motoru üzerinde olmamasına sebep olacak.
  6. Önbellekleme yani Cache'inizi uzun ömürlü ayarlayın. Minimum 7 Gün, Maksimum ise 365 Gün şeklinde işaretleme yapabilirsiniz. Bu tutarlılığınızı ve devamlılığınızı da destekleyecektir.
  7. Lazy-Load ve CDN seçeneği ile resim, Iframe ve videolarınızın yüklenmesini geç yükleme seçeneği ile kullanın. Bu sayede ilk olarak sitenizin text, başlık ve detayları yüklenecek, kullanıcı ilerlediği takdirde resim, video, iframe ve türevlerini indirecektir. Bu sebeple kullanıcıya verimli bir site sunarak, hem arama motorunda devamlılık hem de daha çok kullanıcıya ulaşabilmenizi sağlayacaktır.

Şimdilik bu içeriğimi devam edecek şekilde ayarlıyorum. Kendimi geliştirdiğim hergün bu içeriğimi de güncelleştirecek, sizlere daha faydalı bilgiler sunmaya devam edeceğim. Sorularınızı dilerseniz E-Mail adresimden, dilerseniz de yorumlar aracılığı ile iletebilirsiniz.

Sevgiler,

Fatih

This article was updated on 11 Ekim 2020

Fatih

90'lı yılların ümidi, geleceğin aleti olan bilgisayarla aynı yıllarda tanıştım. Donanımla başladığım teknoloji serüveni artık yerini dijital pazarlama, marketing ve SEO'ya bıraktı. 5 senelik gelişen bilgi birikimim ile kişisel blogum içerisinde SEO makaleleri, yazıları ve methodları paylaşıyorum.

Comments