Arama ile İlgili JavaScript Sorunlarını Düzeltme | Google Arama Merkezi | Dokümanlar

Bu kılavuz, sayfanızın veya JavaScript destekli sayfalardaki belirli içeriklerin Google Arama’da gösterilmesini engelleyebilecek JavaScript sorunlarını tanımlamanıza ve düzeltmenize yardımcı olur. Google, JavaScript’i çalıştırırken, tarayıcıların içeriğinize nasıl eriştiği ve bunları nasıl oluşturduğuyla alakalı olarak sayfa ve uygulama tasarımında dikkate almanız gereken bazı farklılıklar ve sınırlamalar ortaya çıkacaktır. JavaScript SEO temelleri kılavuzumuzda Google Arama için JavaScript sitenizi nasıl optimize edeceğinizle ilgili daha fazla bilgi bulunmaktadır.

Googlebot, web’in iyi bir vatandaşı olacak şekilde tasarlanmıştır. Asıl önceliği tarama olmakla birlikte, siteyi ziyaret eden kullanıcıların deneyimini olumsuz yönde etkilemez. Googlebot ve Web Oluşturma Hizmeti (WRS) bileşeni, temel sayfa içeriğine katkıda bulunmayan ve bu tür kaynakları getiremeyen kaynakları sürekli olarak analiz edip tanımlar. Örneğin, temel sayfa içeriğine katkıda bulunmayan raporlama ve hata istekleri ile diğer benzer istek türleri, temel sayfa içeriğinin ayıklanması için kullanılmaz veya gereksizdir. İstemci tarafındaki analizler, Googlebot ve WRS'nin sitenizdeki etkinliğini tam veya doğru bir temsilini sağlamayabilir. Googlebot ve WRS etkinliğini ve sitenizle ilgili geri bildirimleri izlemek için Search Console'u kullanın.

JavaScript sorunlarının, sayfanızın veya JavaScript destekli sayfalardaki belirli içeriklerin Google Arama’da gösterilmesini engellediğinden şüpheleniyorsanız şu adımları uygulayın: Asıl nedenin JavaScript olup olmadığından emin değilseniz söz konusu sorunu belirlemek için genel hata ayıklama kılavuzumuzu izleyin.

Google’ın bir URL’yi nasıl taradığını ve oluşturduğunu test etmek için Search Console'daki Mobil Uyumluluk Testi veya URL Denetleme Aracı'nı kullanın. Yüklü kaynakları, JavaScript konsolu çıkışını ve istisnaları, oluşturulan DOM'yi ve daha fazla bilgiyi görebilirsiniz.

İsteğe bağlı olarak, içeriğin oluşturulma şeklini etkileyebilecek olası sorunları tanımlamak için sitenizdeki Googlebot dahil kullanıcılar tarafından karşılaşılan JavaScript hatalarının toplanmasını ve denetlenmesini de öneririz.

Genel onerror işleyicisinde günlüğe kaydedilen JavaScript hatalarının nasıl kaydedileceğini gösteren bir örneği burada bulabilirsiniz. Ayrıştırma hatası gibi bazı JavaScript hatası türlerinin bu yöntemle günlüğe kaydedilemediğini unutmayın.

window.addEventListener('error', function(e) {
    var errorText = [
        e.message,
        'URL: ' + e.filename,
        'Line: ' + e.lineno + ', Column: ' + e.colno,
        'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
    ].join('\n');

    // Example: log errors as visual output into the host page.
    // Note: you probably don't want to show such errors to users, or
    //       have the errors get indexed by Googlebot; however, it may
    //       be a useful feature while actively debugging the page.
    var DOM_ID = 'rendering-debug-pre';
    if (!document.getElementById(DOM_ID)) {
        var log = document.createElement('pre');
        log.id = DOM_ID;
        log.style.whiteSpace = 'pre-wrap';
        log.textContent = errorText;
        if (!document.body) document.body = document.createElement('body');
        document.body.insertBefore(log, document.body.firstChild);
    } else {
        document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
    }

    // Example: log the error to remote service.
    // Note: you can log errors to a remote service, to understand
    //       and monitor the types of errors encountered by regular users,
    //       Googlebot, and other crawlers.
    var client = new XMLHttpRequest();
    client.open('POST', 'https://example.com/logError');
    client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
    client.send(errorText);

});

soft 404 hatalarını önlediğinizden emin olun. Bu, tek sayfalık uygulamada (SPA) özellikle zor olabilir. Hata sayfalarının dizine eklenmesini önlemek için aşağıdaki stratejilerden birini veya ikisini birden kullanabilirsiniz:
- Sunucunun 404 durum koduyla yanıt verdiği bir URL'ye yönlendirin.
```
fetch(`https://api.kitten.club/cats/${id}`)
 .then(res => res.json())
 .then((cat) => {
   if (!cat.exists) {
     // redirect to page that gives a 404
     window.location.href = '/not-found';
   }
 });
