Reaktif JavaScript Çerçeveleri (React, Vue.js ve Angular gibi) son zamanlarda öfkelidir ve esneklikleri, modülerlikleri ve otomatik test kolaylığı nedeniyle giderek daha fazla web sitesinde ve uygulamada kullanılmaları şaşırtıcı değildir.
Bu çerçeveler, bir web sitesinde veya uygulamada yeni, daha önce düşünülemeyen şeyler elde etmesine izin verir, ancak SEO açısından nasıl performans gösterirler? Bu çerçevelerle oluşturulan sayfalar Google tarafından dizine eklenir mi? Bu çerçevelerle, sayfa oluşturmanın tümü veya çoğu JavaScript'te yapıldığından (ve botlar tarafından indirilen HTML çoğunlukla boştur), web sitelerinizin arama motorlarında dizine eklenmesini veya hatta genel olarak botlar tarafından ayrıştırılmasını istiyorsanız, bunların bir no-go olduğu görülmektedir.
Bu yazıda çoğunlukla Vue.js bahsedeceğim, çünkü en çok kullandığım ve büyük projelerde arama motorları tarafından indeksleme konusunda doğrudan deneyimlerim olduğu için ancak ele alacağım şeylerin çoğunun diğer çerçeveler için de geçerli olduğunu varsayabilirim.
DIZIN OLUŞTURMA NASIL ÇALIŞIR?
Web sitenizin Google tarafından dizine eklenmesi için, her sayfadaki bağlantıları izleyerek Googlebot (web sitenizi ziyaret eden ve sayfaların içeriğini dizinine kaydeden otomatik bir dizine ekleme yazılımı) tarafından taranması gerekir. Googlebot ayrıca, genel sitenizden doğru şekilde bağlanmamış olabilecek sayfaları bulmak ve web sitesindeki sayfaların ne sıklıkta değiştiği ve en son ne zaman değiştikleri hakkında ek bilgi almak için web sitelerindeki özel Site Haritası XML dosyalarını da arar.
BIRAZ TARIH
Birkaç yıl öncesine kadar (2009'dan önce), Google, JavaScript tarafından oluşturulan tüm içerikler hariç, bir web sitesinin HTML'sinin içeriğini dizine eklerdi. Önemli bağlantıların ve içeriğin Google tarafından dizine eklenmeyeceği için JavaScript tarafından yazılmaması gerektiği yaygın SEO bilgisiydi ve web sitesi için bir cezaya neden olabilir, çünkü Google, web sitesinin sahibi, kullanıcılara arama motorlarına gösterilenden farklı bir şey göstermeye çalışıyormuş gibi "sahte içerik" olarak değerlendirebilir ve ikincisini kandırmaya çalışır.
Örneğin, dolandırıcılar tarafından HTML'ye çok sayıda SEO dostu içerik koymak ve JavaScript'te gizlemek çok yaygın bir uygulamaydı. Google her zaman bu uygulamaya karşı uyarmıştır:
"Googlebot'a normal bir kullanıcının göreceğinden farklı içerik sunmak, gizleme olarak kabul edilir ve Web Yöneticisi Yönergelerimize aykırı olur."
Bunun için cezalandırılabilirsin. Bazı durumlarda, sunucu tarafındaki farklı kullanıcı aracılarına farklı içerik sunduğunuz için değil, aynı zamanda sayfa yüklendikten sonra JavaScript aracılığıyla içerik değiştirdiğiniz için cezalandırılabilirsiniz. Bence bu bize Google'ın uzun süredir JavaScript çalıştıran web sitelerini dizine eklediğini gösteriyor – en azından web sitesinin son HTML'sini (JavaScript yürütüldükten sonra) ve dizinleri için ayrıştırdığı ham HTML'yi karşılaştırmak uğruna. Ancak Googlebot her zaman JavaScript çalıştırmadı ve Google, JavaScript tarafından oluşturulan içeriği dizine ekleme amacıyla kullanmıyordu.
Daha sonra, web sitelerinde dinamik içerik sunmak için AJAX'ın artan kullanımı göz önüne alındığında, Google, kullanıcıların AJAX tabanlı web sitelerini dizine eklemelerine yardımcı olmak için bir "AJAX tarama şeması" önerdi. Çok karmaşıktı; temel olarak web sitesinin AJAX içeriği içeren sayfaların oluşturulmasını gerektiriyordu. Google tarafından istendiğinde, sunucu, HTML sayfasına dahil edilen JavaScript tarafından dinamik olarak oluşturulacak içeriğin tümünü (veya çoğunu) içeren sayfanın bir sürümünü sağlar - içeriğin HTML Anlık Görüntüsü olarak önceden oluşturulur. Sunucu tarafı bir çözümün, istemci tarafında oluşturulması amaçlanan içeriği (diğer tüm amaçlar için) sunması süreci, Google'da dizine eklenmiş JavaScript'e büyük ölçüde dayanan bir siteye sahip olmak isteyenlerin birçok teknik güçlükten geçmesi gerektiğini ima etti.
Örneğin, AJAX tarafından okunan içerik harici bir web hizmetinden geliyorsa, aynı web hizmeti çağrılarını sunucu tarafında çoğaltmak ve sunucu tarafı, JavaScript tarafından istemci tarafında üretilecek olan aynı HTML'yi veya en azından çok benzer bir HTML üretmek gerekiyordu. Bu çok karmaşıktı, çünkü Node.js'un ortaya çıkmasından önce, aynı oluşturma mantığını iki farklı programlama dilinde en azından kısmen çoğaltmak gerekiyordu: ön uç için JavaScript ve arka uçta PHP, Java, Python, Ruby vb. Buna "sunucu tarafı oluşturma" denir ve bakım cehennemine yol açabilir: ön uçta içeriği nasıl oluşturduğunuzda önemli değişiklikler yaptıysanız, bu değişiklikleri arka uçta çoğaltmanız gerekir.
Mantığı çoğaltmaktan kaçınmanın tek alternatifi, kendi sitenizi JavaScript çalıştıran bir tarayıcıyla ayrıştırmak ve nihai sonuçları sunucunuza kaydetmek ve bunları Googlebot'a sunmaktı. Bu, şimdi "ön işleme" olarak adlandırılan şeye benzer.
Google (AJAX tarama şemasıyla), bu durumda Googlebot'a ve kullanıcıya farklı içerikler sunduğunuz için cezalardan kaçınacağınızı da garanti etti. Ancak, 2015'ten bu yana Google, web sitesi yöneticilerine aşağıdakileri söyleyen resmi bir blog yazısıyla bu uygulamayı kullanımdan kaldırdı:
"Bugün, Googlebot'un JavaScript veya CSS dosyalarınızı taramasını engellemediğiniz sürece, web sayfalarınızı genellikle modern tarayıcılar gibi oluşturabiliyor ve anlayabiliyoruz."
Bunun bize söylediği şey, Googlebot'un web sayfalarını dizine eklerken aniden JavaScript yürütme yeteneğini kazandığı değildi, çünkü bunu çok uzun süredir yaptığını biliyoruz (en azından sahte içerik ve dolandırıcılıkları kontrol etmek için). Bunun yerine, JavaScript yürütmenin sonucunun dizine ekleneceğini ve SERP'lerde kullanılacağını söyledi.
Bu, Google'a artık sunucu tarafında oluşturulmuş HTML sağlama konusunda endişelenmemize gerek olmadığı anlamına geliyor. Ancak, JavaScript çerçeveleri için sunucu tarafı oluşturma ve ön işleme için her türlü aracın kullanıma sunulduğunu görüyoruz, durum böyle değil gibi görünüyor. Ayrıca, büyük projelerde SEO ajanslarıyla uğraşırken, ön işleme zorunlu olarak kabul edilir. Nasıl mı?
Google, Ön Uç Çerçeveleriyle Oluşturulan Sayfaları Aslında Nasıl Dizine Ekler?DENEY
Google'ın ön uç bir çerçeveyle oluşturulmuş web sitelerinde gerçekte neyi dizine eklediğini görmek için küçük bir deneme yaptım. Tüm kullanım örneklerini kapsamaz, ancak en azından Google'ın davranışı hakkında daha fazla bilgi edinmek için bir araçtır. Vue.js ile küçük bir web sitesi oluşturdum ve metnin farklı bölümlerinin farklı şekilde işlenmesini sağladım.
Web sitesinin içeriği, David Foster Wallace'ın Infinite Jest Wiki'deki Infinite Jest kitabının açıklamasından alınmıştır (teşekkürler çocuklar!). Tüm kitap için birkaç giriş metni ve bireysel biyografileriyle karakterlerin bir listesi var:
- Vue.js ana kapsayıcısının dışındaki statik HTML'deki bazı metinler;
- Bazı metinler Vue tarafından hemen işlenir.js çünkü uygulamanın kodunda zaten bulunan değişkenlerde bulunur: bileşenin nesnesinde tanımlanırlar;data
- #Some metin Vue tarafından nesneden .js, ancak 300 ms'lik bir gecikmeyle işlenir;data
- Karakter bios'u, Sandbox kullanarak bilerek oluşturduğum bir dizi rest API'den geliyor. Google'ın web sitesinin kodunu yürüteceğini ve sayfanın mevcut durumunun anlık görüntüsünü almak için bir süre sonra duracağını varsaydığımdan, her web hizmetini artımlı bir gecikmeyle yanıt verecek şekilde ayarladım, ilki 0ms, ikincisi 300ms, üçüncüsü 600ms ve benzeri 2700ms'ye kadar.
Her karakter biyografisi kısaltılır ve yalnızca Vue.js (URL'ler Vue.js tarafından geçmiş API'si kullanılarak oluşturulur) aracılığıyla erişilebilen, ancak sunucu tarafı (sayfanın URL'sini doğrudan çağırırsanız, sunucudan yanıt almazsınız) aracılığıyla erişilebilen bir alt sayfaya bağlantı içerir. Bunların dizine eklenmeyeceğini varsaydım, çünkü sunucu tarafını oluşturan uygun bağlantılar değiller ve Google'ın kullanıcıları doğrudan bu bağlantılara yönlendirmesinin bir yolu yok. Ama sadece kontrol etmek istedim.
SONUÇLAR
Deneyin sonuçları (ana sayfayla ilgili) aşağıdaki gibidir:
- Zaten statik HTML içeriğinde bulunan içerikler Google tarafından dizine eklenir (ki bu oldukça açıktır);
- Vue tarafından gerçek zamanlı olarak oluşturulan içerikler her zaman Google tarafından dizine eklenir;
- Vue tarafından oluşturulan, ancak 300 ms'den sonra oluşturulan içerikler de dizine eklenir;
- Web hizmetinden gelen içerikler, biraz gecikmeyle, dizine eklenebilir, ancak her zaman değil. Google'ın sayfayı farklı anlarda dizine eklemesini kontrol ettim ve en son eklenen içerik (birkaç saniye sonra) bazen dizine eklendi, bazen de eklenmedi. Oldukça hızlı bir şekilde işlenen içerik, harici bir web hizmetine yapılan zaman uyumsuz bir çağrıdan gelse bile, çoğu zaman dizine eklenir. Bu, Google'ın her sayfa ve site için dahili algoritmalarına bağlı olan bir oluşturma bütçesine sahip olmasına bağlıdır ve sitenizin sıralamasına ve Googlebot'un oluşturma kuyruğunun mevcut durumuna bağlı olarak çılgınca değişebilir. Bu nedenle, dizine eklenmek için harici web hizmetlerinden gelen içeriğe güvenemezsiniz;
- Alt sayfalara (doğrudan bağlantı olarak erişilemediğinden) beklendiği gibi dizine eklenmez.
Bu deney bize ne anlatıyor? Temel olarak, Google'ın harici bir web hizmetinden gelse bile dinamik olarak oluşturulan içeriği dizine eklemesi, ancak "çok geç gelmesi" durumunda içeriğin dizine ekleneceği garanti edilmez. Bu deneyin yanı sıra diğer gerçek, prodüksiyon web siteleriyle de benzer deneyimler yaşadım.
Tamam, içerik dizine ekleniyor, ancak bu denemenin bize söylemediği şey şu: İçerik rekabetçi bir şekilde sıralanacak mı? Google, statik içeriğe sahip bir web sitesini dinamik olarak oluşturulmuş bir web sitesine tercih eder mi? Bu cevaplaması kolay bir soru değil.
Deneyimlerime göre, dinamik olarak oluşturulan içeriğin SERP'lerin en üst sıralarında yer alabileceğini söyleyebilirim. Web sitesinde büyük bir otomobil şirketinin yeni bir modeli için çalıştım ve yeni bir üçüncü seviye alan adıyla yeni bir web sitesi başlattım. Site tamamen Vue.js ile oluşturuldu - etiketler ve açıklamalar dışında statik HTML'de çok az içerik vardı.
