Günümüzde bir web uygulaması yapıldığında mutlaka az ya da çok JavaScript kullanılmaktadır. Bilhassa frontend frameworkleri bu kadar yaygınken geliştirilecek proje bir landing page olsa bile JavaScript işin içine girmektedir. Bu da aslında çok normal çünkü web sayfalarını oluşturmak ve kontrolünü sağlamak için mükemmel bir programlama dilidir.
SEO ve JavaScript arasındaki ilişki uzun süredir tartışılan bir konu olmuştur. JavaScript önceleri sadece client side olarak çalışıyordu ancak günümüzde bilindiği üzere server-side için de oldukça yetenekli bir programlama dili haline geldi. Bu gelişimin sonucunda, JavaScript ile yazılmış web sayfalarının arama motoru değerini artırmak için JavaScript’i SEO uygulamalarıyla eşleştirmenin yolunu açmıştır.
Peki bu JavaScript SEO tam olarak ne?
JavaScript SEO, JavaScript ile oluşturulmuş web sitelerini arama motorlarında görünecek şekilde optimize etmeye odaklanır. Öncelikle içerik optimizasyonu ile ilgilenir, en iyi uygulamaları kullanarak web sayfalarının arama motorları tarafından keşfedilmesini sağlar, sayfa yükleme sürelerini hızlandırır.
Arama motorunun JavaScript’i nasıl işler
Google’da oluşturma işlemini gerçekleştiren sisteme Web Oluşturma Hizmeti (WRS) denir. Google, bu sürecin nasıl çalıştığını açıklamak için basit bir şema sağlamıştır.
- Googlebot, sayfaları hem tarama hem de oluşturma için sıraya koyar. Bir sayfanın ne zaman taranmayı ve ne zaman oluşturulmayı beklediği hemen belli olmaz.
- Googlebot, bir HTTP isteği yaparak tarama kuyruğundan bir URL getirdiğinde, öncelikle taramaya izin verilip verilmediğini kontrol eder. Bunun için Googlebot, robots.txt dosyasını okur. URL izin verilmeyen olarak işaretlenmişse, Googlebot bu URL için HTTP isteğinde bulunmayı atlar ve izin verilmemiş URL böylelikle es geçilmiş olur.
- Googlebot daha sonra HTML bağlantılarının href özelliğindeki diğer URL’lerin yanıtını ayrıştırır ve URL’leri tarama kuyruğuna (crawl queue) ekler. Eğer bu gezinmeyi önlemek (link discovery) istenirse nofollow mekanizmasını kullanılmalıdır.
- URL tarama işlemi serverdan gelen HTML çıktısını yorumladığında doğru sonucu verir. Bazı JavaScript ile oluşturulmuş siteler, HTML’e asıl içeriği ilk başta göndermediği için yorumlamada bazı sorunlar oluşmaktadır. Bu durumda, Google’ın JavaScript’in oluşturduğu asıl sayfa içeriğini görebilmesi için uygulama kabuğu modelini (app shell model) kullanabilir.
- Bir robots meta tag veya başlığı Google’a sayfayı dizine eklememesini söylemediği sürece, Googlebot tüm sayfaları oluşturma için sıraya koyar. Sayfa birkaç saniye bu kuyrukta kalabilir veya bu süre biraz daha uzayabilir. Google’ın kaynakları izin verdiğinde, bir Chromium sayfayı oluşturur ve JavaScript’i çalıştırır. Googlebot, oluşturulan HTML çıktısını bağlantılar için yeniden ayrıştırır ve bulduğu URL’leri tarama için sıraya koyar. Google ayrıca sayfayı dizine eklemek için oluşturulan HTML çıktısını kullanır.
- Şunu unutmamak gerekir ki server tarafından oluşturulan çıktının yorumlanması her zaman daha doğru sonuç verir.
JavaScript SEO, tam olarak ne ile ilgilenir
Modern web uygulamalarında JavaScript çok önemli yer kaplar. Ön yüz için çoğunlukla bir Frontend Framework kullanılmaktadır. Javascript SEO da burada;
- Angular, React ve Vue gibi JavaScript üzerine kurulu tek sayfa uygulamaları (SPA) ve web sitesi için sıralama sorunlarını önleme, sorun giderme ve tanılama.
- Arama motorları tarafından oluşturma, tarama (crawling) ve dizine ekleme için JavaScript aracılığıyla oluşturulan içeriğin optimizasyonu.
- Kolaylaştırılmış bir kullanıcı deneyimi için JavaScript kodu çalıştıran sayfaların sayfa yükleme sürelerini iyileştirme.
gibi konularla ilgilenir.
JavaScript SEO Sorunları
Navigation
Yukarıda da bahsedildiği gibi JavaScript Googlebot tarafından her zaman takip edilemeyebilir. Bunun başlıca sebepleri;
- Web sitesindeki yetkiler uygun şekilde dağıtılmamıştır.
- Google’ın dahili sayfaları keşfetmesi daha zordur.
- Web sitesindeki sayfalar arasında ilişki kurmak belirsizdir.
Ideal olarak navigasyon, cihazlar ve tarayıcılar arasında tutarlı bir şekilde erişilebilir olmalıdır. Bu yüzden JavaScript olmayan menüleri tercih edilmelidir. Menü aksiyonları JavaScript’e ihtiyaç duysa da linklemelerde bu durum unutulmamalıdır.
Internal Links
Google, bir kullanıcının yaptığı gibi sayfadan sayfaya gezinmez. İşlemenin bir kısmı, sayfayı oluşturmak için gereken diğer sayfalara ve dosyalara bağlantılar için sayfayı kontrol etmektir. Bu bağlantılar çıkarılır ve tarama sırasına eklenir; bu, Google’ın taramayı önceliklendirmek ve planlamak için kullandığı şeydir.
Google, <link> etiketleri gibi şeylerden bir sayfa oluşturmak için gereken kaynak bağlantılarını (CSS, JS vb.) çeker. Ancak, Google’ın onları bağlantı olarak ele alması için diğer sayfalara verilen bağlantıların belirli bir biçimde olması gerekir. Dahili ve harici bağlantıların, href attribute’e sahip bir <a> etiketi olması gerekir. Arama dostu olmayan JavaScript kullanan kullanıcılar için bunun çalışmasını sağlamanın birçok yolu vardır.
Örneklerle anlatmak gerekirse;
İyi
<a href=”/page”>olmasi gereken</a>
<a href=”/page” onclick=”goTo(‘page’)”>bu da kabul edilebilir</a>Kötü
<a onclick=”goTo(‘page’)”>href yok</a>
<a href=”javascript:goTo(‘page’)”>eksik bağlantı</a>
<a href=”javascript:void(0)”>eksik bağlantı</a>
<span onclick=”goTo(‘page’)”>yanlış HTML tag'i</span>
<option value="page">yanlış HTML tag'i</option>
<a href=”#”>link yok</a>Client-Side Rendering
Angular, React ve Vue gibi JavaScript üzerine kurulan web sitelerinin tümü, varsayılan olarak bir CSR veya istemci tarafı oluşturma (client side)olarak ayarlanır. Ancak sorun, Google tarayıcılarının sayfada ne olduğunu görememesidir; sadece boş bir sayfa görecekler. Çünkü burada tüm işlemler dinamik olarak yapılıp bir tane HTML içerisinde eklenip çıkarılmaktadır. Örnek olarak buraya bakılabilir.
Google’ın JavaScript sitelerinizi Google tarafından dizine eklenmesine yardımcı olmanın yolu olarak Google Dynamic Rendering isminde bir teknoloji tanıtmıştır. İlgili sunuma buradan ulaşılabilir.
Çözümlerden biri, daha geleneksel bir seçim olan Server Side Rendering (SSR) kullanmaktır. Ancak SSR kullandığınızda, yalnızca Client Side Rendering (CSR) ile elde edebileceğiniz kullanıcı deneyimi avantajlarını kaybedebilirsiniz.
Sunucu tarafı oluşturma için, dinamik oluşturma, tarayıcıda oluşturulan JavaScript içeriğine ancak statik bir Googlebot sürümüne sahip bir web sitesini kullanıcılara sunmak için alternatif ve uygulanabilir bir çözümdür. Dinamik oluşturmanın nasıl çalıştığı aşağıda açıklanmıştır.
Content duplication
Yinelenen (duplicate) içerik, işlemeye gönderilmeden önce indirilen HTML’den kaldırılabilir veya öncelikleri kaldırılabilir. Uygulama kabuğu modellerinde (app shell model), HTML yanıtında çok az içerik ve kod gösterilebilir. Aslında, sitedeki her sayfa aynı kodu görüntüleyebilir ve bu, birden fazla web sitesinde gösterilen aynı kod olabilir. Bu, bazen sayfaların kopya olarak değerlendirilmesine ve hemen işlemeye gitmemesine neden olabilir.
Daha da kötüsü, arama sonuçlarında yanlış sayfa veya hatta yanlış site görünebilir. Bu, zamanla kendi kendine çözülmelidir, ancak özellikle yeni web sitelerinde sorunlu olabilir.
JavaScript SEO Best Practices
Server Side Rendering (SSR)
Sunucu tarafı oluşturma (SSR), bir uygulamanın sunucudaki HTML dosyalarını istemci (client) için tam olarak oluşturulmuş bir HTML sayfasına dönüştürme durumudur. Web tarayıcısı, istemciye tam olarak oluşturulmuş bir sayfa göndererek anında yanıt veren sunucudan bir bilgi talebi gönderir.
Artıları
- Arama motorları için önemli olan her öğe, ilk HTML yanıtında kolayca bulunur.
- Hızlı bir First Contentful Paint (FCP) sağlar.
Eksileri
- Slow Time to First Byte (TTFB) sorunu. Çünkü sunucunun web sayfalarını anında oluşturması gerekir.
Client Side Rendering (CSR) için işlem, kullanıcının tarayıcısı aracılığıyla gerçekleştirilir.
Dinamik İşleme (Dynamic Rendering), bir sunucunun, kimin istekte bulunduğuna bağlı olarak farklı yanıt vermesi anlamına gelir. Bu bir tarayıcıysa, sunucu HTML’yi işler ve bunu istemciye geri gönderir, oysa bir ziyaretçinin istemci tarafında işlemeye güvenmesi gerekir. Oluşturmanın en önemli yararı, sayfaların hızlı bir şekilde oluşturulabilmesidir. Sunucu tarafı oluşturma ayrıca tüm sayfa öğelerinin oluşturulmasını sağlar. Eksi yönü ise hata ayıklama (debugging) sorunlarını daha karmaşık hale getirir.
Tek Sayfalı Uygulamalarda (Single Page Application) 404 Hatası
Single Page Application (SPA) söz konusu olduğunda, Soft 404 Hatalarını kullanmaktan kaçının. Bunun yerine, HTTP istekleri yaparken bir 404 hatasıyla karşılaştığınızda, bulunamayan bir sayfaya yönlendirmeyi düşünün. Bu şekilde, Google bunun bir 404 sayfası olduğunu bilecektir.
Soft 404 Hatası: Tıpkı standart bir “sayfa bulunamadı” hatası gibi kabul edilen, arama motorlarının ve kullanıcıların hedefledikleri sayfaya ulaşamaması durumuna verilen isimdir. Daha detaylı bilgiye buradan ulaşılabilir.
Örnekle açıklamak gerekirse;
HTTP Status Codes
Google, bir sayfayı tararken yanlış bir şey olup olmadığını öğrenmek için HTTP durum kodlarını dikkate almaktadır. Bu yüzden bir sayfanın dizine eklenemediğini veya taranamadığını Googlebot’a bildirmek için bulunamayan bir sayfa için 404 gibi anlamlı bir durum kodu kullanılmalıdır. Birçok JavaScript sitesinin, yönlendirmeler gerçekleştirmesine veya bir hata şablonu sunmasına rağmen her zaman 200 durum kodu kullanmakta. Kaynaklar yüklenirken sayfa 200 döndürdükten sonra kaynak JavaScript kullanılarak isteniyorsa bu olabilir. Ancak her durumda 200 dönmek oldukça yanlış bir yöntemdir.
HTTP kodları, bir sayfanın yeni bir URL’ye taşınıp taşınmadığını Googlebot’a bildirmek için de kullanılabilir, böylece indeks uygun şekilde güncellenebilir. Buradan HTTP durum kodlarına ve anlamlarına ulaşılabilir.
Tüm sayfaların benzersiz (unique) URL’leri olmalıdır
Sitenizdeki her sayfanın benzersiz bir URL’si olması gerekir; aksi takdirde Google, sitenizi keşfetmekte ve sayfalarınızın ne için sıralanması gerektiğini bulmakta gerçekten zorlanacaktır.
Google bunları çoğunlukla göz ardı edeceğinden, yeni sayfalar yüklemek için URL’lerdeki parçaları kullanmayın. Ziyaretçilerin https://example.com#about-us adresindeki “Hakkımızda” sayfanıza göz atması iyi olsa da, arama motorları genellikle parçayı dikkate almaz, yani bu URL hakkında bilgi edinmezler.
Bunlara ek olarak olabildiğinde detay sayfalarını slug mantığı ile oluşturulmalıdır. https://my-website.com/blog/1 yerine https://my-website.com/blog/javascript-seo şeklinde kullanım daha anlamlı olacaktır. Bu site keşfinde bir şey değiştirmese de SEO açısından önemli bir durumdur.
Oluşturmayı engelleyen JavaScript’i kaldırın
Oluşturmayı engelleyen JavaScript, web sayfanızın oluşturulmasını yavaşlatan JavaScript kodudur. Bu, kullanıcı deneyimi açısından kötüdür. Aynı zamanda Google’ın ilgili web sayfaları oluşturmasını mümkün olduğunca hızlı yapması için SEO açısından da kötüdür.
Fazladan ağ isteklerini (network request) önlemek için inline JavaScript kullanılabilir. Ancak bu yöntem yalnızca küçük kritik komut dosyaları için önerilir, çünkü <head> içindeki büyük JS kaynaklarını satır içine almak, botun sayfayı taraması için gereken süreyi artırır.
Bunun da ötesinde, lazy load olması gereken işlemleri belirleyip ona göre çalıştırmaya özen gösterilmelidir.
JavaScript önbelleğe alma (caching) özelliğinden yararlanın ve content-hashes kullanın
Google, web sitenizin kullanıcı deneyimini etkilememek için JavaScript’i önbelleğe alır. JavaScript kodunuz çok sık değişmiyorsa bu durum işinize gelecektir. Ancak bu çoğu site için geçerli bir durum olmamaktadır. Böyle siteler için, Google’ın en yeni sürümü hızlı bir şekilde çekmesine izin verebilmeniz gerekmektedir.
Aşağıdakiler gibi dosya adları dahil olmak üzere JavaScript dosya adlarınıza bir içerik karması ekleyin:
main.2a846fa617c3361f.js
example.117e1c5c1e1838c3.js
runtime.9bdf68f2f1992a3d.jsJavaScript kodunuz değiştiğinde, content-hashes güncellenir ve Google bunu istemeleri gerektiğini bilir. Bu tarz dosyaları, React, Vue, Angular gibi projelerde build aldığınızda mutlaka görmüşsünüzdür.
