Aşamalı Web Uygulamaları (PWA) ve Arama Motoru Optimizasyonu (SEO)

Progresif Web Uygulaması (PWA), web aracılığıyla sağlanan bir uygulama yazılımıdır. HTML, CSS, JavaScript vb. standart web teknolojileri kullanılarak oluşturulmuştur. PWA'lar genellikle web sitesinin dönüşüm oranını ve trafiğini artırmak için kullanılır. 2021'den itibaren PWA'lar (tamamen veya kısmen) Google Chrome, Apple Safari, Android için Firefox ve Microsoft Edge tarafından desteklenmektedir.

Nispeten yeni bir gelişme olan PWA optimizasyonu, çoğu durumda hala olumlu sonuçlara yol açıyor ve şaşırtıcı istatistiklere sahip. PWA İstatistikleri, PWA'yı uygulayan hizmetlerin elde ettiği faydaları sürekli olarak rapor eder.

Genel olarak, TOP 30 PWAs raporuna göre, "progresif web uygulamalarının ortalama dönüşüm oranı, yerel mobil uygulamalarınkinden %36 daha yüksekti".

Çevrimiçi pazarlama söz konusu olduğunda PWA'lar harika yardımcılardır. Bu yüzden SEO kalabalığı arasında popülerdirler. Ancak, tıpkı React ve SEO gibi, PWA SEO kombinasyonunun da zorlukları vardır. Bu yazıda, PWA'ların SEO ile nasıl çalıştığına ışık tutacağız.

PWA'nın Örnekleri ve Temel Faydaları

Herhangi bir web servisi bir PWA olabilir. Bunun için üç temel gereksinim vardır:

1. HTTPS altında çalışır.
2. Bir Web Uygulaması Manifestosu içerir.
3. Bir hizmet çalışanı uygular.

PWA'nın temel amacı, her kullanıcı için üstün işlevsellik sağlamaktır. PWA'ların sunduğu başlıca avantajların listesi aşağıdadır:

1. PWA, kelimenin tam anlamıyla her işletmeye yeni fırsatlar ve büyüme getiriyor. En iyi uygulama ve web niteliklerini birleştirir, yanıt verir ve herhangi bir cihazda çalışabilir ve mutlaka hızlı bir ağ gerektirmez.
2. Aktarım katmanı güvenliği onu güvenli kılar.
3. Servis çalışanı (tarayıcınızın arka planda çalıştırdığı özel bir komut dosyası), PWA'ların çevrimdışı modda çalışmasına izin verir.

PWA'nın benimsenmesinin en büyük örneklerinden bazılarına bakalım:

