SPA'lar için SEO'nun temelleri (Tek Sayfa Uygulamaları)

 Tarihsel olarak, web geliştiricileri yalnızca içerik için HTML, stil için CSS ve etkileşim öğeleri için JavaScript kullanıyordu. Web sayfalarına açılır iletişim kutuları ve genişletilebilir içerik eklemeyi mümkün kılan JS'dir. Artık, tüm sitelerin %97'sinden fazlası JavaScript kullanıyor çünkü bu, kullanıcı eylemlerine yanıt olarak web içeriğini değiştirme fırsatları sunuyor. 

JS'yi web sitelerine dahil etmenin nispeten yeni bir eğilimi, tek sayfalı uygulamalardır. Geleneksel web siteleri tüm kaynaklarını (HTML, CSS, JS) gerektiğinde her birini sunucudan isteyerek yüklerken, SPA'lar yalnızca bir ilk yükleme gerektirir ve bundan sonra sunucuyu rahatsız etmez, tüm işlemleri tarayıcıya bırakır. Bu, daha hızlı web siteleri ile sonuçlanır, ancak SEO için bir felaket olabilir. 

Bu yazıda, SPA'ların nasıl yapıldığını, neden optimize edilmelerinin bu kadar zor olduğunu ve arama motorlarının onları anlayıp iyi bir şekilde sıralayabilmesini nasıl sağlayacağımızı tartışacağız.

SPA nedir

Tek sayfalık uygulama veya SPA, web sitesi geliştirme için ilk sayfa görüntüleme yüklendikten sonra daha fazla sayfa yüklemesi gerektirmeyen JavaScript tabanlı belirli bir teknolojidir. React, Angular ve Vue, SPA oluşturmak için kullanılan en popüler JavaScript çerçeveleridir. Desteklenen kitaplıklarda ve API'lerde çoğunlukla farklılık gösterirler ancak aynı hızlı istemci tarafı işleme sunma mantığını kullanırlar. Birçok yüksek profilli web sitesi (Twitter, Pinterest, Airbnb) tek sayfalık bir uygulama mimarisiyle oluşturulmuştur.

SPA, sunucu ve tarayıcı arasındaki istekleri ortadan kaldırarak siteyi çok daha hızlı hale getirir. Ancak arama motorları bu JavaScript numarasından pek memnun değil. Olan şu ki, arama motorları yeterince içerik almıyor: gerçek kullanıcılar gibi tıklamazlar ve içeriğin dinamik olarak eklendiğini anlamazlar. Ellerinde kalan, henüz doldurulmamış boş bir sayfadır.

SPA'ların arkasındaki mekanikler

SPA'ların arkasındaki teknoloji, son kullanıcılar için elverişlidir: fazladan sayfa yüklemeleri ve düzen kaymalarından herhangi bir rahatsızlık duymadan web sayfalarında kolayca gezinebilirler. Tek sayfalık uygulama sitelerinin tüm kaynakları yerel bir depoda önbelleğe aldığı göz önüne alındığında (ilk istekte yüklendikten sonra), kullanıcılar kararsız bir bağlantı altında bile bunlara göz atmaya devam edebilir. Bu faydalar nedeniyle, ekstra SEO çabası gerektirse de, teknoloji sonsuza dek burada.

SPA'ları optimize etmek neden zor?

JS, web geliştirmeye hakim olmaya başlamadan önce, arama motorları yalnızca HTML'deki metin tabanlı içeriği tarıyordu. JS giderek daha popüler hale geldikçe Google, JS kaynaklarını yorumlamak ve onlarla sayfaları anlamak için işlevsellik eklemeyi düşünmeye başladı. Yıllar içinde önemli iyileştirmeler yaptılar, ancak arama tarayıcılarının tek sayfalık uygulamalardaki içeriği nasıl gördüğü ve içeriğe nasıl eriştiği konusunda hala birçok sorun var.

