React web siteleri, SEO açısından HTML/CSS ile yazılmış web sitelerine göre arama motorları tarafından indekslenirken bazı zorluklar ve sorunlar yaşamaktadır. Aslında bu salt React ile alakalı değildir. Arama motorlarının JavaScript dilini indekslerken yaşadığı sorunlarla ilgilidir. Yani, diğer Javascript frameworkleri de benzer sıkıntılar ile karşı karşıyadır.
React, kullanıcı arayüzleri oluşturmamızı sağlayan bir JavaScript kütüphanesidir. Facebook tarafından 2013 yılında iç hackathon projesi olarak geliştirilmeye başlandı. 2015 yılında yapılan React konferansı ile tanıtıldı. Nispeten yeni sayılabilecek bir teknolojidir.
Builthwith.com verilerine göre ilk 1 milyon sitede, Javascript kütüphanelerinin kullanım dağılımına göre React 5. sırada yer almaktadır.
Arama motorları web trafiğinin tamamına yakınını sağlayan köprü durumundadırlar. Web sitenizin trafiğini yükseltmek istiyorsanız arama motorlarının kriterlerini yerine getirmek durumundasınız.
React kullanılarak oluşturulan Single Page Application’lar mükemmel yükleme süreleri ve kullanıcı deneyimi sağladığı için React’in web teknolojilerinde kullanımı hızla artmaktadır. Fakat arama motoru optimizasyonu dostu olabilmek için biraz üzerinde durmak ve kriterlere uygun geliştirme yapmak gerekiyor. React ile geliştirilmiş bir web sitesini “iki ucu keskin kılıç” olarak görebiliriz. Muhteşem yüklenme süreleri ve kullanıcı deneyimi karşısında arama motorlarının indeksleyebildiğinden 100% emin olamama durumu. 🙁
Bu yazıda React ile geliştirilmiş bir web sitesinin SEO uyumlu hale getirilmesi için yapılması gereken optimizasyonları ele alacağız.
Arama motorları web sayfalarını dizinine eklemek için siteleri tarayan ve kendisi için anlamlandıran botlar kullanır. Bu botlar çeşitli algoritmalar sayesinden web sayfalarını tarar, anlamlandırır, dizine ekler ve sıralar. Bu yazıda arama motorları arasında en çok kullanılan Google arama motoru üzerinden ilerleyeceğiz.
Googlebot, Google web tarayıcılarının (crawler) genel adıdır. Googlebot kullanıcıları simüle ederek web sitelerini tarar ve dizinine ekler. Bunu yaparken HTML/CSS ile yazılmış web sitelerini kolayca anlamlandırır. Fakat JavaScript’ler Googlebot tarafından her zaman optimum düzeyde tanımlanamayabilir. Google’ın yaptığı açıklamaya göre artık siteleri taramak için kullandığı botlar güncel tarayıcı sürümlerini kullanmaktadır. Bunun anlamı JavaScript frameworkleri ile geliştirilmiş web sitelerini anlamlandırabildiği ve dizinine ekleyebildiği olarak değerlendirilebilir.
İşi şansa bırakmamak adına bazı yöntemler uygulayarak ve standartlara uyarak indekslendiğimizden emin olabiliriz.
Google botlarının indeksleme süreçlerini irdelerken, sayfaları kod alt yapılarına göre değerlendirirsek daha anlaşılır olacaktır. Başlayalım.
Google tüm bu işlemeleri çok hızlı yapar. Peki JavaScript de durum nedir?
Bütün bu işlemler gerçekleştirildikten sonra, bot yeni URL adresleri bulabilir ve bunları tarama kuyruğuna ekleyebilir. Bu işlem doğrusaldır ve bir HTML sayfasını dizine eklemekten çok daha yavaş gerçekleşir. Her ne kadar Google konuyla ilgili olarak artık JavaScript’i tarayabildiğini ve indeksleyebilidiğini söylese de %100 olduğuna dair bir kanıt yok. Ayrıca arama motoru olarak başka arama motorları da var ve onların bu konuda Google’dan daha başarısız olduğu söylenebilir. Bu durumda bazı araçlar ve teknolojiler yardımıyla indekslendiğimizden emin olabiliriz.
Arama motorlarının indeksleme süreçleri bu şekilde gerçekleşir. Aslında daha iyi anlamak için tarayıcıların çalışma prensiplerini ve kullandıkları JavaScript motorlarını da bilmek gerekiyor. Fakat bu yazının konusu olmadığı için burada bırakalım ve asıl konumuza dönelim.
Yukarıda bahsettiğimiz üzere botların ve indeksleme süreçlerinin nasıl gerçekleştiğini artık biliyoruz. Fakat React’in de bir Javascript kütüphanesi olması indekslenme sürecinin sıkıntılı olacağı anlamına mı geliyor? Hayır. React ile geliştirilmiş web sitemiz de doğru yöntemler ile HTML gibi kolayca taranabilir ve indekslenebilir hale gelebilir. Bunu yapmanın farklı yolları vardır. Tek tek inceleyim.
Client Side Rendering arama motorlarına tarama kolaylığı açısından sunduğumuz bir yöntemdir. Basit bir şekilde anlatacak olursak şöyle ilerler:
Burada SEO açısından dikkat edilmesi gereken nokta CSR’de iş yükü tarayıcıdadır. Tarayıcı (Browser) javascript dosyalarını indirip kendisi çalıştırır. Kullanıma hazır olana kadar rendering işlemleri devam eder. Tarayıcı javascripti çalıştırıp kodu okunabilir hale getirmeden sayfada hiç bir şey görünmez. Komplike javascript kodları rendering süresini uzatabileceği için arama motoru botlarının sayfayı tam okuyamamasına neden olabilir. Birazdan değineceğimiz SSR’de ise durum tam tersidir.
Pre-Rendering de React ile geliştirilmiş web sitemizin botlar tarafından okunamadığı durumlar da tercih edilen yaklaşımlardan biridir. Mantığı çok basittir. Sunucuya yapılan isteğe göre davranır. İstek eğer bir bot tarafından yapıldıysa sayfanın statik HTML sürümünü gönderir. İstek kullanıcıdan geliyorsa, normal sayfa yüklenir.
Pre-Rendering servisleri ücretlidir. Ayrıca, sürekli yenilenen ve çok sayfalı web siteleri için uygun bir yaklaşım değildir. Çünkü içerik her yenilendiğinde önceden oluşturulan sayfayı tekrar oluşturmanız gerekir. Sayfa sayısı çok olan siteler için tarayıcılara çok fazla yük binmesine neden olur.
Google kolay uygulanabilir olması nedeniyle Pre-Rendering’i tavsiye ediyor. Örneğin Prerender.io bu ücretli servislerden biridir.
Server Side Rendering, React ile geliştirilmiş sayfanın sunucu da derlenerek tarayıcıya gönderilmesi olarak açıklanabilir. Daha açıklayıcı ve anlaşılır olması açısından sunucuya bir istek yapıldığındaki süreçleri inceleyelim.
Kullanıcı sahip olduğu URL adresinin içeriğine ulaşmak için sunucuya istek gönderir;
Server Side Rendering de iş yükü sunucu üzerindedir. Çünkü Javascriptin render edilmesi sunucuda gerçekleşir. Bu yüzden Server Side Rendering yavaş çalışan sunucular için daha fazla iş yükü demektir. Sunucuda performans kaybı yaşanabilir.
React JS ile yazılmış web sitesini Server Side Rendering ile SEO uyumlu hale getirebiliriz. Bunu yapmak içinde yine bir JavaScript frameworkü olan Next JS kullanırız. Next JS kullanmak zorunluluk değildir. React kütüphanesi ile de projemizi Server Side Rendering ile çalışır duruma getirebiliriz. Fakat Next JS sadece SSR için geliştirilmiş bir frameworkdür ve oldukça kolaylık sağlar. Bu yüzden tercih edilir ve edilmelidir.
React Helmet, herhangi bir componentin Meta Etiketlerini ayarlamanızı ve tanımlamanızı sağlayan bir kütüphanedir. Alışılanın aksine, HTML tabanlı bir web sayfasında olduğu gibi, React tabanlı bir web sitesinde varsayılan olarak Meta datalar ve başlıklar tanımlanamaz. Burada React Helmet kütüphanesinin yardımıyla bu tanımlamaları yapabiliriz.
React Helmet ile basit bir React Helmet Component örneği üzerinden devam edersek daha anlaşılır olacaktır. Böylece hiç bilmeyenlerin de kafasında bir şeyler oluşturmuş oluruz.
Bir React Helmet Componenti şöyledir;
import React from 'react';
import {Helmet} from 'react-helmet'
const App = () => (
<div>
<Helmet>
<title>
Muhteşeme React ve SEO Uyumu
</title>
<meta
name
="
description
"
content
="This is what you want to show as the page content in the Google SERP Listing"
/>
</Helmet>
<h1>
SEO Uyumlu React Projem!
</h1>
<p>
Merhaba SEO!
</p>
<AnyComponent/>
</div>
)
Yukarıda yer aldığı gibi <Helmet>
componenti, içerisinde yer alan meta dataları, bu componenti eklediğimiz sayfanın <head>
etiketlerinin arasında tanımlar.
Bildiğiniz üzere, React, Component’lerden oluşur ve bir çok Component’in bir araya gelmesiyle sayfa oluşturulur. Bu yaklaşım, yönetimi kolay ve sayfaların farklı yerlerinde, bir kere yazdığınız komponenti istediğiniz kadar kullanabilmenize olanak tanır. Böylece uygulamanın development aşamasının hızlanmasına çok büyük katkı sağlar.
Bunun dışında React’in Component yapısı ile birlikte Tek Sayfa Uygulamaları (SPA) sanal DOM kullanmasından dolayı kullanıcı deneyimine çok büyük katkı sağladığını söyleyebiliriz. Çünkü React de State değiştiğinde sadece etkilediği component render edilir. State bütün sayfaya etki etmez. Bu sebepten dolayı da kullanıcılar state’i değiştirecek bir işlem yaptığında bütün sayfanın tekrar render edilmesini beklemek zorunda kalmaz.
Temel olarak React Router, sayfaların yönlendirilmesini ve URL atamalarını yapmak için kullandığımız bir kütüphanedir. İki farklı kullanım şekli vardır. HashRouter ve BrowserRouter. React Router kütüphanesi kullanımı ile birlikte SPA sitelerin farklı URL ile tanımlanmasını sağlarız. SEO açısından URL’lerin ne kadar önemli olduğunu biliyoruz. React Router arama motoru dostu (Search Engine Friendly) URL adresleri oluşturmamızı mümkün kılar.
React Router’ı projemize eklemek için;
npm install react-router-dom
Router’dan bahsetmişken, URL adresleri tanımlarken # (Hash) kullanılmamalıdır. Arama motorları Hash barındıran URL’leri yeni URL gibi görmemektedir.
Next.JS bir React kütüphanesidir. Server Side Rendering başta olmak üzere farklı işlemler yapmak için geliştirilmiştir. Yukarıda bahsettiğimiz üzere Server Side Rendering yani sunucu tarafında render işlemini gerçekleştirip tarayıcıya düz bir html gönderen Next JS katmanıdır. Next JS hakkında daha fazla bilgi edinmek için dökümantasyonu okuyabilirsiniz.
Next JS bize aynı zamanda code splitting özelliği de sağlıyor. Ekstra zaman harcamak ve konfigürasyon işlemlerini bizim yerimize hallediyor. Kullanıcı deneyimi bizim için çok önemli buna bir itirazımız yok ama Next JS benzeri kütüphanelerde Developer friendly kütüphaneler olduğu için projeye müdahale etmek veya geliştirme süresinin kısaltılması konusunda müthiş katkılar sağlıyor. Bu da benim SEO kriterim 🙂
React-snap sayfanın pre-render edilmesini ve sabit HTML olarak işlenmesini sağlar. Sayfa yüklenmeleri ve first paint dediğimiz ilk boyama süresini hızlandırır. Prerendering yaklaşımını kullanan projelerde kullanılabilir.
React – ga, React ile geliştirilmiş web sitesine Google Analytics kodunu eklemek için kullanılan bir JavaScript modülüdür. Google Analytics’in son sürümü ile çalışacak şekilde tasarlanmıştır.
Topluluk tarafından hazırlanan hazır komponentlere Community Components ‘den ulaşabilirsiniz.
React ile geliştirilmiş web sitesine Gtm kodlarını eklemenizi sağlayan javascript modülüdür. Bildiğiniz üzere Google Tag Manager pazarlama ve ölçümler yapmak için kullanılan bir etiket yönetim sistemidir. Biraz daha açmak gerekirse bir web sitesinden çalışacak tüm harici kodların tek bir sistemden kontrol edilmesini sağlar.
React-gtm-module ise GTM snipetini kullanmak için tasarlanmıştır. Kullanımı ve projenize bağımlılık olarak eklemek için Github adresini ziyaret edebilirsiniz.
Yazar: Oğuz Karaoğlan