Vue.js ve SEO: Arama Motorları ve Botlar İçin Reaktif Web Sitelerini Nasıl Optimize Edebilirsiniz?

Reaktif JavaScript Çerçeveleri (React, Vue.js ve Angular gibi) son zamanlarda oldukça revaçta ve esneklikleri, modülerlikleri ve otomatik test kolaylığı nedeniyle giderek daha fazla web sitesinde ve uygulamada kullanılmalarına şaşmamalı.

Bu çerçeveler, bir web sitesinde veya uygulamada yeni, önceden düşünülemez şeyler elde edilmesini sağlar, ancak SEO açısından nasıl performans gösterirler? Bu çerçeveler ile oluşturulan sayfalar Google tarafından indeksleniyor mu? Bu çerçevelerde, sayfa oluşturma işleminin tamamı veya çoğu JavaScript'te yapıldığından (ve botlar tarafından indirilen HTML çoğunlukla boş olduğundan), web sitelerinizin dizine eklenmesini istiyorsanız, hiç kullanılmayacak gibi görünüyor. arama motorları ve hatta genel olarak botlar tarafından ayrıştırılır.

Bu yazıda daha çok Vue.js hakkında konuşacağım, çünkü en çok kullandığım ve büyük projelerde arama motorları tarafından indeksleme konusunda doğrudan deneyim sahibi olduğum framework. anlatacaklarım diğer çerçeveler için de geçerlidir.

Sorunun Arka Planı

Dizin Oluşturma Nasıl Çalışır?

Web sitenizin Google tarafından dizine eklenmesi için, her sayfanın içindeki bağlantıları takip ederek Googlebot (web sitenizi ziyaret eden ve sayfaların içeriğini kendi dizinine kaydeden otomatik bir dizin oluşturma yazılımı) tarafından taranması gerekir. Googlebot ayrıca, genel sitenizden doğru şekilde bağlanamayan 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 sitelerinde özel Site Haritası XML dosyaları arar.

Biraz Tarih

