JavaScript SEO temellerini anlayın

JavaScript, web’i güçlü bir uygulama platformuna dönüştüren birçok özellik sunduğu için web platformunun önemli bir parçasıdır. JavaScript destekli web uygulamalarınızı Google Arama aracılığıyla keşfedilebilir hale getirmek, yeni kullanıcılar bulmanıza ve mevcut kullanıcıların web uygulamanızın sunduğu içeriği ararken onlarla yeniden etkileşim kurmanıza yardımcı olabilir. Google Arama, JavaScript’i güncel bir Chromium sürümüyle çalıştırsa da, optimize edebileceğiniz birkaç nokta bulunmaktadır.

Bu kılavuz, Google Arama’nın JavaScript’i nasıl işlediğini ve JavaScript web uygulamalarını Google Arama için iyileştirmeye yönelik en iyi uygulamaları açıklamaktadır.

Google JavaScript’i nasıl işler?

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

1. Tarama
2. Oluşturma (Rendering)
3. Dizin oluşturma

Googlebot, sayfaları hem tarama hem de oluşturma için kuyruğa alır. Bir sayfanın ne zaman tarama, ne zaman oluşturma için beklediği hemen anlaşılamaz. Googlebot, bir HTTP isteği yaparak tarama kuyruğundan bir URL aldığında, önce taramaya izin verip vermediğinizi kontrol eder. Googlebot, robots.txt dosyasını okur. Eğer URL’yi izin verilmeyen olarak işaretlerse, Googlebot bu URL’ye HTTP isteği yapmayı atlar ve URL’yi geçer. Google Arama, engellenen dosyalardan veya engellenen sayfalardan JavaScript oluşturmaz.

Googlebot daha sonra yanıtı, HTML bağlantılarının href özniteliğindeki diğer URL’ler için ayrıştırır ve bu URL’leri tarama kuyruğuna ekler. Bağlantı keşfini önlemek için nofollow mekanizmasını kullanın.

Bir URL’yi taramak ve HTML yanıtını ayrıştırmak, HTTP yanıtındaki HTML’nin tüm içeriği barındırdığı klasik web siteleri veya sunucu tarafında oluşturulan sayfalar için iyi çalışır. Bazı JavaScript siteleri, ilk HTML’nin gerçek içeriği içermediği ve Google’ın JavaScript tarafından oluşturulan gerçek sayfa içeriğini görebilmesi için JavaScript’i çalıştırması gereken uygulama kabuğu (app shell) modelini kullanabilir.

Googlebot, bir robots meta etiketi veya başlığı Google’a sayfayı dizine eklememesini söylemediği sürece, 200 HTTP durum koduna sahip tüm sayfaları oluşturma için kuyruğa alır. Sayfa bu kuyrukta birkaç saniye kalabilir, ancak bu süre daha uzun da sürebilir. Google’ın kaynakları izin verdiğinde, başsız (headless) bir Chromium sayfayı oluşturur ve JavaScript’i çalıştırır. Googlebot, oluşturulan HTML’yi bağlantılar için tekrar ayrıştırır ve bulduğu URL’leri tarama için kuyruğa alır. Google ayrıca sayfayı dizine eklemek için oluşturulan HTML’yi kullanır.

Sunucu tarafında veya ön oluşturma (pre-rendering) işlemlerinin, web sitenizi kullanıcılar ve tarayıcılar için hızlandırdığı ve tüm botlar JavaScript çalıştıramadığı için hala harika bir fikir olduğunu unutmayın.

Sayfanızı benzersiz başlıklar ve snippet’lerle tanımlayın

Benzersiz, açıklayıcı <title> öğeleri ve meta açıklamalar, kullanıcıların hedefleri için en iyi sonucu hızlıca belirlemelerine yardımcı olur. Meta açıklamayı ve <title> öğesini ayarlamak veya değiştirmek için JavaScript kullanabilirsiniz.

Canonical URL’yi ayarlayın

