React SEO Stratejileri ve En İyi Uygulamalar

React, bildirimsel , modüler ve platformlar arası etkileşimli kullanıcı arayüzleri oluşturmak için geliştirildi. Bugün, performanslı ön uç uygulamaları yazmak için en popüler olmasa da en popüler JavaScript çerçevelerinden biridir. Başlangıçta Tek Sayfa Uygulamaları (SPA) yazmak için geliştirilen React, artık tam teşekküllü web siteleri ve mobil uygulamalar oluşturmak için kullanılıyor.

Geleneksel web geliştirme konusunda kapsamlı deneyiminiz varsa ve React'e geçerseniz, HTML ve CSS kodunuzun JavaScript'e taşındığını fark edeceksiniz. Bunun nedeni, React'in doğrudan UI öğeleri oluşturmayı veya güncellemeyi önermemesi, bunun yerine UI'nin "durumunu" tanımlamasıdır. React daha sonra DOM'yi durumla en verimli şekilde eşleşecek şekilde güncelleyecektir.

Sonuç olarak, kullanıcı arayüzü veya DOM'deki tüm değişiklikler React'in motoru aracılığıyla yapılmalıdır. Geliştiriciler için uygun olsa da bu, kullanıcılar için daha uzun yükleme süreleri ve arama motorlarının içeriği bulması ve dizine eklemesi için daha fazla iş anlamına gelebilir.

Bu yazıda, SEO-performanslı React uygulamaları ve web siteleri oluştururken karşılaşılan zorlukları ele alacağız ve bunların üstesinden gelmek için kullanılan birkaç stratejiyi özetleyeceğiz.

Google Web Sayfalarını Nasıl Tarar ve Dizine Ekler?

Google, tüm çevrimiçi aramaların %90'ından fazlasını alır. Tarama ve indeksleme sürecine daha yakından bakalım.

Google'ın belgelerinden alınan bu anlık görüntü bize yardımcı olabilir. Lütfen bunun basitleştirilmiş bir blok diyagram olduğunu unutmayın. Gerçek Googlebot çok daha karmaşıktır.

Dikkat edilecek noktalar:

1. Googlebot, gelecekte taraması ve dizine eklemesi için ihtiyaç duyduğu tüm URL'leri içeren bir tarama sırası tutar.
2. Tarayıcı boştayken, sıradaki bir sonraki URL'yi alır, bir istekte bulunur ve HTML'yi getirir.
3. HTML'yi ayrıştırdıktan sonra Googlebot, içeriği oluşturmak için JavaScript'i alıp yürütmesi gerekip gerekmediğini belirler. Evetse, URL bir oluşturma kuyruğuna eklenir.
4. Daha sonraki bir noktada, oluşturucu, sayfayı oluşturmak için JavaScript'i getirir ve yürütür. Oluşturulan HTML'yi işlem birimine geri gönderir.
5. İşlem birimi, web sayfasında belirtilen tüm URL'lerin <a> tags çıkarır ve bunları yeniden tarama kuyruğuna ekler.
6. İçerik Google'ın dizinine eklenir.

HTML'yi ayrıştıran İşleme aşaması ile JavaScript'i çalıştıran Oluşturucu aşaması arasında açık bir ayrım olduğuna dikkat edin.

Bu ayrım, Googlebot'ların 130 trilyondan fazla web sayfasına bakması gerektiği göz önüne alındığında, JavaScript yürütmenin pahalı olması nedeniyle mevcuttur. Bu nedenle, Googlebot bir web sayfasını taradığında, HTML'yi hemen ayrıştırır ve ardından JavaScript'i daha sonra çalışması için sıraya koyar . Google'ın belgeleri, bir sayfanın oluşturma sırasında birkaç saniye kaldığından bahseder, ancak daha uzun olabilir.

Tarama bütçesi kavramından da bahsetmeye değer. Google'ın taraması, bant genişliği, zaman ve Googlebot örneklerinin kullanılabilirliği ile sınırlıdır. Her web sitesini indekslemek için belirli bir bütçe veya kaynak tahsis eder. Binlerce sayfası olan (örneğin, bir e-ticaret web sitesi) büyük bir içerik ağırlıklı web sitesi oluşturuyorsanız ve bu sayfalar içeriği oluşturmak için çok fazla JavaScript kullanıyorsa, Google web sitenizden daha az içerik okuyabilir.