Birkaç yıl öncesine kadar (2009'dan önce), Google, JavaScript tarafından oluşturulan tüm içerik 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ğinden JavaScript tarafından yazılmaması gerektiği yaygın bir SEO bilgisiydi ve Google, web sitesinin sahibi deniyormuş gibi “sahte içerik” olarak değerlendirebileceğinden web sitesi için bir cezaya neden olabilir . kullanıcılara arama motorlarına gösterilenden farklı bir şey göstermek ve ikincisini kandırmaya çalışmak.

Örneğin, HTML'ye çok sayıda SEO dostu içerik koyup JavaScript'te gizlemek dolandırıcılar tarafından çok yaygın bir uygulamaydı. Google her zaman bu uygulamaya karşı uyardı:

"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ıdır."

Bunun için ceza alabilirsiniz. Bazı durumlarda, sunucu tarafında farklı kullanıcı aracılarına farklı içerik sunduğunuz için ve ayrıca sayfa yüklendikten sonra JavaScript aracılığıyla içerik değiştirdiğiniz için cezalandırılabilirsiniz. Sanırım bu bize, Google'ın JavaScript çalıştıran web sitelerini uzun süredir dizine eklediğini gösteriyor - en azından web sitesinin son HTML'sini (JavaScript yürütmesinden sonra) ve dizinleri için ayrıştırdığı ham HTML'yi karşılaştırmak adına. Ancak Googlebot, JavaScript'i her zaman yürütmedi ve Google, JavaScript tarafından oluşturulan içeriği dizine ekleme amacıyla kullanmıyordu.

Ardından, 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 eklemesine yardımcı olmak için bir "AJAX tarama şeması" önerdi. Çok karmaşıktı; temel olarak web sitesinin AJAX içeriğinin dahil olduğu bir sayfa oluşturmasını gerektiriyordu. Google tarafından istendiğinde, sunucu, HTML sayfasında bulunan JavaScript tarafından dinamik olarak oluşturulacak içeriğin tamamını (veya çoğunu) içeren sayfanın bir sürümünü sağlar - içeriğin bir HTML Anlık Görüntüsü olarak önceden oluşturulur. Sunucu taraflı bir çözüme sahip olma süreci, (diğer tüm amaçlar için) istemci tarafında oluşturulması amaçlanan içerik sunar; bu, JavaScript'e büyük ölçüde güvenen bir siteye sahip olmak isteyenlerin Google'da dizine eklenmesi gerektiğini ima etti. teknik güçlükler.

Örneğin, AJAX tarafından okunan içerik harici bir web hizmetinden geliyorsa, sunucu tarafında aynı web hizmeti çağrılarını çoğaltmak ve istemci tarafında üretilecek aynı HTML'yi sunucu tarafında üretmek gerekiyordu. JavaScript - veya en azından çok benzer bir tane. Bu çok karmaşıktı çünkü Node.js'nin ortaya çıkmasından önce, aynı işleme mantığının en azından kısmen iki farklı programlama dilinde çoğaltılması gerekiyordu: ön uç için JavaScript ve PHP, Java, Python, Ruby, vb. arka uç. Buna " sunucu tarafı oluşturma " denir ve bu, bakım cehennemine yol açabilir: içeriği ön uçta nasıl oluşturduğunuz konusunda önemli değişiklikler yaptıysanız, bu değişiklikleri arka uçta çoğaltmanız gerekiyordu.

Mantığı kopyalamaktan kaçınmanın tek alternatifi, kendi sitenizi JavaScript çalıştıran bir tarayıcı ile ayrıştırmak ve sonuçları sunucunuza kaydedip Googlebot'a sunmaktı. Bu, şu anda “ ön işleme ” olarak adlandırılan şeye benzer.

Google (AJAX tarama şemasıyla), bu durumda Googlebot'a ve kullanıcıya farklı içerik sunmanız nedeniyle cezalardan kaçınmanızı da garanti etti. Ancak, 2015'ten beri Google, web sitesi yöneticilerine aşağıdakileri söyleyen resmi bir blog gönderisiyle bu uygulamayı kullanımdan kaldırmıştır:

"Bugün, Googlebot'un JavaScript veya CSS dosyalarınızı taramasını engellemediğiniz sürece, genellikle web sayfalarınızı modern tarayıcılar gibi oluşturabiliyor ve anlayabiliyoruz."

Bunun bize söylediği şey, Googlebot'un web sayfalarını dizine eklerken JavaScript yürütme yeteneğini birdenbire edindiği değildi, çünkü bunu çok uzun süredir yaptığını biliyoruz (en azından sahte içerik ve dolandırıcılık olup olmadığını kontrol etmek için). Bunun yerine, JavaScript yürütme sonucunun dizine alınacağını ve SERP'lerde kullanılacağını söyledi.

Bu, artık Google'a 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 önceden oluşturma için her türlü aracın kullanıma sunulduğunu görüyoruz, öyle değil gibi görünüyor. Ayrıca, büyük projelerde SEO ajansları ile uğraşırken, ön render almanın zorunlu olduğu görülüyor. Nasıl olur?

Google, Front-End Çerçevelerle Oluşturulan Sayfaları Aslında Nasıl Dizine Ekler?

Deney

Google'ın bir ön uç çerçeve ile oluşturulmuş web sitelerinde gerçekte neyi indekslediğini görmek için küçük bir deney yaptım. Tüm kullanım durumlarını kapsamaz, ancak en azından Google'ın davranışı hakkında daha fazla bilgi edinmenin bir yoludur. 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 birlikte bir karakter listesi var:

• Vue.js ana kabının dışındaki statik HTML'deki bazı metinler;
• Bazı metinler, uygulamanın kodunda zaten mevcut olan değişkenlerde yer aldığından Vue.js tarafından hemen oluşturulur: bunlar bileşenin data nesnesinde tanımlanır;
• #Bazı metinler Vue.js tarafından data nesnesinden işlenir, ancak 300ms gecikmeyle;
• Karakter bios'u, Sandbox kullanarak bilerek oluşturduğum bir dizi dinlenme API'sinden geliyor. Google'ın web sitesinin kodunu yürüteceğini ve bir süre sonra sayfanın mevcut durumunun anlık görüntüsünü almak için duracağını varsaydığımdan, her web hizmetini ilki 0ms, ikincisi 300ms olmak üzere artan bir gecikmeyle yanıt verecek şekilde ayarladım, üçü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 bir alt sayfaya bağlantı içerir, ancak sunucu tarafında değil (bunun URL'sini ararsanız). sayfa, sunucudan yanıt alamıyorsunuz), bunların da dizine eklenip eklenmediğini kontrol edin. Sunucu tarafı oluşturan uygun bağlantılar olmadığı için bunların dizine eklenmeyeceğini varsaydım ve Google'ın kullanıcıları doğrudan bu bağlantılara yönlendirmesinin hiçbir yolu yok. Ama sadece kontrol etmek istedim.

Bu küçük test sitesini Github Sayfalarımda yayınladım ve indeksleme talebinde bulundum - bir göz atın.

Sonuçlar

