JavaScript SEO Hakkında Bilmeniz Gereken Her Şey

Herhangi bir programcıya sorun, size JavaScript hakkında ne düşündüklerini söyleyeceklerdir.

JavaScript (JS), piyasaya sürüldüğü zamandan beri dünya çapında web geliştiricileri tarafından kullanılan en popüler programlama dili olmuştur. Stack Overflow tarafından web geliştiricileri arasında yakın zamanda yapılan bir anket, JavaScript'in art arda sekiz yıldır en çok tercih edilen programlama dili olduğunu ortaya koyuyor.

JS, web geliştiricilerinin kolaylıkla büyük ölçekli web uygulamaları oluşturmasına olanak tanır. Sayfaları dinamik olarak güncelleme ve onları daha etkileşimli hale getirme konusunda olağanüstü bir yeteneğe sahiptir. Ayrıca, AngularJS, ReactJS, Vue ve NodeJS gibi JavaScript çerçeveleri, JS tabanlı siteler geliştirmek için gereken zaman ve çaba miktarını önemli ölçüde azaltır. JavaScript'in dünya çapındaki web sitelerinin yüzde 96'sının temelini oluşturmasına şaşmamalı.

Yine de JS tabanlı sitelerin Google ile bir aşk-nefret ilişkisi var gibi görünüyor. JavaScript, web sayfalarını dinamik ve etkileşimli hale getirmek için HTML'yi kolayca kontrol edebilir ve değiştirebilir, böylece sitenin UX'ini iyileştirir. Yine de arama motorları, JavaScript içeriğinin çoğunu dizine eklenmemiş halde bırakarak JS ile uğraşmayı zor buluyor.

JavaScript'in neden Google'ın işini zorlaştırdığını ve JS içeriğinizi bot dostu yapmak için neler yapabileceğinizi biraz daha derine inelim.

Javascript SEO'yu nasıl etkiler?

JavaScript, sayfaların hızlı yüklenmesini sağlar, zengin bir arayüz sunar ve uygulanması kolaydır; ancak tarayıcı akışkanlığı kullanıcı etkileşimine göre değişir ve arama motorlarının sayfayı anlamasını ve içeriğe bir değer atamasını zorlaştırır.

JavaScript içeriği taşıyan web sayfalarını oluştururken arama motorlarının sınırlamaları vardır. Google, sayfanın ilk taramasını gerçekleştirir ve bulduklarını dizine ekler. Kaynaklar mevcut olduğunda, botlar bu sayfalarda JS oluşturmaya geri döner. Bu, JavaScript'e dayanan içeriğin ve bağlantıların arama motorları tarafından görülmeme riskini taşıdığı ve sitenin SEO'suna potansiyel olarak zarar verdiği anlamına gelir.

Kaynak

Ancak Google, JavaScript'in kalıcı olduğunu biliyor! Sonuç olarak, arama motoru devi, kaynaklarının çoğunu, arama uzmanlarının JS tabanlı sitelerini optimize etmesine yardımcı olmak için ayırdı.

JS içeriğinizi çevrimiçi olarak daha keşfedilebilir hale getirmenize yardımcı olabilecek Google'ın JavaScript SEO konulu bu video serisine göz atın.

SEO uzmanlarının JS tabanlı web sayfalarını Google'ın takdir ettiği bir biçimde tartışması gerekir. Arama motorlarının JS içeriğini nasıl işlediğine dair biraz anlayışla, sitenizin sıralamasını yükseltmek için JavaScript ve SEO birlikte çalışabilir.

Arama motorları JavaScript'i nasıl işler?

Google botları, JS'yi JS olmayan bir sayfadan farklı şekilde işler. Botlar bunları tarama, indeksleme ve oluşturma olmak üzere üç aşamada işler. Aşağıdaki Google Developers grafiği sayesinde bu aşamalar kolayca anlaşılabilir:

Kaynak

Emekleme

Bu aşama, içeriğinizin keşfedilebilirliği ile ilgilidir. Çekirdek kümeler, tarama kuyruğu ve zamanlama, URL önemi ve diğerleri gibi alt süreçleri içeren karmaşık bir süreçtir.

Başlangıç ​​olarak, Google'ın botları sayfaları tarama ve oluşturma için sıraya alır. Botlar, sayfaları getirmek, sayfalardaki bağlantıları takip etmek ve sayfalar dizine eklendiğinde bir noktaya kadar işlemek için ayrıştırma modülünü kullanır. Modül yalnızca sayfaları oluşturmakla kalmaz, aynı zamanda kaynak kodunu da analiz eder ve <a href=”…”> snippet'lerindeki URL'leri çıkarır.