Not: Google'ın tarama bütçenizi yönetme yönergelerini buradan okuyabilirsiniz.

Neden SEO için React'i Optimize Etmek Zor?

Googlebot'a, taramaya ve dizine eklemeye ilişkin kısa genel bakışımız yalnızca yüzeyi çizer. Yine de yazılım mühendisleri, React sayfalarını taramaya ve dizine eklemeye çalışan arama motorlarının karşılaştığı olası sorunları belirlemelidir. Şimdi, React SEO'yu neyin zorlaştırdığına ve bu zorlukların bazılarını ele almak ve üstesinden gelmek için geliştiricilerin neler yapabileceğine daha yakından bakabiliriz.

Boş İlk Geçiş İçeriği

React uygulamalarının büyük ölçüde JavaScript'e güvendiğini ve genellikle arama motorlarında sorunlarla karşılaştıklarını biliyoruz. Bunun nedeni, React'in varsayılan olarak bir uygulama kabuğu modeli kullanmasıdır. İlk HTML, anlamlı bir içerik içermez ve bir kullanıcı veya bot, sayfanın gerçek içeriğini görmek için JavaScript'i çalıştırmalıdır.

Bu yaklaşım, Googlebot'un ilk geçiş sırasında boş bir sayfa algıladığı anlamına gelir. İçerik, yalnızca sayfa oluşturulduğunda Google tarafından görülür. Bu, binlerce sayfayla uğraşırken içeriğin dizine eklenmesini geciktirecektir.

Yükleme Süresi ve Kullanıcı Deneyimi

JavaScript'i getirmek, ayrıştırmak ve yürütmek zaman alır. Ayrıca, JavaScript'in içeriği almak için ağ aramaları yapması gerekebilir ve kullanıcının istenen bilgileri görebilmesi için bir süre beklemesi gerekebilir.

Google, sıralama ölçütlerinde kullanılan, kullanıcı deneyimiyle ilgili bir dizi web hayati değeri ortaya koymuştur. Daha uzun yükleme süresi, kullanıcı deneyimi puanını etkileyerek Google'ın bir siteyi daha düşük sıralamaya yönlendirmesine neden olabilir.

Aşağıdaki bölümde web sitesi performansını ayrıntılı olarak inceliyoruz.

Sayfa Meta Verileri

Meta <meta> etiketleri, Google ve diğer sosyal medya web sitelerinin sayfalar için uygun başlıkları, küçük resimleri ve açıklamaları göstermesine izin verdiği için faydalıdır. Ancak bu web siteleri, bu bilgileri almak için getirilen web sayfasının <head> etiketine güvenir. Bu web siteleri, hedef sayfa için JavaScript yürütmez.

React, meta etiketler dahil tüm içeriği istemcide işler. Uygulama kabuğu tüm web sitesi/uygulama için aynı olduğundan, meta verileri tek tek sayfalara uyarlamak zor olabilir.

site haritası

Site haritası, sitenizdeki sayfalar, videolar ve diğer dosyalar ve bunlar arasındaki ilişkiler hakkında bilgi verdiğiniz bir dosyadır. Google gibi arama motorları, sitenizi daha akıllı bir şekilde taramak için bu dosyayı okur.

React, site haritaları oluşturmak için yerleşik bir yola sahip değildir. Yönlendirmeyi yönetmek için React Router gibi bir şey kullanıyorsanız, biraz çaba gerektirse de site haritası oluşturabilecek araçlar bulabilirsiniz.

Diğer SEO Hususları

Bu düşünceler, genel olarak iyi SEO uygulamaları oluşturmakla ilgilidir.

1. İnsanlara ve arama motorlarına sayfada ne bekleyecekleri konusunda iyi bir fikir vermek için en uygun URL yapısına sahip olun.
2. robots.txt dosyasını optimize etmek, arama botlarının web sitenizdeki sayfaları nasıl tarayacağını anlamasına yardımcı olabilir.
3. CSS, JS, yazı tipleri vb. gibi tüm statik varlıkları sunmak için bir CDN kullanın ve yükleme sürelerini azaltmak için duyarlı görüntüler kullanın.

Sunucu tarafı işleme (SSR) veya ön işleme kullanarak yukarıda özetlenen sorunların çoğunu çözebiliriz. Aşağıda bu yaklaşımları inceleyeceğiz.