Diğer arama motorlarının tek sayfalık uygulamaları nasıl algıladığına dair çok az bilgi var, ancak hepsinin JavaScript'e dayanan web siteleri için deli olmadığını söylemek güvenli. Google'ın ötesindeki arama platformlarını hedefliyorsanız, oldukça zor durumdasınız demektir. 2017 Moz deneyi , yalnızca Google'ın ve şaşırtıcı bir şekilde Ask'ın JavaScript içeriğini tarayabildiğini, diğer tüm arama motorlarının JS'ye karşı tamamen kör kaldığını gösterdi. JS ve tek sayfalık uygulama web sitelerinin anlaşılması için çaba gösterilmesi konusunda Google dışında herhangi bir arama motoru tarafından bugün itibarıyla çığır açan bir duyuru yapılmadı. En azından bazı resmi öneriler var: örneğin, Bing de aynı önerileri yapıyorGoogle olarak—bingbot'un (ve diğer tarayıcıların) en eksiksiz ve anlaşılır sürüm olarak statik HTML almasına olanak tanıyan bir teknoloji olan sunucu tarafı ön oluşturmayı teşvik eder.

JavaScript'i anlamayan arama botları

Tarama sorunları

Arama motorları tarafından kolayca taranabilen HTML, bir SPA hakkında fazla bilgi içermez. <script> src niteliğinin yardımıyla harici bir JavaScript dosyası içerir . Tarayıcı komut dosyasını bu dosyadan çalıştırır ve içerik dinamik olarak yüklenir, ancak tarayıcı aynı işlemi gerçekleştiremeyebilir ve bu durumda gördüğü boş bir sayfa gibi görünür. 

2014'te Google, JS sayfalarını anlama işlevselliğini iyileştirdiklerini ve aynı zamanda JS açısından zengin web sitelerini dizine eklemelerini engelleyen birçok engelleyici olduğunu kabul ettiğini duyurdu. Google I/O '18 serisinde , Google analistleri JavaScript tabanlı siteler için iki dizi dizine ekleme dalgasından bahseder; bu, Googlebot'un kaynakları olduğunda içeriği yeniden oluşturduğu anlamına gelir. JavaScript'in çoğu Googlebot'tan çok daha fazla işlem gücü ve bellek gerektirdiğinden, tarama, oluşturma ve dizine ekleme döngüsü anında gerçekleşmez. Neyse ki 2019'da Google, JS tabanlı web sayfalarının tarayıcıdan oluşturucuya geçmesi için ortalama 5 saniyeye ihtiyaç duyduklarını söyledi. İki dalga indeksleme planına alıştığımız gibi, 2020'de Google'ınMartin Splitt artık böyle bir şey olmadığını söyledi. Daha doğrusu, bunun “daha ​​karmaşık” olduğunu.

Googlebot JavaScript'i nasıl işler?

Burada anlaşılması gereken en önemli şey, Google'ın web sayfalarında JavaScript'i nasıl işlediğinde bir gecikme olduğu ve istemci tarafında yüklenen tüm JS içeriğinin eksiksiz ve düzgün şekilde dizine eklenmiş olarak görülmeyebileceğidir. Arama motorları sayfayı keşfedebilir, ancak o sayfadaki kopyanın yüksek kaliteli olup olmadığını ve arama amacına uygun olup olmadığını anlayamaz.

404 hatasıyla ilgili sorunlar

Bir SPA ile, 404 hata sayfasının ve diğer birçok 200 olmayan sunucu durum kodunun arkasındaki geleneksel mantığı da kaybedersiniz . Her şey tarayıcı tarafından işlendiğinden, web sunucusu her isteğe 200 HTTP durum kodu döndürür ve arama motorları bazı sayfaların indeksleme için geçerli olup olmadığını söyleyemez. 

İzleme sorunları

SPA ile birlikte gelen bir diğer sorun da Google Analytics izlemedir. Geleneksel web siteleri için, analiz kodu, bir kullanıcı bir sayfayı her yüklediğinde veya yeniden yüklediğinde, her görüntülemeyi sayarak çalıştırılır. Ancak kullanıcılar tek sayfalık bir uygulamada farklı sayfalarda gezinirken, kod bir kez çalıştırılır ve her bir sayfa görüntülemeyi tetiklemez. Dinamik içerik yüklemenin doğası, GA'nın her sayfa görüntüleme için bir sunucu yanıtı almasını engeller. Neyse ki, tek sayfalık bir uygulama web sitesinde kullanıcı etkinliğini izlemek için yöntemler var (bunları daha sonra ele alacağız), ancak bunlar ek çaba gerektirir.

