React Tabanlı Sitelerde Temel SEO Problemleri ve Çözümleri

Google 2015 yılında botların JavaScript’i başarılı bir şekilde tarayabildiğini duyurmuş olsa da günümüzde karşılaştığımız case’lerin birçoğu, Google’ın halen JavaScript’i taramak konusunda mükemmel bir performans sergilemediğini gösteriyor. Durum bu olsa bile, çeşitli düzenlemeler ile JavaScript tabanlı web siteleri de arama motoru robotları tarafından başarılı bir şekilde taranabilir hale getirilebiliyor.

Projenizde React kullanmayı düşünüyor fakat projenizin SEO performansı konusunda endişe duyuyorsanız, crawl ve index problemlerini minimum seviyeye indirgemek için alabileceğiniz aksiyonları sizler ile paylaşacağız.

İçeriğimizde React tabanlı sitelerin SEO performansını olumsuz etkileyen faktörlerden bahsedecek olsak da aslında bu hususlar JavaScript temelli neredeyse tüm projelerde geçerlidir.

React Neden Özel Bir Yaklaşım Gerektirir?

React, büyüleyici derecede etkileşimli ve oldukça hızlı arayüzler geliştirilmesine olanak tanıyan bir JavaScript kütüphanesidir. Daha önce React tabanlı bir internet sitesinde birkaç farklı sayfayı dolaştıysanız, sayfaların oldukça hızlı bir şekilde yüklendiğini muhtemelen fark etmişsinizdir. Bunun sebebi, Single Page Application (SPA) yaklaşımıdır. React da bu yaklaşımı benimsemiş olan JavaScript kütüphanelerinden biridir.

React ya da benzeri JS frameworkleri ile inşa edilmemiş bir internet sitesinde, gerçekleştirdiğiniz işlemler sonucunda DOM, HTML dokümanı seviyesinde güncellenir. Yani DOM’da bir değişiklik gerçekleştiğinde, yalnızca ufak bir değişiklik için dahi tüm HTML’in sunucu tarafından tekrar tarayıcıya iletilmesi gerekir. Bu da elbette kullanıcı navigasyonunu olumsuz yönde etkileyen faktörlerden birisidir.

Single Page Application yaklaşımı ile yönlendirme işlemleri artık sunucu tarafından değil, JavaScript aracılığıyla istemci tarafında gerçekleştirilmeye başlamıştır. Yani kısaca; bu yaklaşımda tek bir HTML dokümanı bulunur ve tüm değişiklikler dinamik bir şekilde bu index dosyasında gerçekleştirilir. Böylelikle tüm sayfanın yeniden yüklenmesine gerek kalmaksızın, değişiklikler kullanıcı tarafında anlık olarak gerçekleştirilebilir.

Kullanıcı deneyimini inanılmaz bir şekilde iyileştiren bu yaklaşım, söz konusu SEO performansı olduğunda ise biraz daha flu bir alanda yer almaktadır. Daha önce de bahsettiğimiz üzere, Google bugün tamamıyla CSR yöntemini kullanan JavaScript tabanlı web sitelerini dahi tarayabilmekte ve indexleyebilmektedir. Ancak, Google halen bu konuda mükemmel bir seviyede değildir.

Aşağıdaki başlıkları inceleyerek React (ve benzeri JavaScript frameworkleri) ile oluşturulan internet sitelerinde dikkat edilmesi gereken noktaları görüntüleyebilir ve oluşması muhtemel tüm SEO problemlerinin önüne geçebilirsiniz.

React Tabanlı Sitelerde SEO Performansını İyileştirmek İçin Yapılması Gerekenler

1 – URL Yapısı

Daha önce de belirttiğimiz üzere React, SPA prensiplerine uygun arayüzler inşa etmek için kullanılır. Bu yaklaşımda HTML dokümanı sürekli değişmediğinden, standart bir index dosyası bulunur ve bu standartta oluşturulan tüm sayfaların URL’leri “#” işareti barındırır. Bu durum, ilgili URL’lerin parametre benzeri bir muamele görmesine sebep olacaktır.

Örnek: example.com/#react-seo

