Temmuz 24th, 2020 React İle Geliştirilmiş Web Siteleri İçin Arama Motoru Optimizasyonu (SEO)
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 Nasıl Ekler?
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 Nasıl Çalışır?
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.
Googlebot’un indexleme süreçleri
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.
Botlar HTML’i nasıl tarar ve İndexler?
- Googlebot HTML dosyayı indirir.
- İndirilen bu dosyaları bir kerede işleyebilmesi için bağlantıyı sayfa kodundan çıkarır.
- Tüm yük kaynaklarını caffeine indeksleme sistemine gönderir.
- Caffeine sayfayı dizine ekler.
Google tüm bu işlemeleri çok hızlı yapar. Peki JavaScript de durum nedir?
Botlar JavaScript’i Nasıl tarar ve İndexler?
- Googlebot HTML dosyayı indirir.
- Ardından CSS ve JS dosyalarını yükler.
- Google WRS, javascript kodlarını ayrıştırır, derler ve yürütür.
- Google WRS, harici API’lerden ve veri tabanlarından verileri getirir.
- Sayfa birleştirilir ve dizin işleme sistemi için işlenebilir hale gelmiş olur.
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.
React ile Geliştirilmiş Web Sitesini SEO Uyumlu Hale Getirme Yöntemleri
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 (CSR)
Client Side Rendering arama motorlarına tarama kolaylığı açısından sunduğumuz bir yöntemdir. Basit bir şekilde anlatacak olursak şöyle ilerler:
- Sunucu tarayıcıya basit bir HTML sayfası gönderir.
- Daha sonra tarayıcı bu sayfayı Javascript ile derleyerek anlamlı bir HTML çıktı elde edilir.
- Bu HTML çıktısı da tarayıcıda derlenerek kullanıcıya sunulur.
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
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 (SSR)
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;
- İstek sunucu tarafından işlenir (render edilir) ve cevap verilir.
- Tarayıcı JS dosyalarını indirir ve çalıştırır.
- Sayfa etkileşime hazır hale gelir.
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.
SEO Uyumlu Web Sitesi İçin React İle Birlikte Kullanılması Önerilen Kütüphaneler
React Helmet
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.
React Router
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
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
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 Google Analytics Module (React-ga)
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 – gtm – module (Gtm: Google Tag Manager)
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.
React İle Web Site Geliştirirken Dikkat Edilmesi Gereken SEO Kriterleri: Özet
- Linkleme yapılırken <a /> elementi kullanılmalıdır.
- Görseller img src elementi kullanılarak yüklenmelidir.
- URL yapısında # kullanılmamalıdır. Çünkü arama motoru botları #’den sonrasını okumaz. Arama Motoru dostu URL metodu tercih edilmelidir.
- setTimeOut gibi sayfa yüklenme sürelerini arttırıcı fonksiyonlardan kaçınılmalıdır.
- Özellikle SPA’lar olmak üzere uzun listeleme sayfalarının da olacağı göz önünde bulundurularak LazyLoad tercih kullanılmalıdır. React-LazyLoad kütüphanesinden yararlanabilirsiniz.
- GoogleBot’un ayırdığı tarama bütçesi sebebiyle yavaş çalışan scriptler GoogleBot’un sayfayı yüklenmeden taramasına ve boş olarak görmesine neden olur, kaçınılmalıdır.
Yazar: Oğuz Karaoğlan