Sizin için önerilen: Aşamalı Web Uygulamaları (PWA'lar) Oluşturmak için En Popüler Çerçeveler.

1. Starbucks

Starbucks'ın sipariş sisteminin PWA'sı basit ve kullanıcı dostudur. Tıpkı yerel uygulamalarına benziyor ancak bir kullanıcı menüye göz attığında ve sepete ürün eklediğinde çevrimdışı çalışma yeteneğine sahip. Böyle bir çözümün en iyi yararı, PWA'nın Starbucks'ın standart uygulamasından neredeyse iki kat daha küçük olmasıdır. Bu nedenle şirket, web kullanıcılarının sayısını önemli ölçüde artırdı.

2. Pinterest

Düşük performansı nedeniyle Pinterest mobil kullanıcılarının yalnızca %1'inin bir uygulamayı indirip oturum açtığı keşfedildikten sonra, mobil uygulama PWA teknolojisi temelinde yeniden oluşturuldu. Bu sayede harcanan zaman, reklam geliri ve temel etkileşimler gibi göstergeler %40 - %60'a varan artışlar sağladı.

3. Über

Uber web uygulaması, düşük hızlı ağlarda ve yerel Uber uygulamasıyla uyumlu olmayan eski akıllı telefonlarda hızlı hizmet sağlamak amacıyla bir PWA olarak yeniden oluşturuldu. Bu sayede süper hafif bir çekirdek uygulama, 2G ağlarında yaklaşık 3 saniyede yüklenir.

SEO'nun Önemi

SEO tamamen web sitenizi arama motorları (SE'ler) için optimize etmekle ilgilidir. Ana amacı, web sitesinin arama sonuçlarındaki sıralamasını iyileştirmek ve ziyaretçilerin ilgisini çekmektir. SE algoritmalarına dayanır ve arama motorlarının ilgili içeriği göstermesine ve hedef kitleyi web sitelerine çekmesine yardımcı olmak için anahtar kelimeler kullanır. Bu, SEO türünün en iyisi olan web sitenize organik trafik getirebilir. Doğrudan ve ücretli trafiğin aksine, ziyaretçilerinizin çoğunu müşterilerinize ve müşterilerinize dönüştürebilir.

Aşamalı Web Uygulamaları için SEO: Sorun Nedir?

PWA'nın sağladığı tüm faydalara rağmen, birçok web sitesi sahibi teknolojiyi uygulamakta hala tereddüt ediyor. Bunun iki ana nedeni var:

1. Halihazırda iyi işleyen mevcut sistemi değiştirme korkusu.
2. PWA'nın SEO ile nasıl çalıştığına dair yetersiz anlayış.

John Mueller (Google'da analist) tarafından belirtildiği gibi, "PWA'ların şu anda Google Arama'da herhangi bir avantajı yoktur."

Birçok PWA, SEO dostu doğasıyla bilinmeyen JS çerçeveleri kullanılarak oluşturulur.

Dolayısıyla, geleneksel HTML tabanlı web sitelerinin aksine, JavaScript'e bağımlı PWA'lar SEO için zorlayıcıdır. Bu nedenle aranabilirlik açısından herhangi bir avantaj sunmazlar. Ancak, yaygın inanışın aksine bu, progresif web uygulamalarının arama motorları tarafından dizine eklenemeyeceği anlamına gelmez. Bunun için farklı teknikler kullanmanız yeterli.

Sunucu Tarafında İşleme ve İstemci Tarafında İşleme

Çoğu web sitesi Sunucu Tarafında Oluşturmayı (SSR) kullanır. Sayfanın tarayıcıda oluşturulmak yerine sunucu tarafında oluşturulduğu en basit yaklaşımdır. Ancak, bir kullanıcı sayfayı her istediğinde HTML'nin tamamı yüklenir ve bu, internet bağlantısı istikrarlı veya yeterince hızlı olmadığında sorunlu olabilir.

JavaScript tabanlı PWA'lar, içeriğin istemcinin tarayıcısında işlendiği istemci tarafı işlemeyi (CSR) kullanır. Bir kullanıcı sayfayı her istediğinde HTML sayfasının tamamını göndermez. JavaScript dosyası, müşterinin tarayıcısındaki sayfadaki bilgilerin yalnızca gerekli kısmını görüntüler. Bu nedenle, zayıf bir internet bağlantısıyla bile sayfa daha hızlı yüklenir.

Ancak, neden birçok web sitesi sahibi hala CSR kullanmayı reddediyor? Sorun Google botu. Web sitesinin içeriğini HTML belgesinde tamamen görünen kodda okuyabilir. CSR, kendi durumunda, tamamen bir arama motorunun JavaScript'i işleme yeteneğine güvenir. Bu nedenle CSR uygulamalarının dizine eklenemeyeceği görüşü vardır. Ancak, aslında, tüm arama motorları arasında Google, JavaScript'i işlemede en iyisidir.

Yine de bu, JavaScript ve SEO ile ilgili sorunun çözüldüğü anlamına gelmiyor: Google, JS'nin işlenmesinin mükemmel olmadığını kabul ediyor. Yani, JavaScript tabanlı bir sayfayı tarama işlemi, bir HTML sayfasınınkinden daha fazla zaman alır. Aslında bu, JavaScript içeriğinin arama motorunun sonuç sayfalarında görünmesi için daha fazla beklemeniz gerekeceği anlamına gelir.

Tüm bunlar, web sitesi sahiplerinin hem ziyaretçilerinin kullanıcı deneyimini iyileştirmelerini hem de içeriklerini arama motorları için optimize etmelerini zorlaştırıyor.

Arama Motoru Optimizasyonunuzu Kaybetmeden PWA Nasıl Uygulanır?

İlginizi çekebilir: Magento PWA Studio: Magento için Aşamalı Web Uygulaması Aracı!

1. Dinamik Oluşturmayı Uygulayın

Dinamik oluşturma, içeriğin farklı sürümlerini farklı kaynaklara gösterir. Ziyaretçi bir CSR sürümü alır ve tarayıcı, sunucu tarafında oluşturulmuş bir sürüm alır. Bu, JavaScript tabanlı sayfaların Google bot tarafından dizine eklenmesini iyileştirmeye olanak tanır. Bu sayede web sitesinin SEO'sunu riske atmadan müşterilerinize en uygun kullanıcı deneyimini sunmuş olursunuz.

2. SSR ve CSR'yi birleştirin

Tarayıcının, sunucu tarafı oluşturmayı kullanarak içeriğin en önemli kısımlarını (kesinlikle arama motorlarına iletilmesi gereken) göreceğinden emin olun. Bu bilgiler, tarayıcı sayfayı keşfeder keşfetmez toplanacaktır. Kalan bilgiler, sürecin ikinci aşamasında istemci tarafında işleme yoluyla otomatik olarak işlenecektir.

3. SEO dostu JavaScript çerçevesini kullanarak PWA'nızı oluşturun

Harika tavsiyemiz GatsbyJS. Bu çerçeveyi kullanarak bir PWA web sitesi oluşturmak (ayrıca mevcut Gatsby web sitesini bir PWA'ya dönüştürmek) oldukça kolaydır. İnternet bağlantısı yavaş olsa bile harika, gecikmesiz bir performans için web sitenizi bir oluşturma adımında önceden oluşturur. Bu sayede ziyaretçileriniz uygulama benzeri bir göz atma deneyimi yaşar.

4. Kullanıma Hazır PWA Çözümlerine Başvurun

Bugün, PWA'lar her zamankinden daha uygun fiyatlı. Bu nedenle, PWA geliştirmeye çok fazla zaman ve kaynak harcamak istemiyorsanız, SEO ilkelerine göre yapılmış ve kapsamlı bir şekilde test edilmiş, kullanıma hazır bazı PWA çözümlerini kullanabilir, böylece kalitesinden emin olabilirsiniz. kodun

5. PWA stüdyosu

PWA stüdyosu, uygulama benzeri bir deneyim sağlamak için tasarlanmış bir web teknolojisi standardı olarak 2019'da piyasaya sürüldü. Aslında, tam olarak kullanıma hazır bir çözüm değildir: PWA geliştirme için araçlar ve özelliklerden oluşan bir koleksiyondur. Bu çözüm oldukça karmaşık ve etkileyici ama ek ayarlamalar gerektiriyor.

6. ScandiPWA

ScandiPWA, React ve Redux tabanlı açık kaynaklı bir çözümdür. Web sitelerini hız ve çevrimdışı çalışma yeteneği ile geliştirmek amacıyla tasarlanmıştır. Ayrıca sürekli olarak güncellenir, böylece her zaman yeni işlevler alırsınız.

7. Vue Vitrini

Bu, piyasada bulunan ilk PWA çözümlerinden biridir. Aslında, Vue Storefront evrensel, hepsi bir arada bir çözümdür ancak ek bakım kaynakları gerektirir.

PWA Uygulaması Sırasında SEO İle İlgili Hatalardan Nasıl Kaçınılır?

İyileştirilmiş bir kullanıcı deneyimi sağlayarak SEO'da kazanmanıza yardımcı olacak iyi hazırlanmış bir PWA geliştirmek için şunları yapmalısınız:

1. SEO denetimi gerçekleştirin. Bu, SEO ile ilgili tüm sorunları tespit etmeye ve düzeltmeye yardımcı olacaktır.
2. SEO uzmanlarına danışın. PWA'nızı React kullanarak oluşturduğunuzda (örneğin), SEO uzmanlarınız React ve SEO'yu nasıl birleştireceğini tam olarak bilmelidir. Bu şekilde, uygulamadan sonra ortaya çıkabilecek olası sorunların çoğundan kaçınacaksınız.
3. PWA geliştirirken temel SEO ilkelerine bağlı kalın. Google tarafından yayınlanan Progressive Web Apps SEO ile ilgili yazıda şirket, indekslenebilir PWA'ların nasıl oluşturulacağına dair ipuçları veriyor. Bazıları şu şekildedir:
   • Her sayfa belirli bir URL üzerinden erişilebilir olmalıdır. Bu sayede her sayfa bağımsız olarak taranacaktır.
   • Web sitesi duyarlı bir tasarıma sahip olmalı ve mobil cihazlar için optimize edilmelidir.
   • Aşamalı geliştirmeyi kullanın. Bu strateji sayesinde, PWA'lar eski tarayıcılarda bile iyi çalışır.
   • Google Search Console'u kullanarak Google'ın sayfanızı nasıl oluşturduğunu düzenli olarak kontrol edin. Böylece, bir şeyi ne zaman yükseltmenin veya değiştirmenin zamanı geldiğini her zaman bileceksiniz.
   • Sayfa yüklenme süresine dikkat edin. Google, her sayfanın yüklenme hızını ölçer ve sayfanızın yüklenme hızı yavaşlarsa Google onu sıralamada düşürür.

Şunlar da ilginizi çekebilir: React Native vs Flutter vs PWA: Trend Olan Mobil Uygulama Çerçeveleri Savaşı.

Alt çizgi

PWA optimizasyonu, çevrimiçi pazarlama için pek çok fırsat sunar ve işletmelerin büyük çoğunluğuna büyüme getirir. Aslında, PWA tarafından tipik olarak uygulanan en iyi SEO uygulaması, kullanıcı dostu arayüzdür: yanıt verir, yapılandırılmıştır ve hızlı işler. Bununla birlikte, PWA'lar hala SEO'ya doğrudan bir avantaj sağlamamaktadır ve SEO ile ilgili sorunlar, birçok tüccarın PWA'yı web sitelerine uygulamasını engelleyen şeydir. Bu nedenle dikkatli olmak ve dinamik işleme, SSR ve CSR kombinasyonu veya kullanıma hazır PWA çözümleri gibi farklı teknikler kullanmak önemlidir. SEO uzmanlarını da en başından sürece dahil etmelisiniz.

Gördüğünüz gibi, başarılı bir şekilde birleştirerek hem SEO hem de PWA'dan yararlanabilirsiniz. Ayrıca, PWA'nın genç, yenilikçi bir yazılım türü olduğu ve bu nedenle iyileştirmeler beklendiği belirtilmelidir.

 Bu makale Ivan Jones tarafından yazılmıştır. Ivan, Clockwise.Software'de sektörde 5 yıldan fazla deneyime sahip bir SEO uzmanıdır. Yıllardır web sitelerini Google arama sonuçlarında üst sıralarda tutmasına yardımcı olan nüansları biliyor. Hevesli bir öğrenci olarak, SEO sonuçlarına fayda sağlayabilecek yeni yaklaşımları test etmeye heveslidir.