SPA'lar nasıl optimize edilir

Şimdilik, tek sayfalık uygulama web sitenizi tarayıcılara tamamen görünür hale getirmek için hangi işlemleri yapabileceğinizi görelim. Yararlı şeyler arasında, temiz, cilalı bir site haritası ve işleme ile ilgili bazı özel teknikler gibi SEO temellerini bulacaksınız. 

site haritası

SPA'lara özgü tarama ve dizine ekleme sorunlarıyla uğraşmadan önce, temelleri yaptığınızdan emin olun: düzgün biçimlendirilmiş bir site haritası dosyası oluşturun ve bunu Google'a gönderin. JS kaynakları konusunda size yardımcı olmayacak ama en azından arama motorları sayfalarınızın orada olduğunu ve web sitenizin hangi yapıya sahip olduğunu bilecek.

SE Sıralamasının Web Sitesi Denetimi , bir web sitesinin site haritasını birkaç sorun için kontrol edin:

Web Sitesi Denetiminde Site Haritası kontrolü

Sunucu tarafı oluşturma

Sunucu tarafı oluşturma (SSR), sunucuda bir web sitesi oluşturur ve ardından tarayıcıya gönderir. Bu teknik, arama botlarının JavaScript'e dayalı tüm içeriği taramasına izin verir. Bu, tarama ve indeksleme açısından hayat kurtarıcı olsa da, yükü yavaşlatabilir. SSR ile ilgili olan şey, SPA'ların doğası gereği zıt yaklaşımı kullanmasıdır: onları kullanıcılar için çok hızlı ve etkileşimli yapan ve aynı zamanda dağıtımda daha basit hale getiren istemci tarafı oluşturmadır.

izomorfik JS

Tek sayfalık bir uygulama için olası bir işleme çözümü, izomorfik veya "evrensel" JavaScript'tir. Isomorphic JS, web sayfalarını sunucuda oluşturur ve bir arama tarayıcısını JS dosyalarını yürütme ve oluşturma zorunluluğundan kurtarır. 

İzomorfik JavaScript uygulamalarının "sihri", hem sunucu hem de istemci tarafında çalışabilme yeteneklerinde yatar. Nasıl çalışır: Kullanıcılar, içeriği tarayıcı tarafından oluşturulmuş gibi bir web sitesiyle etkileşime girer, ancak aslında sunucu tarafında oluşturulan HTML dosyasını kullanırlar. Her popüler SPA çerçevesi için izomorfik uygulama geliştirmeyi kolaylaştıran çerçeveler vardır: örneğin, Next.js ve React için Gatsby . İlki, her istek için HTML üretirken, ikincisi statik bir web sitesi oluşturur ve HTML'yi bulutta depolar. Benzer şekilde, Nuxt.js for Vue, JS'yi sunucuda HTML'ye dönüştürür ve verileri tarayıcıya gönderir.

ön işleme

Tek sayfalık uygulamalar için başka bir başvurulacak çözüm, ön işlemedir. Bu, tüm HTML öğelerinin yüklenmesi ve ardından tarayıcılarda arama yapmak üzere sunucuda önbelleğe alınması anlamına gelir. Bir web sitesine yapılan istekleri engelleyen ve botları ve gerçek kullanıcıları aramak için farklı sayfa sürümleri gösteren Prerender ve BromBone gibi hizmetler vardır: önbelleğe alınmış HTML öncekine ve ikincisine "normal" JS açısından zengin içerik. 250'den az sayfaya sahip web siteleri Prerender'ı ücretsiz olarak kullanabilirken, daha büyük web siteleri 200 dolardan başlayan bir aylık ücret ödemek zorundadır. Bu basit bir çözüm: site haritası dosyasını yüklersiniz ve gerisini o halleder. BromBone , manuel bir site haritası yüklemesi bile gerektirmez ve aylık 129 ABD Doları tutarındadır. 