Deneyin sonuçları (ana sayfayla ilgili) aşağıdaki gibidir:

• Halihazırda statik HTML içeriğinde bulunan içerikler Google tarafından indekslenir (ki bu oldukça açıktır);
• Vue tarafından gerçek zamanlı olarak oluşturulan içerikler her zaman Google tarafından indekslenir;
• Vue tarafından oluşturulan, ancak 300ms sonra işlenen içerikler de indekslenir;
• Web hizmetinden gelen içerikler biraz gecikmeyle dizine alınabilir , ancak her zaman değil. Google'ın sayfayı indekslemesini farklı anlarda kontrol ettim ve en son eklenen içerik (birkaç saniye sonra) bazen indekslendi, bazen indekslenmedi. Oldukça hızlı bir şekilde oluşturulan içerik, harici bir web hizmetine eşzamansız 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ı olarak 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 sayfalar (doğrudan bağlantı olarak erişilemediği için) beklendiği gibi dizine eklenmez.

Bu deney bize ne anlatıyor? Temel olarak, Google, harici bir web hizmetinden gelse bile dinamik olarak oluşturulmuş içeriği dizine ekler, ancak içeriğin "çok geç gelmesi" durumunda dizine ekleneceği garanti edilmez. Bu denemenin yanı sıra diğer gerçek, üretim web sitelerinde de benzer deneyimler yaşadım.

Rekabetçi SEO

Tamam, içerik dizine ekleniyor , ancak bu deneyin bize söylemediği şey şu: içerik rekabetçi bir şekilde sıralanacak mı? Google, dinamik olarak oluşturulmuş bir web sitesine statik içerikli bir web sitesini tercih eder mi? Bu cevaplaması kolay bir soru değil.

Deneyimlerime göre, dinamik olarak oluşturulan içeriğin SERPS'in en üst sıralarında yer alabileceğini söyleyebilirim. Büyük bir otomobil şirketinin yeni bir modeli için web sitesinde çalıştım, yeni bir üçüncü düzey alan adına sahip yeni bir web sitesi başlattım. Site tamamen Vue.js ile oluşturuldu - statik HTML'de <title> etiketleri ve meta açıklamaların yanı sıra çok az içerik vardı.

Site, yayınlandıktan sonraki ilk birkaç gün içinde küçük aramalar için sıralamaya başladı ve SERP'lerdeki metin parçacıkları, kelimelerin doğrudan dinamik içerikten geldiğini bildirdi.

Üç ay içinde, o araba modeliyle ilgili çoğu aramada ilk sırada yer aldı - bu, arabanın üreticisine ait resmi bir alan adında barındırıldığı için nispeten kolaydı ve alan adı, saygın web sitelerinden yoğun bir şekilde bağlantılıydı.

Ancak projeden sorumlu SEO şirketinin güçlü muhalefetiyle karşılaşmak zorunda kaldığımız gerçeği göz önüne alındığında, sonucun hala dikkate değer olduğunu düşünüyorum.

Proje için verilen sürelerin kısıtlı olması ve zaman yetersizliğinden dolayı siteyi ön render almadan yayınlayacaktık.

Hareketli Metin

Google'ın dizine eklemediği şey, yoğun şekilde canlandırılan metinlerdir. Çalıştığım şirketlerden biri olan Rabbit Hole Consulting'in sitesi, kullanıcı kaydırırken gerçekleştirilen ve metnin farklı etiketler arasında birkaç parçaya bölünmesini gerektiren birçok metin animasyonu içeriyor.

Web sitesinin ana sayfasındaki ana metinler, SEO için optimize edilmediğinden arama motoru indeksleme amaçlı değildir. Teknolojik konuşmalardan yapılmazlar ve anahtar kelimeler kullanmazlar: yalnızca kullanıcıya şirket hakkında kavramsal bir yolculukta eşlik etmeleri içindir. Kullanıcı ana sayfanın çeşitli bölümlerine girdiğinde metin dinamik olarak eklenir.

Web sitesinin bu bölümlerindeki metinlerin hiçbiri Google tarafından indekslenmez. Google'ın SERP'lerde anlamlı bir şey göstermesini sağlamak için, iletişim formunun altındaki altbilgiye bazı statik metinler ekledik ve bu içerik SERP'lerde sayfa içeriğinin bir parçası olarak görünüyor.

