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:
- Tarama
- Oluşturma
- Dizine ekleme
Googlebot bir sayfayı tarar, oluşturur ve dizine ekler.
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.
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.
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.
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.|
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
noindexnoindex ile karşılaştığında, sayfayı oluşturmaz veya dizine eklemez.
Web bileşenleri için en iyi uygulamaları takip edin
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üzeltin
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.