React SEO Nedir?

Popüler bir front end web geliştirme aracı olan React JS, dünya çapında yaklaşık 10.2 milyon web sitesi tarafından kullanılmaktadır. Çoğunlukla React olarak anılan React JS, JavaScript tabanlı bir UI geliştirme kütüphanesi olup Facebook ve açık kaynaklı bir geliştirici topluluğu tarafından yürütülür. Jordan Walke’un Facebook’ta çalışırken oluşturduğu React tek sayfalık uygulama ya da mobil uygulama geliştirme sürecinde kullanılabilir.

Çok yönlü bir araç olması nedeniyle birçok farklı projede JavaScript kütüphanesi React kullanılabilir. Material UI, Redux ya da Create React App gibi farklı kütüphane ve araçlarla React kullanılması mümkündür. Farklı çerçevelerle daha büyük projeler oluşturulurken ek bir kütüphane olarak React kullanılabilir. Bildirime dayalı bileşenlere örnek olarak verilebilecek React Router ya da React Navigation gibi araçlarla ya da kütüphaneyle çalışan navigasyon çözümleriyle de React çalışabilir.

React tek başına SEO açısından bazı zorluklar içerebilir. Bunun nedeni, bazı arama motorlarının JavaScript tabanlı içerikleri indeksleme konusunda sınırlamalar uygulayabilmesidir. Bu yüzden, React ile geliştirilen web uygulamalarını SEO dostu bir hale getirmek için çeşitli stratejilerden ve tekniklerden faydalanılması gerekir.

İçindekiler

1 React Neden Özel Bir Yaklaşım Gerektirir?
2 React SEO Dostu mu?
3 React SEO Nasıl Yapılır?

React Neden Özel Bir Yaklaşım Gerektirir?

React çok yüksek derecede etkileşimli ve son derece hızlı arayüzler geliştirme imkanı sunan bir JavaScript kütüphanesidir. React tabanlı web sitelerinde sayfalar çok hızlı yüklenir. Bu durum, Single Page Application yaklaşımından kaynaklanır.

React ya da benzeri JS frameworkleriyle inşa edilmeyen internet sitelerinde, gerçekleştirilen işlemler sonucu DOM, HTML dokümanı seviyesinde güncellenir. Diğer bir deyişle DOM’da bir değişiklik söz konusu olduğunda, sadece ufak bir değişiklik olsa bile, tüm HTML sonucu tarafından yeniden tarayıcıya iletilmelidir. Bu durum, temelde kullanıcı navigasyonunu olumsuz yönde etkileyen bir unsur olarak kabul edilir.

Single Page Application yaklaşımıyla yönlendirme işlemleri sunucu tarafından değil, JavaScript aracılığıyla istemci tarafından gerçekleştirilir. Bu yaklaşımda tek bir HTML dokümanı vardır ve tüm değişiklikler bu inden dosyasında dinamik bir şekilde gerçekleştirilir. Bu sayede sayfanın yeniden yüklenmesi gerekmeksizin değişikliklerin kullanıcı tarafından anlık olarak gerçekleştirilmesi sağlanır.

Bu yaklaşım kulanıcı deneyimi üzerinde son derece olumlu etkilere sahiptir. Söz konusu SEO performansı olduğunda ise bu kadar net konuşmak mümkün değildir. Google günümüzde tamamen CSR yöntemini kullanan JavaScript tabanlı web sitelerini dahi tarayıp indeksleyebilir. Ancak bu konuda mükemmel bir performansa eriştiğinden bahsedilemez. Bu nedenle, React ile oluşturulan internet sitelerinde bazı noktalara dikkat etmek ve meydana gelmesi olası SEO problemlerini önlemek gerekir.

React SEO Dostu mu?

En çok aranan framework olan React SEO dostudur. Statik, dinamik ve tek sayfalık uygulamaların hepsinin React ile oluşturulması mümkündür. Ancak bu üç uygulama türü SEO dostu olma konusunda eşit konumda değildir.