Altbilgideki metin, sayfanın en altına kaydırıp iletişim formunu açmak için “Sorular” düğmesini tıklamadıkça kullanıcılar tarafından hemen görülmese de, SERP'lerde indekslenir ve gösterilir. Bu, istek üzerine veya uzun bir gecikmeden sonra oluşturulmak yerine, HTML'de kısa süre içinde oluşturulduğu sürece, içeriğin kullanıcıya hemen gösterilmese bile dizine eklendiğini doğrular.

Peki ya Ön İşleme?

Öyleyse, sunucu tarafında mı yoksa proje derleme zamanında mı yapılsın, ön işleme ile ilgili tüm bu yaygara neden? Gerçekten gerekli mi? Nuxt gibi bazı çerçeveler gerçekleştirmeyi çok daha kolay hale getirse de, yine de piknik değildir, bu nedenle kurup kurmama seçimi hafif değildir.

Bence zorunlu değil . Google tarafından dizine eklenmesini istediğiniz içeriğin birçoğunun harici web hizmetinden gelmesi ve oluşturulduğunda hemen mevcut olmaması ve örneğin bazı talihsiz durumlarda, örneğin şu nedenlerle hiç kullanılamaması kesinlikle bir zorunluluktur. , web hizmeti kesinti. Googlebot'un ziyaretleri sırasında içeriğinizin bir kısmı çok yavaş geliyorsa, dizine eklenmemiş olabilir . Googlebot, sayfanızı tam olarak web hizmetlerinizde bakım yaptığınız bir anda dizine eklerse, herhangi bir dinamik içeriği dizine eklemeyebilir.

Ayrıca, statik içerik ile dinamik olarak oluşturulmuş içerik arasındaki sıralama farklarına dair hiçbir kanıtım yok. Bu başka bir deney gerektirebilir. İçerik harici web servisinden geliyorsa ve hemen yüklenmezse, Google'ın sitenizin performansına ilişkin algısını etkileyebileceğini düşünüyorum, bu da sıralama için çok önemli bir faktördür.

Önerilen okuma : Mobil Web Tasarımı Yerel Aramayı Nasıl Etkiler (Ve Bu Konuda Yapılması Gerekenler)

Diğer Hususlar

uyumluluk

Yakın zamana kadar Googlebot, Chromium'un oldukça eski bir sürümünü (Google Chrome'un dayandığı açık kaynaklı proje), yani 41 sürümünü kullanıyordu. Bu, bazı yeni JavaScript veya CSS özelliklerinin Google tarafından doğru şekilde oluşturulamadığı anlamına geliyordu (ör. IntersectionObserver, ES6 sözdizimi vb.).

Google kısa süre önce, Googlebot'ta Chromium'un en son sürümünün (bu yazının yazıldığı sırada 74) çalıştığını ve sürümün düzenli olarak güncelleneceğini duyurdu. Google'ın Chromium 41'i çalıştırıyor olması, IE11 ve diğer eski tarayıcılarla uyumluluğu göz ardı etmeye karar veren siteler için büyük sonuçlar doğurmuş olabilir.

Burada Chromium 41 ve Chromium 74'ün özellikler için desteğinin bir karşılaştırmasını görebilirsiniz, ancak siteniz daha eski tarayıcılarla uyumlu kalmak için zaten çoklu doldurma eksik özellikleri içeriyorsa, sorun olmamalıydı.

Hangi tarayıcının yaygın olduğunu düşündüğünüz özellikler için desteği kaçırdığını asla bilemeyeceğiniz için her zaman çoklu dolgu kullanın . Örneğin Safari, IntersectionObserver gibi büyük ve çok kullanışlı yeni bir özelliği Mart 2019'da çıkan 12.1 sürümüne kadar desteklemiyordu.

JavaScript Hataları

Önemli içeriği oluşturmak için JavaScript'inizi yürüten Googlebot'a güveniyorsanız, içeriğin oluşturulmasını engelleyebilecek büyük JavaScript hatalarından her ne pahasına olursa olsun kaçınılmalıdır. Botlar, tamamen geçerli olmayan HTML'yi ayrıştırıp indeksleyebilir (her ne kadar herhangi bir sitede geçerli HTML'ye sahip olmak her zaman tercih edilir olsa da!), bazı içeriğin yüklenmesini engelleyen bir JavaScript hatası varsa, Google'ın dizine eklemesi mümkün değildir. o içerik.

Her durumda, hayati içeriği son kullanıcılarınıza sunmak için JavaScript'e güveniyorsanız, muhtemelen her türden engelleme hatasını kontrol etmek için kapsamlı birim testleriniz var demektir. Ancak Javascript hatalarının, örneğin API yanıtlarındaki hataların uygunsuz şekilde ele alınması durumunda, öngörülemeyen senaryolardan kaynaklanabileceğini unutmayın.