Botlar, taramaya izin verilip verilmediğini görmek için robots.txt dosyasını kontrol eder. URL izin verilmeyen olarak işaretlenirse, botlar bunu atlar. Bu nedenle, hataları önlemek için robots.txt dosyasını kontrol etmek çok önemlidir.

oluşturma

Bir sitenin içeriğini, şablonlarını ve diğer özelliklerini kullanıcıya gösterme işlemine render denir. Sunucu tarafı oluşturma ve istemci tarafı oluşturma vardır.

Sunucu tarafı oluşturma (SSR)

Adından da anlaşılacağı gibi, bu tür oluşturmada sayfalar sunucuda doldurulur. Siteye her erişildiğinde, sayfa sunucuda işlenir ve tarayıcıya gönderilir.

Başka bir deyişle, bir kullanıcı veya bot siteye eriştiğinde içeriği HTML işaretlemesi olarak alırlar. Google'ın içeriğe erişmek için JS'yi ayrı olarak oluşturması gerekmediğinden, bu genellikle SEO'ya yardımcı olur. SSR, geleneksel işleme yöntemidir ve bant genişliği söz konusu olduğunda maliyetli olabilir.

İstemci tarafı oluşturma

İstemci tarafı oluşturma, geliştiricilerin sitelerini tamamen JavaScript ile tarayıcıda oluşturmalarına olanak tanıyan oldukça yeni bir oluşturma türüdür. Bu nedenle, rota başına ayrı bir HTML sayfasına sahip olmak yerine, istemci tarafı oluşturma, her yolun dinamik olarak doğrudan tarayıcıda oluşturulmasına izin verir. Bu tür oluşturma, sunucuya birden çok tur yaptığı için başlangıçta yavaş olsa da, istekler tamamlandıktan sonra JS çerçevesi aracılığıyla deneyim hızlıdır.

Bir sayfa tarandıktan sonra olanlara dönersek, ham HTML kodundaki robots meta etiketi Googlebot'a sayfayı dizine eklememesini söylemediği sürece, botlar oluşturulması gereken sayfaları belirler ve bunları oluşturma kuyruğuna ekler.

Sayfalar birkaç saniye oluşturma kuyruğunda kalır, ancak mevcut kaynakların miktarına bağlı olarak biraz zaman alabilir.

Kaynak

Kaynaklar izin verdiğinde, Google Web Rendering Service (WRS) sayfaları oluşturur, ayrıştırır ve derler ve sayfada JavaScript'i yürütür. Bot, oluşturulan HTML'yi bağlantılar için tekrar ayrıştırır ve bulduğu URL'leri tarama için sıraya koyar. Oluşturulan HTML, sayfayı dizine eklemek için kullanılır.

indeksleme

WRS, verileri harici API'lerden ve veritabanlarından aldığında, Google'daki Kafein dizin oluşturucu içeriği dizine ekleyebilir. Bu aşama, URL'yi analiz etmeyi, sayfalardaki içeriği ve alaka düzeyini anlamayı ve keşfedilen sayfaları dizine kaydetmeyi içerir.

SEO için JavaScript nasıl optimize edilir

JavaScript, yanlış uygulandığında SEO'nuzu mahvedebilir. Sitenizin sıralamasını iyileştirmek için bu Javascript SEO en iyi uygulamalarını izleyin.

Sayfa içi SEO çabalarınızda ısrarcı olun

Arama motorlarında sıralamalarına yardımcı olmak için sayfanızı optimize etmeye yönelik tüm sayfa içi SEO kuralları hala geçerlidir. Başlık etiketlerinizi, meta açıklamalarınızı, resimlerdeki alt niteliklerinizi ve meta robot etiketlerinizi optimize edin. Benzersiz ve açıklayıcı başlıklar ve meta açıklamalar, kullanıcıların ve arama motorlarının içeriği kolayca tanımlamasına yardımcı olur. Arama amacına ve anlamsal olarak alakalı anahtar kelimelerin stratejik yerleşimine dikkat edin.

Ayrıca, SEO dostu bir URL yapısına sahip olmak iyidir. Birkaç durumda, web siteleri URL'de bir pushState değişikliği uygulayarak Google'ın standart olanı bulmaya çalışırken kafasını karıştırır. Bu tür sorunlar için URL'leri kontrol ettiğinizden emin olun.

JavaScript'inizin DOM ağacında göründüğünden emin olun

JavaScript oluşturma, bir sayfanın DOM'si yeterince yüklendiğinde çalışır. DOM veya Belge Nesne Modeli, sayfa içeriğinin yapısını ve her bir öğenin diğeriyle ilişkisini gösterir. Bunu, sayfa kodundaki tarayıcının "İnceleme öğesi"nde bulabilirsiniz. DOM, dinamik olarak oluşturulan sayfanın temelidir.