Statik bir web uygulaması SEO ile tamamen uyumludur. Bunun nedeni, gerekli tüm materyali anında bir HTML dosyasına dönüştürüp Google’ın sayfaları hızlı bir şekilde izlemesine ve sıralamasına imkan vermesidir. Dinamik web sitelerinin özelliği ise gerçek zamanlı veri ve sayfa oluşturmadır. Sunucu ucundaki her istek için belirli bir yanıt tetiklenmekte ve daha sonra istemci ucuna gitmektedir. Buna bağlı olarak Google dinamik sayfaları herhangi bir sorun yaşamadan yorumlayıp sıralayabilir.

Tek sayfalı uygulama (SPA), sadece bir HTML sayfası yükleyen ve kullanıcı girdisine yanıt olarak bu sayfası dinamik bir şekilde değiştiren web uygulaması türü olarak tanımlanabilir. SPA’da sunucu yalnızca ilk HTML sayfasını ve gerekli verileri sağlar. İstemcinin web tarayıcısı ise tüm uygulama mantığını yürütme görevini üstlenir. Kullanıcının gerçekleştirdiği her eylemin ardından web sitesinin yenilenmesi ve yeniden çizilmesi gerekmez. Böylece reaktif bir kullanıcı deneyimi sağlanır.

React SEO Nasıl Yapılır?

React tabanlı sitelerde SEO performansını optimize etmek için uygulanması gereken birkaç farklı adım bulunmaktadır.

URL Yapısı

React, SPA prensiplerine uygun arayüzler inşa etme amacıyla kullanılır. Bu yaklaşım dahilinde HTML dokümanı sürekli olarak değişmediği için standart bir index dosyası vardır. Standartta oluşturulan tüm sayfalara ait URL’ler “#” işareti barındırmaktadır. Bu durum, ilgili URL’lerin parametre benzeri bir muamele görmesine neden olur.

On-page SEO’nun temel kriterlerinden biri, anlaşılabilir ve temiz bir URL yapısına sahip olmaktır. Bu durum, JavaScript tabanlı internet siteleri için de çok önemlidir. Ancak, URL’lerde kullanılan “#” işareti biraz daha farklı bir konumdadır.

Arama motoru botlarına, oluşturulan her bir sayfanın ayrı ve gerçek birer sayfa olduğunu gösterebilmek için URL yapısı mümkün olduğunca hatalardan arındırılmalı ve temiz bir şekilde oluşturulmalı, önerildiği üzere “#” işareti kullanılmamalıdır. Bu sorunu React Router kullanarak gidermek mümkündür. Reach Router, React ile oluşturulan arayüzlerde URL’lerin sorunsuz bir şekilde yönetilebilmesini sağlar.

setTimeOut Kullanımı

JavaScript tabanlı internet sitelerinde en sık kullanılan fonksiyonlardan biri setTimeOut’tur. setTimeOut kullanımı kullanıcı açısından herhangi bir problem yaratmasa da, arama motoru robotları devreye girince setTimeOut kullanımına bağlı sorunlar gündeme gelebilir.

setTimeOut fonksiyonu, içeriklerin belirli bir süre sonra ekrana gelmesini sağlar. Ancak, Google’ın her internet sitesini taramak için ayırdığı bir bütçe vardır. Arama motoru botları bir URL’i tararken herhangi bir içerikle karşılaşmazsa, bu URL’de daha fazla zaman kaybetmez.

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

İnternet sitesindeki URL’lerin büyük & küçük harf ya da “/” benzeri farklı varyasyonlarla dahi 200 durum koduyla açılması halinde ciddi sorunlar yaşanabilir. Parametreler çoğu zaman bir sayfanın alternatif versiyonu olarak ele alınmakla birlikte farklılaşan URL’ler söz konusu olduğunda, arama motoru robotları tüm URL’leri ayrı ve eşsiz bir sayfa olarak değerlendirir.

