Javascript SEO Nasil Yapilir

JavaScript SEO Nedir?

Nedir?

JavaScript SEO NEdir? Javascript 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?

GooglebotJavaScript web uygulamalarını üç ana aşamada işler:

  1. Tarama
  2. Oluşturma
  3. Dizine ekleme

Google Bot Crawl'unun çalışma Şekli

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.
  3. Statik Site Oluşturucular, Statik Siteler.

Statik Site Oluşturucular Nelerdir?

Günümüzde popülerleşen FrontEnd teknolojilerinin gelişmesi ile birlikte Statik Site Oluşturmak için araçlar, yazılımlar ve alt yapılar da çoğaldı. Bu konuda kontrol edebileceğiniz ve bilinen Static Site Generators şu şekildedir;

  • Staticgen.com tüm statik site oluşturuculara genel bir bakış sağlar.
  • Gatsby.js React Tabanlı bir statik site oluşturucudur..
  • Nuxt.js VueJS tabanlıdır.
  • Next.js React tabanlıdır, açık kaynak ile geliştirme de sunmaktadır.

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 Kodu Kullanılma Alanı / Bilgisi
301 / 302 Sayfa Taşındı Kalıcı / Geçici
401 / 403 Sayfa Yetkilenmemiş / Yasaklanmış
404 / 410 Sayfa Bulunamıyor, yok / Sayfa Yayınsız
500 / 5xx Sunucu 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.

JavaScript Web Site Tiplerinin Artıları ve Eksileri

JavaScript web site tiplerinin artılarını ve eksilerini daha anlaşılabilir olması için bir tablo ile göstermek istedim. Burada bulunan detaylarla göreceğiniz Server Side Rendering, Client Side Rendering, Static JavaScript Website tiplerinin olumlu ve olumsuz yanlarını anlayacaksınız.

Statik Site Artıları

  • Hızlıdır, tüm sistem sabit bir yapıda olduğu için verilerin gelmesi de aynı şekilde hızlıdır. Bu sebeple hız sorunu yaşanmaz.
  • Deployment kısmı basittir, çok vaktinizi almadan işlemlerinizi gerçekleştirebilirsiniz.
  • Güvenlidir çünkü yalnızca statik dosyalardan oluşur ve bir saldırganın kötü amaçlı kod enjekte ederek yararlanabileceği bir veritabanı yoktur. Bu nedenle, bir siber saldırıya karşı güvenlik açığı minimumdur.
  • İçeriğinizdeki değişiklikleri yönetmek ve izlemek için sürüm kontrol yazılımını (Git gibi) kullanabilirsiniz. Bu, içerikte yapılan değişiklikleri geri almak istediğinizde kullanışlıdır.

Statik Site Eksileri

  • İçerik çok hızlı değişirse, yetişmek zor olabilir. İçeriği güncellemek için web sitesini yeniden oluşturmanız gerekir. Yeniden oluşturma süresi uygulamanın boyutuna göre artar, haliyle bu da istediğiniz birşey değildir.

Server-Side Rendering Artıları

  • İçerik, hareket halindeyken getirildiği için günceldir.
  • Tarayıcı, içeriği kullanıcı için oluşturmadan önce sunucudan aldığı için web sitesi hızlı bir şekilde yüklenir.
  • JavaScript sunucu tarafında oluşturulduğundan, kullanıcının sayfanın yüklenme süresi üzerinde çok az etkisi vardır ve bu da daha iyi performans sağlar.

Server-Side Rendering Eksileri

  • İstek başına yapıldığı için sunucuya daha fazla API çağrısı yapılır.
  • Web sitesi CDN üzerine dağıtılamaz.

Statik Site Oluşturucular ve Server-Side Rendering Arasındaki Farklar Nelerdir?

Statik Site Oluşturucuların Detayları Server-Side Rendering Detayları
Statik bir CDN’e kolayca dağıtılabilir. Statik bir CDN’e dağıtılamaz.
İçerik ve sayfalar derleme zamanında oluşturulur. İçerik ve sayfalar istek başına oluşturulur.
Veri direkt olarak kullanıcıya ulaşır. İçerik her zaman günceldir.
Daha az API çağrısı vardır. Sadece derleme sırasında API kullanılır. Her yeni ziyaret, API çağrıları yapar.

Bonus: Google’dan JavaScript SEO için Tavsiyeler

Sonuç

Şimdilik bu içeriğimi devam edecek şekilde ayarlıyorum. Bu içeriğimle sizlere JavaScript SEO Nedir? Sorusunu cevaplayacak basit ama etkili bir içerik oluşturmayı denedim. 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

Total
0
Shares
Previous Post
Google Benim İsletmem Nedir

Google Benim İşletmem Nedir? Nasıl Kullanılır?

Next Post
how to install ghost on plesk panel 1

How to Install Ghost CMS on Plesk Hosting – 2021

Related Posts