JavaScript SEO temel kavramlarını anlayın

 JavaScript sorunlarının, sayfanızın veya belirli içeriklerinizin Google Arama’da gösterilmesini engellediğinden mi şüpheleniyorsunuz? Sorun giderme kılavuzumuzu kullanarak JavaScript ile ilgili sorunları nasıl gidereceğinizi öğrenin

JavaScript, web'i güçlü bir uygulama platformuna dönüştüren birçok özellik sağlamasından dolayı web platformunun önemli bir parçasıdır. JavaScript destekli web uygulamalarınızı Google Arama aracılığıyla bulunabilir hale getirmek, yeni kullanıcılar bulmanıza ve web uygulamanızın sağladığı içeriği ararlarken mevcut kullanıcılarla yeniden etkileşime geçmenize yardımcı olabilir. Google Arama, JavaScript’i Chromium’un evergreen sürümüyle çalıştırırken birkaç şeyi optimize edebilirsiniz.

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

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

Googlebot bir sayfayı tarar, oluşturur ve dizine ekler.

Googlebot hem tarama hem de oluşturma için sayfaları sıraya alır. Bir sayfanın taranmayı mı yoksa oluşturulmayı mı beklediği hemen anlaşılmaz.

Googlebot, bir HTTP isteğinde bulunarak tarama sırasından bir URL getirdiğinde öncelikle taramaya izin verip vermediğinizi kontrol eder. Googlebot, robots.txt dosyasını okur. URL'yi izin verilmiyor olarak işaretlerse Googlebot, bu URL için bir HTTP isteği oluşturmayı ve URL'yi atlar.

Googlebot, daha sonra HTML bağlantılarının hrefözelliğindeki diğer URL’lerin yanıtlarını ayrıştırır ve URL’leri tarama sırasına ekler. Bağlantının keşfedilmesini engellemek için nofollow mekanizmasını kullanın.

Taranabilir bağlantı yönergelerine uyduğu sürece, DOM'a bağlantı eklemek için JavaScript kullanılabilir.

Bir URL'nin taranması ve HTML yanıtının ayrıştırılması, klasik web sitelerinde veya HTTP yanıtındaki HTML'nin tüm içeriği barındırdığı sunucu tarafında oluşturulmuş sayfalarda iyi sonuç verir. Bazı JavaScript siteleri, ilk HTML'nin asıl içeriği barındırmadığı uygulama kabuğu modelini kullanabilir ve Googlebot'un, JavaScript'in oluşturduğu asıl sayfa içeriğini görebilmesi için önce JavaScript'i yürütmesi gerekir.

Bir robots meta etiketi veya başlığı Googlebot'un sayfayı dizine eklememesi gerektiğini bildirmedikçe, Googlebot tüm sayfaları oluşturmak üzere sıraya alır. Sayfanın sırada kalma süresi birkaç saniye olabilir ancak bundan daha uzun da sürebilir. Googlebot’un kaynakları izin verdiğinde, bir gözetimsiz Chromium sayfayı oluşturur ve JavaScript’i yürütür. Googlebot, oluşturulan HTML’yi bağlantılar için tekrar ayrıştırır ve bulduğu URL’leri taramak üzere sıraya alır. Googlebot, oluşturulan HTML'yi sayfanın dizine eklenmesi için de kullanır.

Sunucu tarafı veya ön oluşturma işleminin hâlâ iyi bir fikir olduğunu unutmayın. Böylece web siteniz kullanıcılar ve tarayıcılar için daha hızlı hale gelir ve tüm botlar JavaScript'i çalıştıramaz.

Sayfanızı benzersiz başlıklar ve snippet'ler ile açıklayın

Benzersiz, açıklayıcı başlıklar ve faydalı meta tanımlar, kullanıcıların hedefleri için en iyi sonucu hızlı bir şekilde belirlemelerine yardımcı olur. İyi başlıklar ve açıklamaların nasıl olacağı yönergelerimizde açıklanmaktadır.

JavaScript'i, başlığın yanı sıra meta tanımı ayarlamak veya değiştirmek için de kullanabilirsiniz.

Google Arama, kullanıcının sorgusuna göre farklı bir başlık veya açıklama gösterebilir. Bu durum, başlık veya açıklamanın sayfa içeriği ile alaka düzeyi düşük olduğunda veya sayfada, arama sorgusuyla daha iyi eşleşen alternatifler bulduğumuzda ortaya çıkar. Başlıklar ve açıklama snippet'i hakkında daha fazla bilgi için bu sayfaya bakın.