rel="canonical" bağlantı etiketi, Google’ın bir sayfanın canonical sürümünü bulmasına yardımcı olur. Canonical URL’yi ayarlamak için JavaScript kullanabilirsiniz, ancak canonical URL’yi orijinal HTML’de belirttiğinizden farklı bir URL ile değiştirmek için JavaScript kullanmamanız gerektiğini unutmayın. Canonical URL’yi ayarlamanın en iyi yolu HTML kullanmaktır, ancak JavaScript kullanmanız gerekiyorsa, canonical URL’yi her zaman orijinal HTML ile aynı değere ayarladığınızdan emin olun. Canonical URL’yi HTML’de ayarlayamıyorsanız, JavaScript kullanarak ayarlayabilir ve orijinal HTML’de bırakabilirsiniz.

Uyumlu kod yazın

Tarayıcılar birçok API sunar ve JavaScript hızla gelişen bir dildir. Google’ın desteklediği API’ler ve JavaScript özellikleri konusunda bazı sınırlamaları vardır. Kodunuzun Google ile uyumlu olduğundan emin olmak için JavaScript sorunlarını gidermeye yönelik kılavuzlarımızı takip edin.

İhtiyacınız olan eksik bir tarayıcı API’sini özellik algılama (feature-detect) ile tespit ederseniz, farklılaştırılmış sunum (differential serving) ve polyfill kullanmanızı öneririz. Bazı tarayıcı özellikleri polyfill ile desteklenemediğinden, olası sınırlamalar için polyfill belgelerini kontrol etmenizi öneririz.

Anlamlı HTTP durum kodları kullanın

Googlebot, sayfayı tararken bir sorun olup olmadığını anlamak için HTTP durum kodlarını kullanır.

Googlebot’a bir sayfanın taranamayacağını veya dizine eklenemeyeceğini bildirmek için, bulunamayan bir sayfa için 404 veya giriş gerektiren sayfalar için 401 kodu gibi anlamlı bir durum kodu kullanın. Dizinin buna göre güncellenebilmesi için, bir sayfanın yeni bir URL’ye taşındığını Googlebot’a bildirmek amacıyla HTTP durum kodlarını kullanabilirsiniz.

İşte HTTP durum kodlarının bir listesi ve bunların Google Arama’yı nasıl etkilediği.

Tek sayfalık uygulamalarda soft 404 hatalarından kaçının

İstemci tarafında oluşturulan tek sayfalık uygulamalarda, yönlendirme genellikle istemci tarafı yönlendirmesi olarak uygulanır. Bu durumda, anlamlı HTTP durum kodları kullanmak imkansız veya pratik olmayabilir. İstemci tarafı oluşturma ve yönlendirme kullanırken soft 404 hatalarından kaçınmak için aşağıdaki stratejilerden birini kullanın:

• Sunucunun 404 HTTP durum koduyla yanıt verdiği bir URL’ye (örneğin /not-found) JavaScript yönlendirmesi kullanın.
• JavaScript kullanarak hata sayfalarına <meta name="robots" content="noindex"> ekleyin.

Yönlendirme yaklaşımı için örnek kod aşağıdadır:

noindex etiketi yaklaşımı için örnek kod aşağıdadır:

Fragment’lar yerine History API kullanın

Google, bağlantılarınızı yalnızca href özniteliğine sahip <a> HTML öğeleri iseler keşfedebilir.

İstemci tarafı yönlendirmesine sahip tek sayfalık uygulamalar için, web uygulamanızın farklı görünümleri arasında yönlendirme uygulamak üzere History API kullanın. Googlebot’un URL’lerinizi ayrıştırıp çıkarabildiğinden emin olmak için, farklı sayfa içeriklerini yüklemek amacıyla fragment’lar kullanmayın. Aşağıdaki örnek kötü bir uygulamadır, çünkü Googlebot URL’leri güvenilir bir şekilde çözümleyemez:

Bunun yerine, History API’yi uygulayarak URL’lerinizin Googlebot tarafından erişilebilir olduğundan emin olabilirsiniz:

rel="canonical" bağlantı etiketini düzgün şekilde ekleyin

Bunun için JavaScript kullanılmasını önermememize rağmen, JavaScript ile bir rel="canonical" bağlantı etiketi eklemek mümkündür. Google Arama, sayfayı oluştururken eklenen canonical URL’yi dikkate alacaktır. İşte JavaScript ile bir rel="canonical" bağlantı etiketi eklemek için bir örnek:

robots meta etiketlerini dikkatli kullanın

robots meta etiketi aracılığıyla Google’ın bir sayfayı dizine eklemesini veya bağlantıları takip etmesini engelleyebilirsiniz. Örneğin, sayfanızın en üstüne aşağıdaki meta etiketini eklemek, Google’ın sayfayı dizine eklemesini engeller:

Bir sayfaya robots meta etiketi eklemek veya içeriğini değiştirmek için JavaScript kullanabilirsiniz. Aşağıdaki örnek kod, bir API çağrısı içerik döndürmezse mevcut sayfanın dizine eklenmesini önlemek için robots meta etiketinin JavaScript ile nasıl değiştirileceğini gösterir.

Uzun süreli önbelleğe alma kullanın

Googlebot, ağ isteklerini ve kaynak kullanımını azaltmak için agresif bir şekilde önbelleğe alır. WRS, önbelleğe alma başlıklarını görmezden gelebilir. Bu durum, WRS’nin güncel olmayan JavaScript veya CSS kaynaklarını kullanmasına yol açabilir. İçerik parmak izi (content fingerprinting), içeriğin bir parmak izini main.2bb85551.js gibi dosya adının bir parçası yaparak bu sorunu önler. Parmak izi dosyanın içeriğine bağlıdır, bu nedenle güncellemeler her seferinde farklı bir dosya adı oluşturur. Daha fazla bilgi edinmek için uzun süreli önbelleğe alma stratejileri hakkındaki web.dev kılavuzuna göz atın.

Yapılandırılmış veri kullanın

Sayfalarınızda yapılandırılmış veri kullanırken, gerekli JSON-LD’yi oluşturmak ve sayfaya eklemek için JavaScript kullanabilirsiniz. Sorun yaşamamak için uygulamanızı test ettiğinizden emin olun.

Web bileşenleri için en iyi uygulamaları takip edin

Google web bileşenlerini destekler. Google bir sayfayı oluşturduğunda, shadow DOM ve light DOM içeriğini düzleştirir. Bu, Google’ın yalnızca oluşturulan HTML’de görünür olan içeriği görebileceği anlamına gelir. Google’ın içeriğinizi oluşturulduktan sonra da görebildiğinden emin olmak için Zengin Sonuçlar Testi’ni veya URL Denetleme Aracı’nı kullanın ve oluşturulan HTML’ye bakın.

İçerik oluşturulan HTML’de görünmüyorsa, Google onu dizine ekleyemeyecektir.

Aşağıdaki örnek, light DOM içeriğini shadow DOM’u içinde görüntüleyen bir web bileşeni oluşturur. Hem light DOM hem de shadow DOM içeriğinin oluşturulan HTML’de görüntülendiğinden emin olmanın bir yolu, bir Slot öğesi kullanmaktır.

Oluşturma işleminden sonra Google bu içeriği dizine ekleyebilir:

Görselleri ve geç yüklenen (lazy-loaded) içeriği düzeltin

Görseller bant genişliği ve performans açısından oldukça maliyetli olabilir. İyi bir strateji, görselleri yalnızca kullanıcı onları görmeye yaklaştığında yüklemek için geç yükleme (lazy-loading) kullanmaktır. Geç yüklemeyi arama dostu bir şekilde uyguladığınızdan emin olmak için geç yükleme kılavuzlarımızı takip edin.