On-Page SEO’nun en temel kriterleri arasında bulunan anlaşılabilir ve temiz bir URL yapısına sahip olmak, önemini JavaScript tabanlı internet sitelerinde de gösteriyor denilebilir. Ancak URL’lerde kullanılan “#” işaretinin, biraz daha özel bir durumu bulunmaktadır.

Kaynak: https://www.seroundtable.com/google-no-hashtags-in-urls-26537.html

Arama motoru robotlarına oluşturulan her bir sayfanın “ayrı” ve “gerçek” birer sayfa olduğunu göstermek amacıyla, URL yapımızı mümkün olduğunca hatalardan arındırarak temiz bir şekilde oluşturmalı ve önerildiği üzere “#” işareti kullanmamalıyız.

Bu problem, React Router kullanımı ile giderilebilir. React Router, React ile oluşturduğunuz arayüzlerde URL’lerinizi sorunsuz bir şekilde yönetebilmenizi sağlar.
İlgili bağlantı: https://reactrouter.com/

2 – setTimeOut Kullanımı

setTimeOut, JavaScript tabanlı internet sitelerinde sıklıkla kullanılan fonksiyonlardan biridir. Kullanıcı açısından herhangi bir problem yaratmıyor olsa da söz konusu arama motoru robotları olduğunda setTimeOut kullanımı internet siteniz için gerçekten can sıkıcı problemler yaratabilir.
setTimeOut fonksiyonu sayesinde içerik “belirli bir süre sonra” ekrana gelir. Ancak Google sonsuz kaynaklara sahip olmadığından, her bir internet sitesi için ayırdığı bir tarama bütçesi bulunur. Şayet arama motoru robotları bir URL’i crawl ederken herhangi bir içerik ile karşılaşmıyorsa, bu URL’de daha fazla zaman kaybetmeyecektir.

Aşağıda, React tabanlı bir internet sitesinde setTimeOut kullanımıyla ilgili gerçekleştirilmiş bir testi ve sonuçlarını görüntüleyebilirsiniz. Örnekte de görülebileceği üzere, herhangi bir içerik ile karşılaşmadığı taktirde arama motoru robotları ilgili URL’de daha fazla vakit kaybetmeyecektir.

Kaynak: https://blog.pusher.com/seo-react-fetch-as-google

3 – URL’lerde Küçük – Büyük Harf ve Slash Sorunu

İnternet sitenizdeki URL’lerin büyük & küçük harf ya da “/” benzeri farklı varyasyonlarla dahi 200 durum koduyla açılması, internet siteniz için ciddi problemler yaratabilir. Parametreler çoğu zaman bir sayfanın alternatif versiyonu olarak ele alınsa da söz konusu farklılaşan URL’ler olduğunda, arama motoru robotları tüm bu URL’leri “ayrı” ve “eşsiz” bir sayfa olarak değerlendirmektedir.

İlgili varyasyonlar halihazırda internet sitenizde var olan bir sayfanın birebir kopyası olacağından, duplicate content ve keyword cannibalization sorunlarıyla karşılaşmanız muhtemel olacaktır.

Örnek:

example.com/react-seo
example.com/REACT-seo
example.com/react-seo/

Yukarıdaki örnekte yer alan tüm URL’ler, arama motoru robotları tarafından farklı sayfalar olarak algılanır.

Oluşabilecek bu problemin önüne geçmek ve internet sitenizde başarılı bir standart oluşturmak adına;

• URL’lerin tamamı küçük harflerden oluşmalıdır.
• Herhangi bir URL’de küçük harf yerine büyük harf kullanıldığında, oluşan yeni varyasyon otomatik olarak standart versiyona 301 durum kodu ile yönlendirilmeli ya da 404 hatası vermelidir.
• URL sonunda yer alan “/” işareti konusunda internet siteniz için bir standart belirlemeli ve aynı şekilde oluşan varyasyon URL’lerin standart URL’lerinize 301 durum kodu ile otomatik olarak yönlendirilmesini sağlamalısınız.