İlgili varyasyonlar halihazırda internet sitesinde bulunan bir sayfanın birebir kopyası olacağı için duplicate content ve keyword cannivalization sorunlarıyla karşılaşılması olasıdır. Oluşabilecek sorunları önleyip web sitesinde başarılı bir standart oluşturmak için yapılması gerekenler şu şekilde sıralanabilir:

URL’lerin tamamı küçük harfler kullanılarak oluşturulmalıdır.
Herhangi bir URL’de küçük harf yerine büyük harf kullanılması halinde, oluşan yeni varyasyon otomatik olarak standart versiyona 301 durum koduyla yönlendirilmeli ya da 404 hatası vermelidir.
URL sonunda bulunan “/” işareti konusunda bir standart belirlenmeli ve aynı şekilde oluşan varyasyon URL’lerin standart URL’lerine 301 durum koduyla otomatik olarak yönlendirilmelidir.

Bu hataları önlemek için canonical zaman zaman tercih edilse de, canonical bir direktif değil bir sinyal olduğu için yetersiz bir önlem olabilir. Özellikle bu varyasyonlara çok sayıda backlink gelmesi halinde, arama motoru robotları bu URL’leri keşfeder ve canonical sinyallere rağmen indeksler.

Meta Verileri

Meta verileri SEO açısından çok önemlidir. Tüm internet sitelerinin head etiketleri arasında bulunmaları ve HTML dokümanı seviyesinde görünür olmaları gerekir. Reach tabanlı internet sitelerinde tüm içerikler standart bir şekilde JavaScript ile sunulduğu için herhangi bir düzenleme yapılmadıkça meta verileri ve yapısal veriler kaynak kodda görülmez. Bu sorunu gidermek için React Helmet kullanılmalıdır. React Helmet kullanarak herhangi bir bileşenin meta verilerini tanımlamak mümkündür.

Bir internet sitesinin head etiketleri arasında bulunması gereken en önemli meta verileri; title, description ve canonical olarak sıralanabilir. Meta verilerin yanı sıra yapısal veri işaretlemelerinin de HTML dokümanı seviyesinde kendine yer bulması gerekir. Diğer bir deyişle tüm yapısal veriler hem Raw hem de Rendered versiyonda arama motoru robotları tarafından keşfedilebilmelidir.

Onclick Link Kullanımı

Onclick link kullanımı, arama motoru robotlarının crawl sürecini olumsuz yönde etkiler. Onclick ile sağlanan bağlantılar arama motoru robotları nezdinde URL özelliği taşımadığı için takip edilemez ve farklı sayfalar taranmaz. React tabanlı internet sitesinin tüm iç bağlantıları Onclick’ten oluştuğunda arama motoru robotları bu bağlantıları takip edemez. Bu sorunu giderme amacıyla linkler için “a href” tercih edilebilir.

Görsellerin Sunumunda Kullanılan Yöntem

React ile oluşturulan arayüz tasarımlarında görseller kullanıcılara genellikle CSS ile sunulur. Google CSS ile sunulan görselleri tarayabilse de bu görselleri indekslemez. Bu nedenle, site içinde kullanılan görselleri “img src” yöntemiyle sunmak gerekir.

404 Hata Sayfası ve 404 Durum Kodu

Var olmayan URL’ler ve hatalı yazılımlar kullanıcılara da arama motoru robotlarına da 404 hata kodu göstermelidir. Reach ile geliştirilmiş internet sitelerinde gerekli düzenlemeler yapılmazsa 404 hatası dönmesi gereken tüm sayfalardan sort 404 hatası döner. Diğer bir deyişle web sitesinde hata sayfası tasarımı varsa ve yanlış yazılımlarda kullanıcıya bu sayfa gösteriliyorsa, hata sayfası 200 durum koduyla açılır.

SSR yöntemi tercih edildiğinde, var olmayan URL’lerin 404 hatası döner. CSR yöntemi tercih edildiğinde bu mümkün olmaz. Bu tür durumlarda hatalı URL’ler JavaScript ile 404 hata sayfasına yönlendirilmelidir.

Server Side Rendering, Client Side Rendering ve Pre-rendering