```
- robots meta etiketini ekleyin veya noindex olarak değiştirin.
```
fetch(`https://api.kitten.club/cats/${id}`)
 .then(res => res.json())
 .then((cat) => {
   if (!cat.exists) {
     const metaRobots = document.createElement('meta');
     metaRobots.name = 'robots';
     metaRobots.content = 'noindex';
     document.head.appendChild(metaRobots);
   }
 });
```
SPA, hataları işlemek için istemci taraflı JavaScript kullandığında genellikle uygun durum kodu yerine bir 200 HTTP durum kodunu bildirir. Bu durum, hata sayfalarının dizine eklenmesine ve muhtemelen arama sonuçlarında gösterilmesine yol açar.
Googlebot’un kullanıcı izin isteklerini reddetmesini bekleyin.
Kullanıcı izni gerektiren özellikler Googlebot veya bazı kullanıcılar için bir anlam ifade etmez. Örneğin, Camera API kullanımını zorunlu kılarsanız Googlebot size bir kamera sağlayamaz. Bunun yerine, kullanıcıların kamera erişimine izin vermek zorunda kalmadan içeriğinize erişebilmeleri için bir yol sağlayın.
Farklı içerik yüklemek için kısmi URL'ler kullanmayın.
Bir SPA, farklı görünümler yüklemek için kısmi URL kullanabilir (örneğin https://example.com/#/products). AJAX-crawling şeması 2015'ten bu yana kullanımdan kalktığı için, Googlebot ile çalışmak için kısmi URL'lere güvenemezsiniz. SPA'daki URL'ye göre farklı içerik yüklemek için History API kullanmanızı öneririz.
İçeriği sunmak için verilerin sürekliliğine güvenmeyin.
WRS, normal bir URL ile aynı şekilde, sunucu ve istemci yönlendirmelerini izleyerek her bir URL’yi yükler (Google’ın içeriği nasıl keşfettiğine dair genel bir bakış için Google Arama Nasıl Çalışır? bölümüne bakın). Ancak, WRS sayfa yüklemeleri arasında durum bilgisini korumaz:
- Sayfa yüklemelerinde Yerel Depolama ve Oturum Depolama verileri temizlenir.
- Sayfa yüklemelerinde HTTP Çerezleri temizlenir.
Googlebot ile önbelleğe alma sorunlarını önlemek için içerik parmak izini kullanın.
Googlebot, ağ isteklerini ve kaynak kullanımını azaltmak için yüksek düzeyde önbellek kullanır. WRS, önbelleğe alma üstbilgilerini yoksayabilir. 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.
Uygulamanızın ihtiyaç duyduğu tüm kritik API'ler için özellik algılamayı kullandığından emin olun ve uygun durumlarda bir yedek davranışı veya çoklu dolgu sağlayın.
Bazı web özellikleri henüz tüm kullanıcı aracıları tarafından benimsenmemiş olabilir ve bazıları belirli özellikleri bilinçli olarak devre dışı bırakabilir. Örneğin, tarayıcıda fotoğraf efektleri oluşturmak için WebGL kullanıyorsanız özellik algılama, Googlebot’un WebGL’yi desteklemediğini gösterir. Bunu düzeltmek için fotoğraf efektini atlayabilir veya içeriğinizi Googlebot da dahil olmak üzere herkes tarafından erişilebilir hale getiren fotoğraf efektlerini önceden oluşturmak için sunucu tarafında oluşturmayı kullanmaya karar verebilirsiniz.
İçeriğinizin HTTP bağlantılarıyla çalıştığından emin olun.
Googlebot, sunucunuzdan içerik almak için HTTP isteklerini kullanır. WebSockets veya WebRTC bağlantıları gibi diğer bağlantı türlerini desteklemez. Bu tür bağlantılarla sorun yaşamamak amacıyla içerik almak için hem yedek HTTP sağladığınızdan hem de güçlü hata işleme ve özellik algılama kullandığınızdan emin olun.
Web bileşenlerinin beklendiği gibi oluşturulduklarından emin olun. Oluşturulan HTML'nin beklediğiniz tüm içeriğe sahip olup olmadığını kontrol etmek için Mobil Uyumluluk Testi veya URL Denetleme Aracı'nı kullanın.
WRS, ışık DOM ve gölge DOM'u birleştirir. Kullandığınız web bileşenleri, ışık DOM içeriği için <slot> mekanizmasını kullanmıyorsa daha fazla bilgi için web bileşeninin dokümanlarına bakın veya başka bir web bileşeni kullanın. Daha fazla bilgi için web bileşenleri için en iyi uygulamalara bakın.
Bu kontrol listesindeki öğeleri düzelttikten sonra sayfanızı test edin. Bunun için Search Console'daki Mobil Uyumluluk Testi veya URL denetleme aracını kullanın.
Sorunu düzelttiyseniz yeşil bir onay işareti belirir ve herhangi bir hata gösterilmez. Hatalar görmeye devam ediyorsanız Arama Çalışma Grubu'ndaki JavaScript Siteleri bölümünde sorunuzu yayınlayın.

Arama ile ilgili JavaScript sorunlarını düzeltme