İzomorfik Tepki Girin

İzomorfik kelimesinin sözlük tanımı, "şeklinde karşılık gelen veya benzer" şeklindedir.

React terimlerinde bu, sunucunun istemciye benzer bir forma sahip olduğu anlamına gelir. Başka bir deyişle, aynı React bileşenlerini sunucu ve istemci üzerinde yeniden kullanabilirsiniz.

Bu izomorfik yaklaşım, sunucunun React uygulamasını oluşturmasını ve oluşturulan sürümü kullanıcılarımıza ve arama motorlarına göndermesini sağlar, böylece JavaScript arka planda yüklenip yürütülürken içeriği anında görüntüleyebilirler.

Next.js veya Gatsby gibi çerçeveler bu yaklaşımı popüler hale getirdi. İzomorfik bileşenlerin geleneksel React bileşenlerinden önemli ölçüde farklı görünebileceğini belirtmeliyiz. Örneğin, istemci yerine sunucuda çalışan kodu içerebilirler. API sırlarını bile içerebilirler (her ne kadar sunucu kodu istemciye gönderilmeden önce çıkarılsa da).

Unutulmaması gereken bir nokta, bu çerçevelerin çok fazla karmaşıklığı soyutlaması, ancak aynı zamanda kod yazmanın fikirli bir yolunu da getirmesidir. Bu makalede performans takaslarını daha ayrıntılı olarak inceleyeceğiz.

Ayrıca işleme yolları ile web sitesi performansı arasındaki ilişkiyi anlamak için bir matris analizi yapacağız. Ancak ondan önce, web sitesi performansını ölçmenin bazı temellerini gözden geçirelim.

Web Sitesi Performansı için Metrikler

Arama motorlarının web sitelerini sıralamak için kullandığı bazı faktörleri inceleyelim.

Google, bir kullanıcının sorgusunu hızlı ve doğru bir şekilde yanıtlamanın yanı sıra, iyi bir web sitesinin aşağıdaki özelliklere sahip olması gerektiğine inanır:

• Hızlı yüklenmelidir.
• Kullanıcılar çok fazla bekleme süresi olmadan içeriğe erişebilmelidir.
• Bir kullanıcının eylemleriyle erkenden etkileşimli hale gelmelidir.
• Bir kullanıcının verilerinin veya pilinin boşalmasını önlemek için gereksiz verileri getirmemeli veya pahalı kod yürütmemelidir.

Bu özellikler kabaca aşağıdaki metriklerle eşleşir:

• TTFB : İlk Bayt Süresi – Bir bağlantının tıklanması ile içeriğin ilk biti arasında geçen süre.
• LCP : En Büyük İçerikli Boya – İstenen makalenin görünür hale geldiği zaman. Google, bu değeri 2,5 saniyenin altında tutmanızı önerir.
• TTI : Etkileşim Zamanı – Bir sayfanın etkileşimli hale geldiği zaman (kullanıcı kaydırabilir, tıklayabilir, vb.).
• Paket boyutu – Sayfa tamamen görünür ve etkileşimli hale gelmeden önce indirilen toplam bayt sayısı ve yürütülen kod.

Çeşitli oluşturma yollarının her birini nasıl etkileyebileceğini daha iyi anlamak için bu ölçümleri tekrar gözden geçireceğiz.

Şimdi, React geliştiricilerinin kullanabileceği farklı oluşturma yollarını anlayalım.

Yolları Oluştur

Bir React uygulamasını tarayıcıda veya sunucuda render edip farklı çıktılar üretebiliriz.

İstemci ve sunucu tarafında oluşturulan uygulamalar arasında, yönlendirme ve kod bölme olmak üzere iki işlev önemli ölçüde değişir. Aşağıda bunlara daha yakından bakacağız.

İstemci Tarafı Oluşturma (CSR)

İstemci tarafı oluşturma, bir React SPA için varsayılan oluşturma yoludur . Sunucu, herhangi bir içerik içermeyen bir kabuk uygulaması sunacaktır. Tarayıcı, dahil edilen JavaScript kaynaklarını indirdiğinde, ayrıştırdığında ve çalıştırdığında, HTML içeriği doldurulur veya oluşturulur .