Bu hataların önüne geçmek için zaman zaman canonical tercih edilse de canonical bir direktif değil de sinyal olduğundan, bu önlem yetersiz kalabilir. Özellikle bu varyasyonlara fazla sayıda backlink geldiğinde, arama motoru robotları bu URL’leri keşfedecek ve canonical sinyallerine rağmen indexleyecektir.

4 – Meta Verileri

SEO açısından büyük öneme sahip olan meta verileri, tüm internet sitelerinin head etiketleri arasında bulunmalı ve ayrıca bu verilerin mutlaka HTML dokümanı seviyesinde (kaynak kodda) görünebilir olması gerekir. React tabanlı internet sitelerinde tüm içerik standart olarak JavaScript ile sunulduğundan, bir düzenleme gerçekleştirilmediği sürece meta verileri ve yapısal veriler kaynak kodda görülmeyecektir. Bu sorunu aşmak için, React Helmet kullanılması gerekir. React Helmet sayesinde herhangi bir bileşenin meta verilerini tanımlayabilirsiniz.

Bir internet sitesinin head etiketleri arasında bulunması gereken en önemli meta verileri şunlardır:

• Title
• Description
• Canonical

Meta verilere ek olarak, yapısal veri işaretlemeleri de her zaman HTML dokümanı seviyesinde kendine yer bulmalıdır. Yani hem Raw hem de Rendered versiyonda tüm yapısal verileriniz arama motoru robotları tarafından keşfedilebilmelidir.

Yapısal veri işaretlemelerinin çoğu zaman head etiketleri arasında yer alması gerektiği belirtilse de aşağıdaki görselde de görülebileceği üzere body etiketleri arasında da kullanılması mümkündür.

Kaynak: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data

Aşağıdaki görselde breadcrumb yapısına sahip ancak bu işaretlemeye kaynak kodlarında yer vermeyen React tabanlı bir internet sitesinin yapısal veri test sonuçlarını görüntüleyebilirsiniz.

Not: İşaretleme kaynak kod seviyesinde yer almasa dahi zaman içerisinde breadcrumb yapısının keşfedilmesi muhtemeldir. Ancak bu gibi sorunlarla hiç karşılaşmamak için, yapısal veri işaretlemelerine doğrudan kaynak kod seviyesinde yer vermenizi öneririz.

Site 1:

Aşağıdaki görselde breadcrumb yapısal verilerine kaynak kod seviyesinde de yer veren React tabanlı bir internet sitesinin yapısal veri test sonuçlarını görüntüleyebilirsiniz.

Site 2:

React helmet kullanımı: https://www.digitalocean.com/community/tutorials/react-react-helmet

5 – Onclick Link Kullanımı

Onclick link kullanımı, arama motoru robotlarının crawl sürecini oldukça olumsuz bir şekilde etkiler. Onclick ile sağlanan bağlantılar arama motoru robotları tarafından bir URL özelliği taşımadığından, bu bağlantılar arama motoru robotları tarafından takip edilemiyor ve sonuç olarak farklı sayfalar taranamaz. Eğer React tabanlı internet sitenizin tüm iç bağlantıları Onclick’ten oluşuyorsa, arama motoru robotları bu bağlantıları takip edemeyecektir.
Bu sorunu gidermek için kullanabileceğiniz tek yöntem; linkler için “a href” tercih etmektir.

Kaynak: https://developers.google.com/search/docs/advanced/guidelines/links-crawlable

6 – Görsellerin Sunumunda Kullanılan Yöntem

React ile oluşturulan arayüz tasarımlarında görseller çoğu zaman CSS ile kullanıcılara sunulur. Google her ne kadar CSS ile sunulan görselleri tarayabilse de bu görsellerin indexlenmediğini belirtmiştir.

Kaynak: https://www.seroundtable.com/google-image-search-css-25068.html

Bu sebepten, site içerisinde kullanılan görseller mutlaka “img src” yöntemi ile sunulmalıdır.

7 – 404 Hata Sayfası ve 404 Durum Kodu