Tarayıcılara statik bir HTML sunmak için daha fazla zaman alan başka yöntemler de vardır. Örneğin, Headless Chrome ve yolları sayfalara dönüştürecek olan Puppeteer kitaplığını, HTML dosyalarının hiyerarşik ağacına dönüştürebilirsiniz. Ardından, önyükleme kodunu kaldırmanız ve ardından arama botlarına yönelik statik HTML'yi bulmak için sunucu yapılandırma dosyanızı düzenlemeniz gerekir.

SPA'lar için ön işleme

Özellik algılama ile aşamalı geliştirme

Özellik algılama, SPA'lar için Google'ın başlıca önerileri arasındadır. Bu teknik, deneyimi farklı kod kaynaklarıyla aşamalı olarak geliştirmeyi içerir. Nasıl çalışır: Basit bir HTML sayfası, tarayıcılar ve kullanıcılar için erişilebilir bir temel görevi görürken, üzerindeki özellikler (CSS ve JS kaynakları) ve tarayıcı desteğine göre etkinleştirir ve devre dışı bırakır. 

Özellik algılamayı uygulamak için, ihtiyacınız olan özellik API'lerinin her birinin her tarayıcıyla uyumlu olup olmadığını kontrol etmek için ayrı kod parçaları yazmanız gerekir. Neyse ki, Modernizr gibi zamandan tasarruf etmeye yardımcı  olan belirli kütüphaneler var .

URL olarak görüntüleme

Kullanıcılar bir SPA'da gezinirken, ayrı web sitesi bölümlerinden geçerler. Teknik olarak, bir SPA yalnızca bir sayfa (tek bir index.html dosyası) içerir, ancak ziyaretçiler birden çok sayfaya göz atıyormuş gibi hissederler. Kullanıcılar tek sayfalık bir uygulama web sitesinin farklı bölümlerinde gezinirken, URL yalnızca karma bölümünde değişir (örneğin, http://website.com/#/about, http://website.com/#/contact) . JS dosyası, tarayıcılara parça tanımlayıcılarına (karma değişiklikleri) dayalı olarak belirli içeriği yükleme talimatı verir. 

Arama motorlarının bir web sitesinin farklı bölümlerini farklı sayfalar olarak algılamasına yardımcı olmak için, Geçmiş API'sinin yardımıyla farklı URL'ler kullanmanız gerekir İkincisi, tarayıcı geçmişini manipüle etmek için HTML5 standartlaştırılmış bir yöntemdir. Google Codelabs , arama motorlarının karma değişiklikler tarafından tetiklenen farklı içerik parçalarını ayrı sayfalar olarak görebilmesi için karma tabanlı yönlendirme yerine bu API'yi kullanmanızı önerir. Geçmiş API, gezinme bağlantılarını değiştirmenize ve karmalar yerine yolları kullanmanıza olanak tanır. 

Google analisti Martin Splitt de aynı tavsiyeyi veriyor : geçmiş API'sini kullanarak görünümleri URL'ler olarak ele almak. Ayrıca, href öznitelikleriyle bağlantı işaretlemesi eklemeyi, her görünüm için benzersiz başlık ve açıklama etiketleri ("biraz fazladan JavaScript" ile) oluşturmayı önerir. İşaretlemenin web sitenizdeki herhangi bir bağlantı için geçerli olduğunu unutmayın: onclick eylemini kullanmak yerine bir href özniteliğine sahip bir <a> etiketi ile çıktı alın. JavaScript onclick taranamaz ve Google tarafından hemen hemen görünmezdir. 

Hata sayfaları için görünümler

Tek sayfalık web sitelerinde, sunucunun hata işleme ile hiçbir ilgisi yoktur ve her zaman her şeyin yolunda olduğunu söyleyen 200 durum kodunu döndürür. Ancak kullanıcılar bir SPA'ya erişmek için yanlış URL'yi kullanabilir ve hata yanıtlarıyla başa çıkmanın bir yolu olmalıdır. Google, her bir hata kodu (404, 500, vb.) için ayrı görünümler oluşturmanızı ve tarayıcıları ilgili görünüme yönlendirmesi için JS dosyasını ayarlamanızı önerir.

