JavaScript, web'i güçlü bir uygulama platformuna dönüştüren birçok özellik sağlamadan 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ı bilgilerini ve web uygulamanızın içeriğinin içeriğini 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ç şeyden optimize edebilirsiniz.
Bu kılavuzda, Google Arama'nın JavaScript'i nasıl yönetilir ve Google Arama için JavaScript web depolanırye yönelik en iyi uygulamalara açıklanmaktadır.
Google, JavaScript'i nasıl işler?
Google, JavaScript web kaydı üç ana aşamada gerçekleşir:
- Tarama
- oluşanma
- Dizinin eklenmesi
Googlebot, hem tarama hem de oluşturma için sayfaları sıralamada alır. Bir sayfanın taranmayı mı yoksa oluşturulmayı mı beklediğini hemen anlaşılmaz.
Googlebot, bir HTTP isteğinde bulunarak tarama sırasında bir URL gelende öncelikle taramaya izin vermenize izin verdiğinizi kontrol eder. Googlebot, robots.txt okuyucu. URL'yi Googlebot olarak işaretlerse izin vermiyor, bu URL için bir HTTP tasarım 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
oranları kullanın.
Bir URL'nin taranması ve HTML yapısının ayrıştırılması, klasik web sitelerinde veya HTTP yanıtındaki HTML'nin tüm içeriğinin barındırdığı sunucu tarafında oluşturulan sayfalarda iyi sonuç verir. Bazı JavaScript siteleri, ilk HTML'nin asıl içeriğini barındırmadığı uygulama kabuğu etiketi Kullanılabilir ve Google'ın, JavaScript'in büyütülmüş asıl sayfasını görebilmesi için, JavaScript'i yürütmesi gerekir.
Bir robotlar meta
etiket veya başlığı Google'ın program dizine eklememesi bildirmedikçe, Googlebot tüm sayfaları oluşturmak üzere birinci sırada yer alır. Sayfanın kalma süresi birkaç saniye olabilir ancak bundan daha uzun bir süre elde etmek. Google'ın kaynaklarının sağlanmasında, bir gözetimsiz Chromium oluşturulur ve JavaScript'i yürütür. Googlebot, HTML'yi yapılandırmak için tekrar ayrıştırır ve bulunan URL'leri tarayarak birinci sıraya alır. Google, yüklü HTML'yi sayfanın dizine eklenmesi için kullanır.
Sunucu tarafı veya ön oluşturma Değişimin 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
ayrıntılı, açıklayıcı
parçalar ve faydalı metalar, kullanıcıların faaliyetleriyle ilgili aramayla ilgili en iyi sonucu hızlı bir şekilde belirlemelerine yardımcı olur. İyi
çocuklar ve meta açıklamaların nasıl olacağı yönergelerimizde açıklanmaktadır.
JavaScript'i,
Özelliklerin yanı sıra meta tanımını ayarlamak veya değiştirmek için de kullanabilirsiniz.
Google Arama, öğrencilerin sorgusuna göre farklı bir bağlantı bağlantısı gösterebilir. Bu durum, altyapı veya açıklamanın sayfa içeriği ile bağlantı düzeyi düşük olduğunda veya sayfada, sorgulamayla daha iyi eşleşen alternatifler bulduğumuzda ortaya çıkıyor. Arama sonucunun başlığının sayfadaki
öğelerinden neden farklı olduğu ile ilgili daha fazla bilgi edinin.
Uyumlu kod türü
Tarayıcılar birçok API sunar ve JavaScript hızlı bir şekilde kullanılabilir bir dildir. Google'ın standart API'leri ve JavaScript özellikleri konusunda bazı sınırlamalar vardır. Kodunuzun Google ile uyumlu olduğundan emin olmak için JavaScript iyileştirmeye yönelik yönergelerimizi Programı.
Özellik algılama ile ihtiyacınız olan eksik bir tarayıcı API'sini belirlerseniz farklı sunum ve çoklu dolguları kullanımı tavsiye ederim. Bazı tarayıcı özelliklerinin çoklu kopyalanamadığından, potansiyel sınırlamalar için çoklu şifreleme kayıtlarına göz atmanızı tavsiye ederiz.
Anlamlı HTTP durum kodları kullanın
Googlebot, programlarını tararken bir şeyler ters gidip gittiğini öğrenmek için HTTP durum kodlarını kullanır.
Googlebot'a bir sayfanın taranamayacağı veya dizine eklenemeyeceğini bildirmek için anlamlı bir durum kodu kullanın. Mesela bulunamayan bir sayfa için 404
veya kişisel girişlerin yapılandırıldığı sayfalar için 401
belirtebilirsiniz. Googlebot'a bir sayfanın yeni bir URL'ye taşındığını bildirmek için HTTP durum kodlarını kullanabilir ve böylece dizine uygun şekilde güncellenmesini sağlayabilirsiniz.
HTTP durum kodlarının listesi ve Google Arama'yı nasıl pahalılıklarını buradan ayırıyorlar.
Tek sayfalık uygulamalarda soft 404
hatalarından kaçınma
İstemci para biriminde tek sayfalık uygulamalarda yönlendirme, genellikle her yerde yönlendirme olarak uygulanır. Bu durumda, anlamlı HTTP durum kodlarını kullanmak mümkün ya da pratik olamaz. İstemci verilerini oluşturma ve yönlendirme soft 404
hatalarından hesabınız için aşağıdaki stratejilerden birini değiştirin:
- Sunucunun
404
HTTP durum koduyla ( örneğin,/not-found
) yanıtını URL'ye verdi JavaScript yönlendirmesi kullanın. - JavaScript kullanarak hata sayfalarına
ekleyin.
Aşağıda, yönlendirme yaklaşımı için örnek kod verilmiştir:
fetch(`/apihttps://developers.google.com/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(`/apihttps://developers.google.com/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 robots meta 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'yi kullanma
Google, bağlantınızı yalnızca href
özelliğine sahip bir HTML öğesi ise taranabilir.
İstemci veri yönlendirmesi olan tek sayfalık uygulamalarda, web uygulamanızın farklı görünümleri arasında yönlendirme yapmak için Geçmiş API'si'yi kullanın. Googlebot'un URL'lerinizi parçalara ayırıp alabilmesi için, farklı sayfa içeriğini eklenti halinde kullanmaktan kaçınmaktan çekinmeyin. Aşağıda, Googlebotların erişemediği URL'leri güvenilir bir şekilde çözebilen kötü bir kullanım örneği verilmiştir:
example.com'a hoş geldiniz!
Hakkında daha fazla öğren bizim ürünlerimiz Ve hizmetlerimiz
Bunun yerine, History API'yi değiştirerek Googlebot'un bağlantı URL'lerine eriştiğinden emin olabilirsiniz:
example.com'a hoş geldiniz!
Hakkında daha fazla öğren bizim ürünlerimiz Ve hizmetlerimiz
rel="canonical"
bağlantı etiketini düzgün bir şekilde yerleştirme
Bu işlem için JavaScript'i göstermesek de JavaScript dosyası rel="canonical"
bağlantı etiketi mümkündür. Google Arama, yerleştirilen standart URL'yi genişletirken alır. JavaScript kullanarak rel="canonical"
bağlantı etiketi yerleştirmeyle ilgili bir örneği aşağıda bulabilirsiniz:
fetch('/api/cats/' + id) .then(function (response) { return response.json(); }) .then(function (cat) { // creates a canonical link tag and dynamically builds the URL // e.g. https://example.com/cats/simba const linkTag = document.createElement('link'); linkTag.setAttribute('rel', 'canonical'); linkTag.href = 'https://example.com/cats/' + cat.urlFriendlyName; document.head.appendChild(linkTag); });
rel="canonical"
etiket bağlantısını sağlamak için JavaScript kullanırken bu etiketin sayfadaki tek rel="canonical"
bağlantı etiketinizin olduğundan emin olun. Uygulamanın yanlış yanlış gerçekleştirilmesi birden fazla rel="canonical"
bağlantı etiketi seçenekleri veya mevcut bir rel="canonical"
bağlantı etiketini etkileyebilir. Çakışan etiket etiketleri veya birden fazla rel="canonical"
Bağlantı parçalarını etiketleyerek yol açabilirsiniz. Google'ın bir program dizine eklemesini veya bağlantılarını izlemesini robotlar meta
etiket aracılığıyla engelleyebilirsiniz. Örneğin sayfanızın en üst bölümü aşağıdaki meta
etiket eklediğinde, Google'ın program dizisine eklenmesi engellenir:
Bir sayfaya robotlar meta
etiketi değiştirmek veya değiştirmek için JavaScript'i kullanabilirsiniz. Aşağıdaki örnek kod, bir API ekranının içerik döndürmesi durumunda, geçerli sayfanın dizine eklenmesini engellemek için robotlar meta
etiketinin JavaScript ile nasıl değişeceği gösterilmiştir.
fetch('/apihttps://developers.google.com/products/' + productId) .then(function (response) { return response.json(); }) .then(function (apiResponse) { if (apiResponse.isError) { // get the robotsmeta
tag var metaRobots = document.querySelector('meta[name="robots"]'); // if there was no robotsmeta
tag, add one if (!metaRobots) { metaRobots = document.createElement('meta'); metaRobots.setAttribute('name', 'robots'); document.head.appendChild(metaRobots); } // tell Google 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 // ... });
Google, JavaScript'i çalıştırmadan önce robotlar meta
etiketinde noindex
ile karşılaşmanda, program oluşturmaz veya dizine eklemez.
noindex
etiketiyle karşılaşırsa oluşturmayı ve JavaScript'i yürütmeyi atlar. Bu durumda Google, JavaScript'inizi attığınız etiket sayfasından kaldırma işlemi yoktur. robotlar
meta
Etiketini değiştirmek veya çıkarmak için JavaScript'i kullanmak beklenen sonucu vermeyebilir. robotlar meta
Başlangıçta etiket etiketi noindex
Google'ın içerdiğisa, oluşturma ve JavaScript'i yürütme atları. Sayfanın dizine eklenmesi istememek ihtimaliniz varsa orijinal sayfa kodunda noindex
için. Uzun ömürlü önbelleğe almayı kullanma
Googlebot, ağ değerlerini kaynak ve konsantrasyonu azaltmak için yüksek düzeyde önbellek kullanır. WRS, önbelleğe alma üstünü almayı yok sayabilir. Bu, WRS'nin güncel olmayan JavaScript veya CSS kaynaklarının kullanılmasına neden olabilir. İçerik parmak izi, dosya adının bir bölümünün içeriğinin parmak izi yaparak (main.2bb85551.js
gibi) bu sorunu önler. Parmak izi, dosyanın içeriğine bağlı güncellenmelerde her fırsatta farklı bir dosya adı oluşur. 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 vereceğiniz veri ne zaman gerekli JSON-LD'yi oluşturup sayfaya taşımak için JavaScript'i kullanabilirsiniz. Sorunları önlemek için uygulamanızı test ettiğinizden emin olun.
Web sistemleri için en iyi uygulamaları takip edin
Google, web depolamayı sürdürüyor. Google bir sayfa oluşturulmasında gölge DOM ve hafif DOM varlığını birleştirir. Bu, Google'ın yalnızca HTML'de görülebilen içeriği görebileceği anlamına gelir. Google'ın içeriğinizi içerdiğinden sonra da görebileceksiniz bunu sağlamak için Mobil Uyumluluk Testi veya URL Ödeme Aracı'nı kullanıp HTML'ye bakın.
Google yazılımında HTML'de görünmeyen içerik dizine ekleyemez.
Aşağıdaki örnekte, hafif DOM'u gölgeleyen DOM'u içinde gösteren bir web parçası oluşturulmaktadır. Hem ışık DOM'u hem gölge DOM'u içeriğinin işleyişinin HTML'deki görünümünü sağlamanın bir yolu, Yuva dosyayı kullanmaktır.
Bu hafif DOM içeriğidir. Gölge DOM'a yansıtılır.
WRS, bu içeriğin yanı sıra gölge DOM içeriğini de işler.
Oluşturulduktan sonra, Google şu içeriği dizine eklenir:
Hello World, this is shadow DOM content. Here comes the light DOM: This is light DOM content. It's projected into the shadow DOM
WRS renders this content as well as the shadow DOM content.
Resimler ve geçilen yüklenen düzeltilmiş içerik
Resimler, bant genişliği ve performans açısından oldukça genişletilebilir. Resimleri yalnızca görmek üzereyken yüklemek için geçiş yükleme özelliğini kullanmak iyi bir stratejidir. Geçtiğiniz yükleme uygun bir şekilde uygulandığından emin olmak için geçiş talimatlarımızı yükleme Programı.
Erişilebilirliğe göz önünde bulundurarak tasarım yapın
Yalnızca arama motorları için değil, kullanıcılar için sayfalar oluşturur. Sitenizi tasarlarken, JavaScript uyumlu tarayıcıları kullanıcı olmayan kullanıcılar da (örneğin, ekran okuyucuları veya mobil cihazları kullanan kişiler) dahil olmak üzere, kullanıcılarınızın ihtiyaçlarını düşünün. Sitenizin erişilebilirliğini test birimlerinden en kolay yollarından birisi, JavaScript devre dışıyken sitenin ayrılmasını veya Lynx gibi bir salt metin tarayıcısında siteyi görüntülemektir. Bir siteyi salt metin olarak görüntülemek, resimlere yer verilen metin gibi Google'ın görmekte zorluk çektiği diğer içerik tanımlamanıza da yardımcı olur.
Cevap bırakın