Var olmayan URL’ler ve hatalı yazımlar, hem kullanıcılara hem de arama motoru robotlarına mutlaka 404 hata kodu göstermelidir. React ile geliştirilen internet sitelerinde, gerekli düzenlemeler gerçekleştirilmediği takdirde 404 hatası dönmesi gereken tüm sayfalar soft 404 hatası dönecektir. Yani internet sitenizde bir hata sayfası tasarımı var ise ve yanlış yazımlarda kullanıcılara bu sayfa gösteriliyorsa, aşağıdaki örnekte de görülebileceği üzere hata sayfası 200 durum kodu ile açılacaktır.

SSR yöntemini tercih ettiğinizde, var olmayan URL’lerin 404 hatası dönmesi mümkün olacaktır. Ancak CSR yöntemini tercih ediyorsanız, bu mümkün değildir.
Bu gibi durumlarda, aşağıdaki görselde de görebileceğiniz üzere hatalı URL’i JavaScript ile 404 hata sayfasına yönlendirmeniz gerekmektedir.

Bu, Google tarafından önerilen geçerli bir standarttır.

Kaynak: https://developers.google.com/search/docs/advanced/javascript/javascript-seo-basics#avoid-soft-404s

8 – Server Side Rendering, Client Side Rendering ve Prerendering

İçerik boyunca sık sık vurguladığımız üzere, Google pek çok kez JavaScript’i tarayabildiğini belirtmiştir. Evet, gerekli düzenlemeler sağlandığı taktirde Google CSR yöntemini kullanan React tabanlı internet sitelerini başarılı bir şekilde tarayabilmektedir. Ancak Google bu konuda halen mükemmel bir noktada değildir. Özellikle sayfa sayısı arttıkça, ilgili internet sitesinin taranabilirliğinde zaman zaman sorunların yaşanması muhtemeldir.

Client side rendering yöntemi:

• Kullanıcı ya da robot bir istek oluşturur.
• Sunucu oluşturulan isteğe binaen sayfa içeriğini ve JS dosyalarını tarayıcıya iletir.
• Tarayıcı JS dosyalarını indirir.
• Tarayıcı JS dosyalarını çalıştırır.
• JS dosyalarının çalışması sonucunda sayfa içeriği hem kullanıcılar hem de arama motoru robotları tarafından görülebilir hale gelir.

CSR yönteminin son aşamasında, sayfa içeriği hem kullanıcılar hem de arama motoru robotları tarafından görülebilir ve işlenebilir hale gelir. Ancak bu içerikler sitenin kaynak kodlarında gösterilmez. Kullanıcı, tarayıcısında JavaScript’i engellemiş ise, site içeriği kullanıcıya hiçbir şekilde gösterilmeyecektir.

Söz konusu Server Side Rendering yöntemi olduğunda ise, kullanıcı ya da arama motoru robotları sunucuya istek gönderdiğinde dosyalar doğrudan tarayıcıya iletilmez. Sunucu, bir HTML dokümanı oluşturarak bu dokümanı tarayıcıya iletir. Dokümanı ve JS dosyalarını teslim alan tarayıcı, JS dosyalarını çalıştırır. JS dosyalarının execute işlemi tamamlanmamış olsa dahi sayfa içeriği hem kullanıcılar hem de arama motoru robotları tarafından halihazırda görülebilir durumdadır. Son aşamada ise stil dosyaları işlenir ve site tasarımı bütün haliyle kullanıcılara sunulur, kullanıcılar artık siteyle etkileşimde bulunabilir.

Görüldüğü üzere Server Side Rendering yönteminde stil dosyaları yüklenmediği halde içerik hem arama motoru robotları hem de kullanıcılar tarafından görüntülenebilir. Yani bu yöntemin taranabilirliği, Client Side Rendering’e oranla çok daha başarılıdır.

Aşağıdaki görselde JavaScript engellendiği halde tamamıyla görüntülenebilen ve etkileşime geçilebilen Server Side Rendering yöntemini kullanan React tabanlı bir web sitesini görüntüleyebilirsiniz.

Ayrıca Google’ın önerisi:

Kaynak: https://developers.google.com/search/docs/guides/javascript-seo-basics