Sosyal paylaşımlar ve yapılandırılmış veriler

Sosyal paylaşım optimizasyonu genellikle web siteleri tarafından gözden kaçırılır: Eksik Twitter Kartlarının SE Ranking'in Web Sitesi Denetim aracı tarafından tanımlanan en yaygın sorunların listesinin başında geldiğini öğrendik . Ne kadar önemsiz görünse de, Twitter Kartlarının ve Facebook'un Açık Grafiğinin uygulanması, popüler sosyal medya kanallarında zengin paylaşıma olanak tanıyacak ve bu da web sitesinin arama görünürlüğü için iyi olacaktır. Bu protokolleri kullanmazsanız, bağlantınızı paylaşmanız, rastgele (ilgili olması gerekmeyen) bir görsel nesnenin önizleme olarak görüntülenmesini tetikleyecektir.

Yapılandırılmış verileri kullanmak, farklı türdeki web sitesi içeriğini tarayıcılar tarafından okunabilir hale getirmek için de önemlidir. Schema.org , videolar, tarifler, ürünler vb. gibi veri türlerini etiketlemek için seçenekler sunar. Şu anda veri türlerinin atanıp atanmadığını öğrenmek ve web sayfalarınız için zengin arama sonuçlarını etkinleştirmek için bir Google'ın Zengin Sonuçlar Testi gerçekleştirebilirsiniz.

SPA'yı test etme

Daha önce, Google Web Yöneticisi Araçları , indirilen HTTP yanıtının ve sayfa HTML'sinin arama motoru tarafından alınıp işlendiği şekliyle görülmesine izin veren Google Gibi Getir işlevini içeriyordu. Ancak 2019'da Google aracı kaldırdı ve artık Search Console'un URL Denetleme bölümünde yalnızca bazı tarama ve dizine ekleme bilgilerine erişebilirsiniz. Google'ın gördüklerine ilişkin bilgilendirici bir önizleme sağlamaz, ancak tarama ve dizine ekleme sorunları hakkında size temel bilgiler sağlar. 

GSC'de tarama ve indeksleme kontrolü

Google'ın Mobil Uyumluluk Testi , oluşturulan HTML'yi gösterdiği ve arama motorları tarafından yüklenemeyen ve işlenemeyen sayfa kaynaklarını belirlediği için de yararlıdır. Ayrıca Headless Chrome , JS'nin nasıl yürütüleceğini görmek için SPA'nızı test etmenin harika bir yoludur. Başsız bir tarayıcının tam bir kullanıcı arayüzü yoktur, ancak gerçek kullanıcıların sahip olacağı ortamın aynısını sağlar. Son olarak, BrowserStack gibi araçları kullanarak SPA'nızı çeşitli tarayıcılarda test edin .

İzleme sorunlarını çözme

Google Analytics'teki geleneksel izleme kodu tek sayfalık web sitelerinde çalışmadığından ek araçlar kullanmanız gerekecektir. Buradaki hile, sayfa görüntülemeleri yerine gerçek kullanıcı etkileşimini kaydetmek ve izlemek. 

GA , set komutunu ve yeni sayfa değerini ayarlayarak sanal sayfa görüntülemelerinin izlenmesini önerir. Ayrıca , web sitesinde kullanıcı gezinmesine dayalı olarak sayfa görüntülemelerini izleyen Angulartics gibi eklentiler de uygulayabilirsiniz . Veya Google Etiket Yöneticisi'nde, kullanıcı etkileşimlerini de izleyen Geçmiş Değişikliği tetikleyicilerini ayarlayabilirsiniz . RUM (gerçek kullanıcı izleme) verilerini toplayarak SPA takibinde size yardımcı olabilecek başka araçlar da vardır .

Temel SEO'nun başka yolu yok