İçeriğiniz DOM'da görülebiliyorsa, içeriğiniz Google tarafından ayrıştırılıyor olabilir. DOM'yi kontrol etmek, sayfalarınıza arama motoru botları tarafından erişilip erişilmediğini belirlemenize yardımcı olacaktır.

Meta robots etiketi başlangıçta noindex içeriyorsa, botlar oluşturmayı ve JS yürütmesini atlar. Googlebot, bir sayfada etkinlik başlatmaz. JS yardımıyla sayfaya içerik ekleniyorsa sayfa yüklendikten sonra yapılmalıdır. Düğmeye tıklandığında, sayfayı kaydırırken vb. içerik HTML'ye eklenirse, dizine eklenmez.

Son olarak, yapılandırılmış verileri kullanırken, gerekli JSON-LD'yi oluşturmak ve bunu sayfaya enjekte etmek için JavaScript'i kullanın. Bir kenara, en başından itibaren uygulamanız gereken sayfadaki en iyi SEO püf noktalarını öğrenin.

Arama motorlarının JS içeriğine erişmesini engellemekten kaçının

Google'ın JS içeriğini bulamama sorununu önlemek için, birkaç web yöneticisi, JS içeriğini kullanıcılara sunan ancak tarayıcılardan gizleyen gizleme adı verilen bir işlem kullanır. Ancak bu yöntem, Google'ın Web Yöneticisi Yönergeleri'nin ihlali olarak kabul edilir ve bunun için cezalandırılabilirsiniz. Bunun yerine, temel sorunları belirlemeye ve JS içeriğini arama motorları için erişilebilir hale getirmeye çalışın.

Zaman zaman site barındırıcısı istemeden engellenebilir ve Google'ın JS içeriğini görmesi engellenebilir. Örneğin, sitenizde farklı amaçlara hizmet eden birkaç alt alan adı varsa, alt alan adları ayrı bir web sitesi olarak ele alındığından her birinin ayrı bir robots.txt dosyasına sahip olması gerekir. Böyle bir durumda, bu robots.txt yönergelerinin hiçbirinin arama motorlarının oluşturma için gereken kaynaklara erişmesini engellemediğinden emin olmanız gerekir.

İlgili HTTP durum kodlarını kullanın

Google tarayıcıları, bir sayfayı tararken sorunları belirlemek için HTTP durum kodlarını kullanır. Bu nedenle, bir sayfanın taranmaması veya dizine eklenmesi gerekip gerekmediğini botlara bildirmek için anlamlı bir durum kodu kullanmalısınız. Örneğin, bir sayfanın yeni bir URL'ye taşındığını botlara bildirmek için 301 HTTP durumunu kullanabilir ve Google'ın dizinini buna göre güncellemesine izin verebilirsiniz.

Bu HTTP durum kodları listesine bakın ve bunları ne zaman kullanacağınızı öğrenin:

Kaynak

Yinelenen içeriği düzeltin

Web siteleri için JavaScript kullanıldığında, aynı içerik için farklı URL'ler olabilir. Bu, genellikle büyük harf kullanımı, kimlikler veya kimlikleri olan parametrelerden kaynaklanan yinelenen içerik sorunlarına neden olur. Bu tür sayfaları bulduğunuzdan emin olun, dizine eklenmesini istediğiniz orijinal/tercih edilen URL'yi seçin ve arama motorlarının kafasının karışmasını önlemek için standart etiketler ayarlayın.

Geç yüklenen içeriği ve görüntüleri düzeltin

Site hızı SEO için kritik öneme sahiptir. Geç yükleme, kritik olmayan veya görünür olmayan içeriğin yüklenmesini erteleyen ve böylece ilk sayfa yükleme süresini azaltan en iyi UX uygulamalarından biridir. Ancak sayfaların daha hızlı yüklenmesini sağlamanın yanı sıra, içeriğinizin arama motoru tarayıcıları tarafından erişilebilir olmasını da sağlamanız gerekir. Bu tarayıcılar, JavaScript'inizi yürütmez veya tembel yüklü içeriği yönlendirmek için sayfayı kaydırmaz ve SEO'nuzu olumsuz etkiler.

Dahası, görsel aramalar da ek bir organik trafik kaynağıdır. Bu nedenle, tembel yüklü resimleriniz varsa, arama motorları onları seçmeyecektir. Geç yükleme, kullanıcılar için harika olsa da, botların potansiyel olarak kritik içeriği kaçırmasını önlemek için dikkatli bir şekilde yapılması gerekir.

JS SEO araçlarını kullanın