Yönlendirme işlevi, tarayıcı geçmişi yönetilerek istemci uygulaması tarafından gerçekleştirilir. Bu, hangi rotanın istendiğine bakılmaksızın aynı HTML dosyasının sunulduğu ve istemcinin, oluşturulduktan sonra görünüm durumunu güncellediği anlamına gelir.

Kod bölme nispeten basittir. Dinamik içe aktarmaları veya React.lazy'yi kullanarak kodunuzu, rota veya kullanıcı eylemlerine göre yalnızca gerekli bağımlılıkların yüklenmesini sağlayacak şekilde bölebilirsiniz.

Sayfanın içerik (örneğin bir blog başlığı veya ürün açıklaması) oluşturmak için sunucudan veri alması gerekiyorsa, bunu yalnızca ilgili bileşenler monte edilip oluşturulduğunda yapabilir.

Web sitesi ek veriler alırken, kullanıcı büyük olasılıkla bir "Veri yükleniyor" işareti veya göstergesi görecektir.

Önyüklemeli Verilerle İstemci Tarafı İşleme (CSRB)

CSR ile aynı senaryoyu düşünün, ancak DOM oluşturulduktan sonra veri almak yerine, sunucunun sunulan HTML içinde önyüklenen ilgili verileri gönderdiğini varsayalım.

Şuna benzeyen bir düğüm ekleyebiliriz:

 <script type="application/json"> {"title": "My blog title", "comments":["comment 1","comment 2"]} </script>

Ve bileşen monte edildiğinde onu ayrıştırın:

 var data = JSON.parse(document.getElementById('data').innerHTML);

Kendimizi sunucuya gidiş-dönüş bir yolculuktan kurtardık. Birazdan takasları göreceğiz.

Statik İçeriğe Sunucu Tarafı Oluşturma (SSRS)

Anında HTML oluşturmamız gereken bir senaryo hayal edin.

Örneğin, çevrimiçi bir hesap makinesi oluşturuyorsak ve kullanıcı /hesapla/34+15 (URL çıkışını dışarıda bırakarak) türünde bir sorgu yayınlıyorsa. Sorguyu işlememiz, sonucu değerlendirmemiz ve oluşturulan HTML ile yanıt vermemiz gerekiyor.

Oluşturulan HTML'mizin yapısı oldukça basittir ve oluşturulan HTML sunulduktan sonra DOM'u yönetmek ve işlemek için React'e ihtiyacımız yoktur.

Bu yüzden sadece HTML ve CSS içeriği sunuyoruz. Bunu başarmak için renderToStaticMarkup yöntemini kullanabilirsiniz.

Her sonuç için HTML'yi yeniden hesaplaması gerektiğinden, yönlendirme tamamen sunucu tarafından işlenecektir, ancak CDN önbelleğe alma yanıtları daha hızlı sunmak için kullanılabilir. CSS dosyaları, sonraki sayfaların daha hızlı yüklenmesi için tarayıcı tarafından da önbelleğe alınabilir.

Rehidrasyon (SSRH) ile Sunucu Tarafı İşleme

Yukarıda açıklananla aynı senaryoyu hayal edin, ancak bu sefer istemcide tamamen işlevsel bir React uygulamasına ihtiyacımız var.

Sunucuda ilk render işlemini gerçekleştireceğiz ve JavaScript dosyalarıyla birlikte HTML içeriğini geri göndereceğiz. React, sunucu tarafından oluşturulan işaretlemeyi yeniden sulandıracak ve uygulama bu noktadan itibaren bir CSR uygulaması gibi davranacaktır.

React, bu eylemleri gerçekleştirmek için yerleşik yöntemler sağlar.

İlk istek sunucu tarafından işlenir ve sonraki işlemeler istemci tarafından işlenir. Bu nedenle, bu tür uygulamalara evrensel React uygulamaları denir (hem sunucuda hem de istemcide oluşturulur). Yönlendirmeyi işleyecek kod, istemci ve sunucuda bölünebilir (veya çoğaltılabilir).

ReactDOMServer desteklemediğinden kod bölme de biraz zor. tembel, bu yüzden Yüklenebilir Bileşenler gibi bir şey kullanmanız gerekebilir.