Uyumlu kod yazın

Tarayıcılar birçok API sunar ve JavaScript hızlı gelişen bir dildir. Googlebot’un desteklediği API’ler ve JavaScript özellikleri konusunda bazı sınırlamalar vardır. Kodunuzun Googlebot ile uyumlu olduğundan emin olmak için JavaScript sorunlarını gidermeye yönelik yönergelerimizi uygulayın.

Özellik algılama ile ihtiyacınız olan eksik bir tarayıcı API'sini belirlerseniz diferansiyel sunum ve çoklu dolguları kullanmanızı öneririz. Bazı tarayıcı özellikleri çoklu doldurulamadığından, potansiyel sınırlamalar için çoklu doldurma belgelerine göz atmanızı tavsiye ederiz.

Anlamlı HTTP durum kodları kullanın

Googlebot, sayfayı tararken bir şeylerin ters gidip gitmediğini öğrenmek için HTTP durum kodlarını kullanır.

Googlebot’a, bir sayfanın taranmaması veya dizine eklenmemesi gerektiğini bildirmek için anlamlı bir durum kodu kullanmanız gerekir. Bunu, örneğin bulunamayan bir sayfa için 404 veya bir giriş arkasındaki sayfalar için 401 kodunu kullanarak yapabilirsiniz. Googlebot’a bir sayfanın yeni bir URL’ye taşındığını bildirmek için HTTP durum kodlarını kullanabilir ve böylece, dizinin uygun şekilde güncellenmesini sağlayabilirsiniz.

HTTP durum kodlarının listesini ve bunların ne zaman kullanılacağını aşağıda görebilirsiniz:

HTTP durumu	Ne zaman kullanılır?
301 / 302	Sayfa yeni bir URL’ye taşınmıştır.
401 / 403	Sayfa, izin sorunları nedeniyle kullanılamaz.
404 / 410	Sayfa artık mevcut değildir.
5xx	Sunucu tarafında bir şeyler ters gitmiştir.

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

İstemci taraflı oluşturulan tek sayfalık uygulamalarda yönlendirme, genellikle istemci taraflı yönlendirme olarak uygulanır. Bu durumda, anlamlı HTTP durum kodları kullanmak mümkün ya da pratik olmayabilir. İstemci taraflı oluşturma ve yönlendirme kullanırken, soft 404 hatalarından kaçınmak için aşağıdaki stratejilerden birini uygulayın:

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

Aşağıda, yönlendirme yaklaşımı için örnek kod verilmiştir:

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.
  }
})

Aşağıda, noindex yaklaşımı için örnek kod verilmiştir:

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);
  }
})

Parçalar yerine History API'sini kullanma

Googlebot, sayfalarınızdaki bağlantıları aradığında, yalnızca HTML bağlantılarının href özelliğindeki URL'leri dikkate alır.

İstemci taraflı yönlendirmesi olan tek sayfalık uygulamalarda, web uygulamanızın farklı görünümleri arasında yönlendirme uygulamak için History API'sini kullanın. Googlebot'un bağlantıları bulabilmesi için farklı sayfa içerikleri yüklemek üzere parçalar kullanmaktan kaçının. Aşağıdaki, Googlebot bağlantıları taramayacağından kötü bir uygulamaya örnektir:

<nav>
  <ul>
    <li><a href="#/products">Our products</a></li>
    <li><a href="#/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="#/products">our products</a> and <a href="#/services">our services</p>
</div>
<script>
window.addEventListener('hashchange', function goToPage() {
  // this function loads different content based on the current URL fragment
  const pageToLoad = window.location.hash.slice(1); // URL fragment
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
});
</script>

Bunun yerine, History API'sini uygulayarak Googlebot'un bağlantı URL'lerine eriştiğinden emin olabilirsiniz:

<nav>
  <ul>
    <li><a href="/products">Our products</a></li>
    <li><a href="/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="/products">our products</a> and <a href="/services">our services</p>
</div>
<script>
function goToPage(event) {
  event.preventDefault(); // stop the browser from navigating to the destination URL.
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1); // remove the leading slash
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl) // Update URL as well as browser history.
}