JavaScript koduyla ilgili sorunları belirlemenize ve düzeltmenize yardımcı olabilecek çok sayıda araç vardır. İşte avantajınız için kullanabileceğiniz birkaç tane.

• URL inceleme özelliği. Bu araç, Google Arama Konsolunda bulunur. Google tarayıcılarının sayfalarınızı dizine ekleyip tarayamadığını size gösterebilir.
• Arama motoru tarayıcıları. Bu araçlar, arama motorlarının sayfalarınızı nasıl taradığını etkili bir şekilde test etmenize ve izlemenize olanak tanır.
• Sayfa Hızı Analizleri. Google'ın Sayfa Hızı Öngörüleri, sitenizin performansıyla ilgili ayrıntıları paylaşır ve nasıl iyileştirilebileceğine ilişkin öneriler sunar.
• Site: Komut. Bu araç, Google'ın içeriğinizi doğru şekilde dizine ekleyip eklemediğini görmenize yardımcı olur. Tek yapmanız gereken Google'a şu komutu girmek - site: [web sitesi URL'si] "metin snippet'i veya sorgusu"

JavaScript SEO zorlukları

Artık, arama motorlarının JavaScript içeriğini nasıl işlediğine ve web sitenizi SEO başarısına giden hızlı yolda ayarlamak için neler yapabileceğinize dair adil bir fikriniz var. Ancak, SEO uzmanları ve web yöneticilerinin karşılaştığı birkaç zorluk daha var. Bunların çoğu, JavaScript tabanlı web sitelerini optimize ederken yaptıkları hatalardan kaynaklanmaktadır.

1. Küçültülmemiş JavaScript ve CSS dosyaları

JS web sitenizi denetlemek için SEO araçları kullanıyorsanız, muhtemelen küçültülmemiş Javascript ve CSS ile ilgili sorunlarla ilgili bir uyarıyla karşılaşırsınız. Bir süre boyunca, JS ve CSS dosyaları, gereksiz kod satırları, beyaz boşluklar, kaynak koddaki yorumlar ve harici sunucularda barındırma nedeniyle web sitenizi yavaşlatır. Sayfaların yüklenme süresini azaltmak, etkileşim oranını artırmak ve SEO'yu artırmak için gereksiz satırlardan, boşluklardan ve yorumlardan kurtulduğunuzdan emin olun.

2. URL'lerde karma kullanımı

John Mueller'in bir SEO etkinliğinde kötü URL'ler hakkında söylediklerini hatırlıyor musunuz?

"Bizim için, orada bir tür karma görürsek, o zaman bu, orada kalanların muhtemelen alakasız olduğu anlamına gelir. Çoğunlukla, içeriği dizine eklemeye çalıştığımızda bunu bırakacağız…”

Yine de birkaç JS tabanlı site, karma içeren URL'ler oluşturur. Bu, SEO'nuz için felaket olabilir. URL'nizin Google dostu olduğundan emin olun. Kesinlikle böyle görünmemelidir:

www.example.com/#/about -us VEYA

www.example.com/about#us

3. Dahili link yapısını kontrol etmemek

Google, sitenizdeki URL'leri bulmak için uygun <a href> bağlantılarına ihtiyaç duyar. Ayrıca, bir düğme tıklandıktan sonra bağlantılar DOM'a eklenirse, botlar bunları göremez. Çoğu web yöneticisi bu noktaları kaçırır ve SEO'larının zarar görmesine neden olur.

Geleneksel 'href' bağlantısını sağlamaya ve onları botlar için erişilebilir hale getirmeye özen gösterin. Sitenizin dahili bağlantı yapısını iyileştirmek için web sitesi denetim aracı olan SEOprofiler'ı kullanarak bağlantılarınızı kontrol edin.

Uygun bir bağlantı yapısı hakkında rehberlik için Google I/O konferansı sırasında Tom Greenway tarafından hazırlanan bu sunuma göz atın:

Çözüm

JavaScript, şüphesiz web sitelerinin işlevselliğini genişletir. Ancak JavaScript ve arama motorları her zaman birlikte hareket etmez. JavaScript, arama motorlarının bir siteyi tarama ve dizine ekleme şeklini etkiler, böylece sıralamasını etkiler. Bu nedenle, arama uzmanları, arama motoru botlarının JS içeriğini nasıl işlediğini anlamalı ve JavaScript'in SEO stratejilerine tam olarak uymasını sağlamak için gerekli adımları atmalıdır.

JS tabanlı bir web siteniz varsa ve içeriğinizi Google'da bulamıyorsanız, sorunları çözmenin zamanı geldi. SEO için JavaScript'i optimize etmek ve getirilerinizi artırmak için bu gönderide paylaşılan bilgileri ve ipuçlarını kullanın.