SPA'ların kendine özgü doğası bir yana, çoğu genel optimizasyon tavsiyesi bu tür web sitelerine uygundur. Temel SEO çalışmaları şunları içerir:

  • Güvenlik . Henüz yapmadıysanız, web sitenizi HTTPS ile koruyun. Aksi takdirde, arama motorları tarafından bir kenara atılabilir ve site kullanıyorsa kullanıcı verilerini tehlikeye atabilirsiniz. Web sitesi güvenliği , yapılacaklar listenizden çıkardığınız bir şey değil, sürekli izleme gerektiren değerli bir unsurdur. Web sitenize güvenle erişilebildiğinden emin olmak için SSL/TLS sertifikanızı kritik hatalar için düzenli olarak kontrol edin :
Web sitesi güvenlik kontrolü
  • İçerik optimizasyonu . Her görünüm için benzersiz başlık etiketleri ve açıklama meta etiketleri (çok sayfalı bir web sitesindeki her sayfa için yaptığınız gibi) yazmak gibi SPA'ya özgü önlemlerden bahsettik. Bunu yapmadan önce, optimize edilmiş içeriğe sahip olmanız gerekir: doğru kullanıcı amaçlarına göre uyarlanmış, iyi organize edilmiş, görsel olarak çekici ve faydalı bilgiler açısından zengin. Site için bir anahtar kelime listesi toplamadıysanız, ziyaretçilere ihtiyaç duydukları içeriği sağlamak zor olacaktır. Bazı yeni içgörüler bulmak için anahtar kelime araştırma kılavuzumuza göz atabilirsiniz .
  • Bağlantı kurma . Geri bağlantılar, Google'a web sitenizdeki diğer kaynakların güven düzeyi hakkında sinyal verir, bu nedenle bir geri bağlantı profili oluşturmak SEO'nun hayati bir parçasıdır. Benzer bir geri bağlantı yoktur: web sitenize işaret eden her bağlantı farklı bir değere sahiptir ve bazıları sıralamanızı önemli ölçüde artırabilirken, spam içerikli olanlar arama varlığınıza zarar verebilir. Geri bağlantı kalitesi hakkında daha fazla bilgi edinin ve bağlantı profilinizi en iyi uygulamalara göre oluşturun. 
  • Rakip izleme . Muhtemelen rakiplerinizi web sitesi geliştirmenin ilk aşamalarında araştırdınız. Çoğu SEO ve pazarlama görevinde olduğu gibi, nişinizi her zaman takip etmeniz gerekir. Veri açısından zengin araçlar sayesinde, rakiplerinizin organik ve ücretli aramadaki stratejilerini kolayca izleyebilir , piyasadaki durumu değerlendirebilir, büyük rakipler arasındaki dalgalanmaları tespit edebilir ve benzer siteler için halihazırda çalışan belirli anahtar kelimelerden veya kampanyalardan ilham alabilirsiniz. 

Doğru yapılan tek sayfalık uygulama web siteleri

SPA'nızın arama motorlarının gözünde parlaması için içeriğinin tarayıcılar tarafından kolayca erişilebilir olmasını sağlamanız gerekir. Ziyaretçilere dinamik içerik yükleme, patlama hızı ve sorunsuz gezinme sağlayan arama motorlarına statik bir sürüm sunmayı unutmayın. Bunun da ötesinde, doğru bir site haritasına sahip olduğunuzdan, parça tanımlayıcılar yerine farklı URL'ler kullandığınızdan ve farklı içerik türlerini yapılandırılmış verilerle etiketlediğinizden emin olun. 

JavaScript sayesinde kullanıcılara sunulan tek sayfalık deneyim, web içeriğiyle bir an önce etkileşime geçmek isteyen modern kullanıcıların taleplerine cevap veriyor. SPA'nın UX merkezli avantajlarını korumak ve ayrıca aramada iyi bir sıralama elde etmek için geliştiriciler, Airbnb'nin mühendisi Spike Brehm'in “zor yol” olarak adlandırdığı, yani müşteri ile sunucu arasında denge kurmayı tercih ediyor. 

Tek sayfalık uygulama web siteleriyle ilgili herhangi bir deneyiminiz var mı? SPA'nızı SERP'lerin zirvesine taşımakta zorlandınız mı? Düşüncelerinizi ve hayat derslerinizi yorumlar bölümünde paylaşın.

Yorum Gönder

0 Yorumlar