Ayrıca ReactDOMServer sadece sığ bir render gerçekleştirdiğine de dikkat edilmelidir. Başka bir deyişle, bileşenleriniz için render yöntemi çağrılacak olsa da componentDidMount gibi yaşam döngüsü yöntemleri çağrılmayacaktır. Bu nedenle, alternatif bir yöntem kullanarak bileşenlerinize veri sağlamak için kodunuzu yeniden düzenlemeniz gerekecektir.

NextJS gibi çerçevelerin ortaya çıktığı yer burasıdır. SSRH'de yönlendirme ve kod bölme ile ilgili karmaşıklıkları maskeler ve daha sorunsuz bir geliştirici deneyimi sağlar.

Bu yaklaşım, birazdan göreceğimiz gibi, sayfa performansı söz konusu olduğunda karışık sonuçlar verir.

Statik İçeriğe Ön İşleme (PRS)

Bir web sayfasını, kullanıcı talep etmeden önce oluşturabilseydik ne olurdu? Bu, derleme zamanında veya veriler değiştiğinde dinamik olarak yapılabilir.

Daha sonra ortaya çıkan HTML içeriğini bir CDN'de önbelleğe alabilir ve bir kullanıcı istediğinde çok daha hızlı sunabiliriz.

Buna, içeriği oluşturmadan önce ön işleme, kullanıcı öncesi istek denir. Bu yaklaşım, içerikleri genellikle kullanıcı tarafından sağlanan verilere bağlı olmadığı için bloglar ve e-ticaret uygulamaları için kullanılabilir.

Rehidrasyon (PRH) ile ön işleme

Bir müşteri onu oluşturduğunda, önceden oluşturulmuş HTML'mizin tamamen işlevsel bir React uygulaması olmasını isteyebiliriz.

İlk istek sunulduktan sonra uygulama standart bir React uygulaması gibi davranacaktır. Bu mod, yönlendirme ve kod bölme işlevleri açısından yukarıda açıklanan SSRH'ye benzer.

Performans Matrisi

Beklediğiniz an sonunda geldi. Bir hesaplaşma zamanı. Bu oluşturma yollarının her birinin web performans ölçümlerini nasıl etkilediğine bakalım ve kazananı belirleyelim.

Bu matriste, bir performans metriğinde ne kadar iyi performans gösterdiğine bağlı olarak her bir işleme yoluna bir puan atarız.

Puan 1 ile 5 arasında değişmektedir:

• 1 = Yetersiz
• 2 = Zayıf
• 3 = Orta
• 4 = İyi
• 5 = Mükemmel

Önemli Çıkarımlar

Statik içeriğe (PRS) ön işleme, en yüksek performanslı web sitelerine yol açarken, hidrasyon (SSRH) veya istemci tarafı oluşturma (CSR) ile sunucu tarafı oluşturma, yetersiz sonuçlara yol açabilir.

Web sitesinin farklı bölümleri için birden fazla yaklaşım benimsemek de mümkündür. Örneğin, bu performans metrikleri, halka açık web sayfaları için kritik olabilir, bu nedenle daha verimli bir şekilde dizine eklenebilirler, ancak bir kullanıcı oturum açıp özel hesap verilerini gördüğünde daha az önemli olabilir.

Her işleme yolu, verilerinizi nerede ve nasıl işlemek istediğinize ilişkin ödünleşimleri temsil eder. Önemli olan, bir mühendislik ekibinin bu ödünleşimleri açıkça görebilmesi ve tartışabilmesi ve kullanıcılarının mutluluğunu en üst düzeye çıkaran bir mimari seçebilmesidir.

İleri Okuma ve Hususlar

Şu anda popüler olan teknikleri ele almaya çalışırken, bu kapsamlı bir analiz değil. Google'dan geliştiricilerin akış sunucusu oluşturma, trizomorfik oluşturma ve dinamik oluşturma (tarayıcılara ve kullanıcılara farklı yanıtlar sunma) gibi diğer gelişmiş teknikleri tartıştığı bu makaleyi okumanızı şiddetle tavsiye ederim.

İçerik ağırlıklı web siteleri oluştururken göz önünde bulundurmanız gereken diğer bazı faktörler arasında, yazarlarınız için iyi bir içerik yönetim sistemine (CMS) ihtiyaç duyulması ve sosyal medya önizlemelerini kolayca oluşturma/değiştirme ve görüntüleri değişen ekran boyutları için optimize etme yeteneği yer alır.