Pre-rendering yöntemi ise SPA’lar için hazırlanmış oldukça pratik ve ilerici bir çözümdür. Pre-rendering yöntemi tıpkı bir CDN mantığıyla çalışır. Kullandığınız Pre-rendering servisi, internet sitenizin tüm sayfalarını tarar ve HTML dosyasını önbelleğe alır. Yani önbelleğe alınan sayfalar, JS ve CSS kodları çalıştırılmış olarak HTML dosyası haline getirilir. Böylelikle, site içeriği kaynak kod seviyesinde tamamıyla görülebilir durumdadır.

Pre-rendering yöntemleri siteye gelen kullanıcının kullanıcı mı yoksa arama motoru robotu mu olduğunu sorgular, kullanıcılara herhangi bir önbellek sunmaz iken arama motoru robotlarına önbelleğe alınmış HTML dokümanını sunar.

Bu işlem sonucunda hem kullanıcılar SPA yaklaşımının nimetlerinden ve React’ın gelişmiş özelliklerinden faydalanabilir hem de arama motoru robotları JS tabanlı internet sitenizi sorunsuz bir şekilde tarayabilir.

Popüler ve güvenilir bir Pre-rendering çözümü olan Prerender.io’ya aşağıdaki bağlantı aracılığıyla erişebilirsiniz.

İlgili bağlantı: https://prerender.io/

Hangi Yöntemi Tercih Etmelisiniz?

SSR, CSR ve Pre-rendering çözümleri arasından hangisini tercih edeceğiniz kesinlikle sizin yaklaşımınıza ve projenize bağlıdır. Bu konuda direkt olarak “şu yöntemi kullanmalısınız” gibi bir çıkarım yapmamız, yanıltıcı olacaktır. Ancak React ile oluşturulan projelerimizde üç yöntemi de deneyimleme şansına sahip olduğumuzdan, bu konuda size bazı çıkarımlar sunabiliriz.

1 – CSR ve Pre-rendering Kullanımı

Migration sonrasında SEO yönetimine başladığımız bir projemizde, migration süreci bizim tarafımızdan yönetilmemiştir. Bunu belirtmemizin sebebi, migration süresinde ortaya çıkan hataların sitenin taranabilirliği ve indexlenebilirliği açısından şüphesiz etkili olmasıdır. Hatalar hızlı bir şekilde giderildikten ve başarılı bir standart yakalandıktan sonra, sitenin halen indexlenmediği ve indexlenen bazı sayfaların ise boş bir sayfa olarak indexlendiği görülmüştür. Tarama esnasında herhangi bir sorunla karşılaşılmadığı, yani içeriğin ve verilerin tamamıyla görünebildiği halde, indexleme süresince bu gibi hatalarla karşılaşılmıştır.

Aşağıdaki Search Console grafiğinde kırmızı ile işaretli alan, migration sonrası verileridir.

Bunun üzerine, ilgili markanın yazılım ekibiyle yaptığımız fikir alışverişleri sonrasında önerilerimizden biri olan Pre-rendering yöntemi tercih edilmiştir. Pre-rendering ile sunulan HTML dosyaları kısa sürede indekslenmiş ve ilgili internet sitesinin trafiği normal seviyeye yükselmiştir.

2 – SSR Kullanımı

Migration süreci tarafımızca yürütülen React tabanlı bir internet sitesinde SSR yöntemi tercih edilmiştir. Migration sonrasında herhangi bir sorunla karşılaşılmamış, taranabilirlik ve indexlenebilirlik açısından herhangi bir problem ortaya çıkmamıştır.

Aşağıdaki Search Console grafiğinde de görüntüleyebileceğiniz üzere, migrationa ya da React kullanımına bağlı bir trafik kaybı gerçekleşmemiştir.

JavaScript tabanlı internet sitelerinde tıpkı her projede olduğu gibi, internet sitenizin taranabilirlik durumunu ve ayrıca indexlerini düzenli olarak kontrol etmeniz, oluşabilecek sorunlara karşı hızlı bir şekilde aksiyon alabilmenize olanak tanıyacaktır. Özellikle CSR yöntemini kullanıyorsanız, bu kontrol sıklığını artırmak kesinlikle faydanıza olacaktır.