Gerekli düzenlemeler yapılırsa Google CSR yöntemini kullanan React tabanlı web sitelerini başarılı bir şekilde tarar. Ancak sayfa sayısı arttıkça, ilgili internet sitesinin taranabilirliği sırasında sorunlar yaşanabilir.

Client side rendering Yöntemi kapsamında;

Kullanıcı ya da robot bir istek oluşturur.
Oluşturulan isteğe bağlı olarak sunucu sayfa içeriğini ve JS dosyalarını tarayıcıya iletir.
JS dosyaları tarayıcı tarafından indirilir.
Tarayıcı JS dosyalarını çalıştırır.
JS dosyalarının çalışmasıyla sayfa içeriği kullanıcılar ve arama motoru robotları tarafından görülebilir hale gelir.

CSR yönteminin son aşamasında sayfa içeriği kullanıcılar ve arama motoru robotları tarafından görülüp işlenebilir hale gelse de, bu içeriklerin sitenin kaynak kodlarında gösterilmesi söz konusu olmaz. Kullanıcı tarayıcısında JavaScript’i engellediği takdirde site içeriği kullanıcıya hiçbir şekilde gösterilmez.

Server Side Rendering yönteminde kullanıcı ya da arama motoru robotları sunucuya istek gönderdiğinde dosyalar doğrudan tarayıcıya gönderilmez. Sunucu HTML dokümanı oluşturur ve tarayıcıya bu dokümanı iletir. Tarayıcı, dokümanı ve JS dosyalarını teslim alınca JS dosyalarını çalıştırır. JS dosyalarının execute işlemi tamamlanmamış olsa dahi sayfa içeriği kullanıcılar ve arama motoru robotları tarafından görülebilir. Son aşamada stil dosyaları işlenerek stil tasarımı bütün haliyle kullanıcıya sunulur ve kullanıcı siteyle etkileşime girebilir.

React.Lazy

React Lazy fonksiyonu, React uygulamalarında dinamik kod yükleme ve bileşen yükleme süreçlerini geciktirme amacıyla kullanılır. Bu özellik, performansı artırmak ve sayfa yükleme sürelerini optimize etmek için önemlidir.

Genellikle büyük React uygulamalarında tüm bileşenlerin tek seferde yüklenmesi yerine, kullanıcının ihtiyaç duyduğu bileşenlerin yüklendiği zamanların geciktirilmesi istenir. Bu sayede, başlangıçta tüm uygulama kodunu indirmek yerine, sayfaların ve işlevlerin gerektiği zamanlarda yüklenmesi mümkün olur.

React Lazy fonksiyonu ile bir bileşen yüklenmeden önce, o bileşenin yüklenme sürecini geciktirilebilir. Böylece, kullanıcılar sayfaya giriş yaptıklarında sadece gerekli bileşenler anında yüklenir, bu da sayfa yükleme süresini azaltır ve performansı artırır.

React Helmet

React Helmet, React uygulamalarında dinamik olarak sayfa başlıkları, meta etiketleri ve diğer head içeriği gibi SEO odaklı ve sayfa düzenlemesi gerektiren HTML başlıklarını yönetmek için kullanılan bir React bileşenidir.

SEO açısından, her sayfanın benzersiz bir başlık, açıklama ve meta etiketleri gibi belirli bilgilerle donatılması önemlidir. Bu bilgiler, arama motorlarının içeriği indekslemesine yardımcı olurken, kullanıcıların doğru ve anlamlı bilgilerle karşılaşmasını sağlar.

React Helmet bu tür başlık, açıklama, anahtar kelimeler ve diğer meta etiketleri gibi head içeriğini yönetmek için kullanılır. Böylece, herhangi bir React bileşeni içinde, o bileşenin başlık, açıklama veya diğer head içeriğiyle ilgili bilgiler dinamik olarak değiştirilebilir.

Diğer rehber yazılarımıza göz atın:

React Neden Özel Bir Yaklaşım Gerektirir?

React SEO Dostu mu?