Ünite veya manuel test sırasında seçemeyeceğiniz uç durum hataları konusunda sizi uyaracak bazı gerçek zamanlı hata kontrol yazılımlarının (Sentry veya LogRocket gibi) yerinde olması daha iyidir. Bu, SEO içeriği için JavaScript'e güvenmenin karmaşıklığını artırır.

Diğer Arama Motorları

Diğer arama motorları dinamik içerikle Google kadar iyi çalışmıyor . Bing, dinamik içeriği hiç endekslemiyor gibi görünüyor, DuckDuckGo veya Baidu da yapmıyor. Muhtemelen bu arama motorları, Google'ın sahip olduğu kaynaklar ve bilgi işlem gücünden fazlasıyla yoksundur.

Bir sayfayı başsız bir tarayıcıyla ayrıştırmak ve oluşturulan içeriği ayrıştırmak için JavaScript'i birkaç saniye çalıştırmak, yalnızca düz HTML okumaktan kesinlikle daha fazla kaynak gerektirir. Ya da belki bu arama motorları başka nedenlerle dinamik içeriği taramamayı tercih etmiştir. Bunun nedeni ne olursa olsun, projenizin bu arama motorlarından herhangi birini desteklemesi gerekiyorsa, ön işlemeyi ayarlamanız gerekir.

Not : Diğer arama motorlarının render yetenekleri hakkında daha fazla bilgi almak için Bartosz Goralewicz'in bu makalesine göz atabilirsiniz. Biraz eski ama tecrübelerime göre hala geçerli.

Diğer Botlar

Sitenizin diğer botlar tarafından da ziyaret edileceğini unutmayın. En önemli örnekler, kullanıcıları tarafından bağlandığında sayfanızın bir önizlemesini göstermek için sayfalarınız hakkında meta bilgiler alması gereken Twitter, Facebook ve diğer sosyal medya botlarıdır. Bu botlar dinamik içeriği dizine eklemez ve yalnızca statik HTML'de buldukları meta bilgileri gösterir. Bu bizi bir sonraki değerlendirmeye götürür.

alt sayfalar

Siteniz sözde "Tek Sayfa web sitesi" ise ve ilgili tüm içerik tek bir ana HTML'de bulunuyorsa, bu içeriğin Google tarafından dizine eklenmesinde sorun yaşamayacaksınız. Bununla birlikte, Google'ın web sitesinde herhangi bir ikincil sayfayı dizine eklemesine ve göstermesine ihtiyacınız varsa, bunların her biri için statik HTML oluşturmanız gerekir - mevcut URL'yi kontrol etmek ve ilgili içeriği sağlamak için JavaScript Çerçevenize güvenseniz bile. o sayfada. Bu durumda tavsiyem, en azından doğru title etiketi ve meta açıklama/bilgi sağlayan sunucu tarafı (veya statik) sayfalar oluşturmaktır.

Sonuçlar

Bu makaleyi araştırırken vardığım sonuçlar şunlar:

1. Yalnızca Google'ı hedefliyorsanız, sitenizin tam olarak dizine eklenmesi için önceden oluşturmayı kullanmak zorunlu değildir , ancak:
2. Dizine eklenmesi gereken içerik için, özellikle de hızlı yanıt vermiyorlarsa, üçüncü taraf web hizmetlerine güvenmemelisiniz .
3. Vue.js oluşturma yoluyla hemen HTML'nize eklediğiniz içerik dizine eklenir, ancak kaydırma vb. gibi kullanıcı eylemlerinden sonra DOM'a eklenen hareketli metin veya metin kullanmamalısınız.
4. Tüm sayfaların/bölümlerin dizine eklenmemesine veya sitenizin hiç dizine eklenmemesine neden olabileceğinden JavaScript hatalarını test ettiğinizden emin olun.
5. Sitenizde birden fazla sayfa varsa , ana sayfayla aynı ön uç oluşturma sistemine güvenirken Google tarafından ayrı URL'ler olarak dizine eklenebilen sayfalar oluşturmak için yine de biraz mantığa sahip olmanız gerekir.
6. Farklı sayfalar arasında sosyal medya için farklı açıklamalara ve önizleme resimlerine ihtiyacınız varsa, bunu da sunucu tarafında veya her URL için statik sayfalar derleyerek ele almanız gerekecektir.
7. Sitenizin Google dışındaki arama motorlarında performans göstermesine ihtiyacınız varsa, kesinlikle bir tür ön işlemeye ihtiyacınız olacaktır.