// Enable client-side routing for all links on the page
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));

</script>

Meta robot etiketlerini dikkatli kullanın

Googlebot’un bir sayfayı dizine eklemesini veya bağlantıları izlemesini meta robots etiketi aracılığıyla engelleyebilirsiniz. Örneğin, sayfanızın en üst kısmına aşağıdaki meta etiketi eklediğinizde, Googlebot'un sayfayı dizine eklemesi engellenir:

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

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

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

Googlebot, JavaScript'i çalıştırmadan önce robots meta etiketinde noindex ile karşılaştığında, sayfayı oluşturmaz veya dizine eklemez.

Googlebot noindex ile karşılaşırsa oluşturmayı ve JavaScript'i çalıştırmayı atlar. Bu durumda Googlebot JavaScript'inizi atladığından etiketi sayfadan kaldırma olanağı yoktur. Robots meta etiketini değiştirmek veya kaldırmak için JavaScript'i kullanmak beklenen sonucu vermeyebilir. Meta robots etiketi başlangıçta noindex içeriyorsa Googlebot, oluşturma ve JavaScript'i yürütme işlemlerini atlar. Sayfanın dizine eklenmesini isteme ihtimaliniz varsa orijinal sayfa kodunda noindex kullanmayın.

Uzun ömürlü önbelleğe almayı kullanma

Googlebot, ağ isteklerini ve kaynak kullanımını azaltmak için yüksek düzeyde önbellek kullanır. WRS, önbelleğe alma üst bilgilerini yok sayabilir. Bu, WRS'nin güncel olmayan JavaScript veya CSS kaynaklarını kullanmasına neden olabilir. İçerik parmak izi, dosya adının bir bölümünü içeriğin parmak izi yaparak (main.2bb85551.js gibi) bu sorunu önler. Parmak izi, dosyanın içeriğine bağlı olduğundan güncellemelerde her seferinde farklı bir dosya adı oluşturulur. Daha fazla bilgi edinmek için uzun süreli önbelleğe alma stratejilerinde web.dev kılavuzuna bakın.

Yapılandırılmış veri kullanma

Sayfalarınızda yapılandırılmış veri kullanırken gerekli JSON-LD'yi oluşturup sayfaya yerleştirmek için JavaScript'i kullanabilirsiniz. Sorunları önlemek için uygulamanızı test ettiğinizden emin olun.

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

Googlebot, web bileşenlerini destekler. Googlebot bir sayfa oluşturduğunda gölge DOM ve ışık DOM içeriğini birleştirir. Bu, Googlebot'un yalnızca oluşturulan HTML'de görülebilen içeriği görebileceği anlamına gelir. Googlebot'un içeriğinizi oluşturulduktan sonra da görebilmesini sağlamak için Mobil Uyumluluk Testi veya URL Denetleme Aracı'nı kullanın ve oluşturulan HTML'ye bakın.

Googlebot, oluşturulan HTML'de görünmeyen içeriği dizine ekleyemez.

Aşağıdaki örnekte, ışık DOM'u içeriğini gölge DOM'u içinde gösteren bir web bileşeni oluşturulmaktadır. Hem ışık DOM'u hem gölge DOM'u içeriğinin oluşturulan HTML'de gösterilmesini sağlamanın bir yolu, Slot öğesini kullanmaktır.

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
      let p = document.createElement('p');
      p.innerHTML = 'Hello World, this is shadow DOM content. Here comes the light DOM: <slot></slot>';
      this.shadowRoot.appendChild(p);
    }
  }

  window.customElements.define('my-component', MyComponent);
</script>

<my-component>
  <p>This is light DOM content. It's projected into the shadow DOM.</p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
            

Oluşturulduktan sonra, Googlebot bu içeriği dizine ekler:

<my-component>
  Hello World, this is shadow DOM content. Here comes the light DOM:
  <p>This is light DOM content. It's projected into the shadow DOM<p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
    

Resimleri ve geç yüklenen içeriği düzeltme

Resimler, bant genişliği ve performans açısından oldukça maliyetli olabilir. Resimleri yalnızca kullanıcı görmek üzereyken yüklemek için geç yükleme özelliğini kullanmak iyi bir stratejidir. Geç yüklemeyi aramaya uygun bir şekilde uyguladığınızdan emin olmak için geç yükleme yönergelerimizi uygulayın.