Oncelikle şunu belirtmeliyiz ki PWA ’in teknik olarak SEO acısından bir iyileştirme olduğunu veya bir sıralama faktoru olduğunu soyleyemeyiz. Aksine JavaScript teknolojisi icerdiğinden PWA uygulamasının SEO bakış acısı ile zorlukları bulunmaktadır. John Mueller ’in PWA ile ilgili acıklaması icin bu yazıya goz atabilirsiniz.
Ancak kullanıcı deneyimi ve donuşum tarafında artılarının olması, dolaylı yoldan SEO icin de iyileştirmeler sunmaktadır. Ozellikle hız konusunda etkili bir calışma yapılabilirse ve sayfalar kullanıcıya hızlı bir şekilde sunulabilirse Google arama sonuclarında dolaylı yoldan etkisini gorebiliriz. Ancak en kritik konu yani crawl edilebilme ve indexlenebilme konusunda problem yaşamamamız gerekiyor. JS ’e dayalı bir PWA web sitesinde en buyuk problem bu olacaktır.
Oncelikle kısaca PWA teknolojisinin ne olduğuna ve bileşenlerine bakalım. Daha sonra Google tarafında nelerin problem olduğuna ve bunlardan nasıl kacınabileceğimize dair onerilerimizi sunacağız.
2- PWA Nedir?
PWA yani Progressive Web Apps, guvenli bir ortamda web kullanıcılarının hem uygulama hem de web işlevlerini en iyi şekilde bir araya getirmelerine olanak tanıyan, yerel uygulama benzeri bir deneyim sunan ve gelişmiş teknolojileri barındıran bir web uygulamasıdır.
Uygulama gibidir cunku; indirilebilir, uyarı ve bildirim gonderebilir ve internet bağlantısından bağımsız calıştırılabilir. Uygulama gibi değildir cunku; responsive yapıda olup farklı cihazlarda calışabilir, arama motorları tarafından iceriklerine ulaşılabilir ve arama sonuclarında sunulabilir.
3- Neden PWA Teknolojisine İhtiyac Duyuluyor?
Hızlı: PWA teknolojisi doğru uygulandığında hem ilk kullanıcı icin hem de tekrar gelen kullanıcı icin oldukca hızlı bir deneyim olanağı sunabiliyor. Bağlantıdan Bağımsız: İnternetin az cektiği veya hic olmadığı durumlarda dahi cache teknolojisi ile sitede gezinmeye ve kullanıcının site icerisinde iceriklere ulaşmasına olanak tanıyabiliyor. Donuşum: Ana ekrana indirilebilmesi ve bildirim gonderebilmesi ile kullanıcı etkileşimini artırıp donuşum oranına olumlu etki edebiliyor. 4- PWA Nasıl Calışır? Bileşenleri Nelerdir?
PWA bileşenlerini ve calışma mantığını ozetleyecek olursak;
4.1- HTTPS : PWA icin olmazsa olmaz bileşenlerden birisi HTTPS ’tir. Google dokumanlarında da acıkca HTTPS kullanımının zorunluluğu belirtiliyor.
PWA testinden gecebilmek icin cağrılan kaynakların da HTTPS URL ’lerden servis edilmesi gerekiyor. İmaj, script veya CSS dosyalarının da HTTPS olduğundan emin olmalıyız ki mixed content problemi ile karşılaşmayalım.
4.2- Web App Manifest
Web App Manifest, tarayıcıya web uygulamanız hakkında bilgi veren ve kullanıcının mobil cihazında veya masaustunde 'yuklendiğinde' nasıl davranması gerektiğini soyleyen basit bir JSON dosyasıdır. PWA ’in olmazsa olmaz bileşenlerinden birisidir. Ozetle ana ekrana ekle ozelliği icin bulundurmanız gereklidir. Ornek bir manifest dosya koduna bakacak olursak;
Burada dikkat edilmesi gereken bir kac başlık var, aşağıda maddelendiriyoruz:
Ana ekrana eklenecek olan ikon icin birden fazla boyutta imaj eklenmeli ki tarayıcı cihaza gore doğru boyutta olanı indirebilmeli. Yukarıdaki ornekte gorebilirsiniz. Bu ikon, PWA sitemiz ana ekrana uygulama gibi indirildiğinde kullanılacak olan ikondur. Manifest.json dosyası link olarak sayfaların HTML kodunda aşağıdaki gibi yer almalı.
Name, icon ve start_URL manifest dosyasında mutlaka tanımlanmalı. Chrome ve android cihazlar bu manifestoyu destekliyorlar ve okuyabiliyorlar ancak iOS cihazlar bu JSON dosyasını kısmi bir şekilde desteklemektedir. Icon ve theme color kısmını iOS cihazlar desteklememektedir. Dolayısıyla iOS kullanıcıları icin HTML koda bu kısımları tanımlamanız gerekiyor. Ornek olarak aşağıdaki kodu inceleyebilirsiniz.
Bu kod da aynı şekilde PWA olan tum sayfaların HTML ’i icinde bulunmalı ki iOS cihazlarda icon ve theme color sekmelerinde problem yaşamayalım.
Tum bunları uyguladıktan sonra, Chrome DevTools uzerinde Application altında manifest dosyamızda tanımladığımız bileşenleri gorebiliyor olmalıyız.
Ana ekrana ekle ozelliğini henuz tanımlamadık. Bunun icin Google ’ın detaylı rehberine bakmakta fayda var.
4.3- Service Workers
PWA teknolojisinin en onemli bileşeni service workers ’tır. Offline servis edebilmeyi, bildirim gondermeyi ve cache teknolojisini bu yapı sayesinde elde ediyoruz. Dolayısıyla PWA bir uygulamayı duzgun kurgulamak istiyorsak service workers ’a ihtiyacımız var.
Service workers dediğimiz aslında bir JavaScript dosyasıdır. Fakat bu JavaScript dosyası diğer JavaScript dosyalarımız gibi calışmaz.
Arka planda gelen istekleri değerlendiren ve main thread icinde calışmayan ayrı bir JS dosyası gibi duşunebiliriz. Bu dosya kullanıcının tarayıcısına yerleşir ve orada calışmaya devam eder.
Bu JS dosyası root domain ’e kurulduğunda tum siteyi etkilerken, subfolder altında yer aldığında ise yalnızca ilgili subfolder icin calışır.
İki adımlı bir dongusu bulunuyor duzgun calışması icin:
Var olan diğer JS dosyalarından birisinin icerisinde kayıt edilmesi ve yerinin gosterilmesi icin gerekli kodları oluşturmak (register) Bu işlemi duzgun yaptığınızda Chrome DevTools uzerinde JS dosyanızı gorebilmelisiniz.
Console kısmında;
Application kısmında;
İkinci adımda da service workers JS dosyası, PWA icin onerilen şekilde oluşturulduğunda artık dongu tamamlanmış oluyor. Yani sw.js dosyasının icinde hangi URL ’leri cachelemek istediğinizi, hangi statik dosyaları sunucu isteğine gerek kalmadan service workers uzerinden servis edeceğinizi belirlemelisiniz. Bu sayede internet olmadığında dahi tarayıcı sunucuya gitmeden dosyaları service workers uzerinden alabilecek. Sunucu istekleri ve dosyaların indirilmesinde gecen sureler ortadan kalktığı icin kullanıcılar daha hızlı bir deneyim yaşıyor olacak. Basit bir calışma şemasını aşağıda paylaşıyoruz:
Cache sonrasında ise offline durumda dahi service workers uzerinden dosyalar servis edilebiliyor.
Dolayısıyla service workers her bir guncellemede arka planda calışmaya devam ediyor ve sunucu uzerinden verileri alarak kendisini guncel tutabiliyor. Tarayıcıyı kapatsanız dahi service workers calışmaya devam ediyor.
Bir PWA uygulamasında hangi dosyaların service workers uzerinden geldiğini, hangi dosyaların cachelendiğini gormek icin yine Chrome DevTools ’u kullanabiliriz.
Cache uygulanan dosyalar;
Network uzerinden goruntulemek icinse;
Dolayısıyla PWA teknolojisinin gucunu aldığı en onemli kısım service workers kısmı. Burada onemli olan hangi dosyaları ve hangi URL ’leri bu dosya icerisine alacağımız.
Her kaynağı bu dosya icerisine koyamayız. Sonucta tarayıcı uzerinde bir yer kaplıyor olacaklar. Oldukca fazla URL ’imiz olduğunda bunların tumunu de hafızada tutmaya gerek olmayacaktır. Dolayısıyla service workers icerisinde hangi sayfalarımızı bulundurmamız gerektiğini onden tespit etmeliyiz. Diğer sayfalar icinse JavaScript kodları ile sayfa ziyaret edildikten sonra cache ozelliğini calıştır gibi komutlar kullanabiliriz (Dynamic cache for PWA) Bu sayede tek seferde tum verileri indirmeyecektir. Kullanıcı eğer o sayfayı ziyaret ederse bir sonraki girişinde bu sayfanın belirli bileşenlerini service workers uzerinden cağıracaktır.
Dolayısıyla ana ekranı şekillendiren statik CSS dosyaları, menu, navigasyon elementleri, statik JS dosyaları, font dosyaları cache ’e alınabilir.
5-Peki PWA ’in SEO Bakış Acısında Yarattığı Problemler Nedir?
JavaScript hala arama motorları icin buyuk bir sorun. Hem kaynak olarak hem de para olarak oldukca ağır bir yuku var arama motorları tarafında. Google her ne kadar render edebildiğini ve anlayabildiğini soylese de, iki aşamalı render sistemi sebebiyle JavaScript dosyalarını uzun surede değerlendirebiliyor ve indexe almada problem yaşayabiliyor.
Bu iki aşamalı sistemi cok kısa ozetleyecek olursak; Google icin statik HTML ’i okumak ve indekse almak oldukca kolay. Bunu ilk aşamada tamamlayabiliyor. Ancak JavaScript dosyası ile karşılaştığında bu dosyaları ayrı olarak cozumleyip ikinci dalgada indeksine dahil edebiliyor. Hatta bu dosyalar icin daha sonra bile gelebiliyor. İc linklerin ve meta etiketlerinin JS dosyaları tarafından oluşturulduğunu duşunun. Google ilk geldiğinde bunların hic birini gormeyebilir ve indeksine almayabilir.
Orneğin Starbucks ’ın PWA sitesini incelediğimizde title tag gibi onemli bir etiketin JS cozumlendikten sonra geldiğini, ham kodda bulunmadığını goruyoruz.
Hatta JavaScript ’i blokladığımızda boş bir sayfa ile karşılaşıyoruz. Yani bu demek oluyor ki Google ilk dalgada sayfamızı boş goruyor. Dolayısıyla JS ’e dayalı bir PWA web sitesi inşa ettiğimizde kritik problemlerle karşılaşabiliriz.
6-Peki SEO Dostu Bir PWA Uygulaması İcin Neler Yapılabilir?
Oncelikle Teknik SEO tarafında JS ile ilgili bir problemimizin bulunmaması gerekiyor. Google ’ın iceriğimizi okuyabildiğinden, onemli etiketlerimizi ve linklerimizi gorebildiğinden ve indeksine alabildiğinden emin olmalıyız.
Bunun icin farklı metotlar mevcut, aşağıda teknolojileri ve onerdiğimiz optimizasyonları detaylandırıyoruz.
6.1- Client Side Rendering
CSR tum JS dosyalarının tarayıcı tarafından cozumlenmesi ve final HTML dediğimiz kod bloğunun tarayıcıda tamamlanması demek. Yani sunucu sadece dosya olarak JS ’i iletiyor ve tarayıcı cozumluyor. Googlebot da aslında en cok bu kısımda problem yaşıyor.
SEO acısından en problemli yontem diyebiliriz. Ancak sunucunun hızlı yanıt verebilmesine olanak tanıyor.
6.2- Server Side Rendering
SSR yontemi ise JS dosyalarının sunucu tarafında calıştırılıp tarayıcıya hazır olarak iletilmesi gibi duşunebiliriz.
Sunucu final HTML dediğimiz dokumanı doğrudan tarayıcıya iletiyor. Dolayısıyla Googlebot da extradan bir işlem yaparak JS dosyalarını okumak durumunda kalmıyor.
Bu sayede Googlebot tum iceriği, linkleri, meta etiketlerini gorebiliyor.
Ancak bu sunucu tarafında bir yoğunluğa yol acıyor. Ayrıca daha pahalı bir yontem olarak karşımıza cıkıyor. Diğer yandan da TTFB (time to first byte) dediğimiz site hızı konusunda onemli bir parametre olan sunucunun yanıt suresini uzatıyor.
6.3- Hybrid Rendering
Bu yontemi ise CSR ve SSR ’ın birlikte kullanımı gibi duşunebiliriz. Bir kısım dosya pre-rendered bicimde sunucu tarafından tarayıcıya iletilirken, bir kısım dosya ise doğrudan iletiliyor ve tarayıcı tarafından cozumleniyor.
PWA icin en yaygın kullanılan yontemi menu gibi statik ve kolay değişmeyen kısımları pre-render ile onden gonderip, icerik gibi kısımları ise tarayıcı tarafında cozumlenecek şekilde render etmeden iletmek.
6.4- Dynamic Rendering
Google ’ın en cok onerdiği bu son yontemse isteği kimin yaptığına gore değişen bir render surecine sahip. İstek kullanıcıdan geliyorsa tum dosyalar kullanıcı tarafında cozumlenebilir, yani CSR uygulanabilir. İstek arama motorundan geliyorsa JS dosyaları sunucu tarafında cozumlenmiş ve final HTML gonderilecek şekilde SSR uygulamasına tabi tutulabilir. Yani arama motorlarına hazır iceriği sunuyorken, kullanıcı tarafında sunucuda yoğunluk yaşatmamak adına CSR tekniğinden faydalanabiliriz.
Ozetle SSR kullanıcı icin (dolaylı yoldan Google icin) daha iyiyken CSR sunucu icin daha iyi bir yontem.
Her ne kadar CSR daha hızlı olabilme potansiyeline sahip olsa da, doğru uygulanan bir SSR CSR ’dan daha hızlı olabilir.
Aynı zamanda CSR ’dan SSR ’a gecen websitelerinde indekslenme ile ilgili daha olumlu sonuclar ile karşılaşılabiliyor.
Dolayısıyla Dynamic Rendering taranma ve indekslenme konularında daha garanti duruyor. Ancak dynamic rendering kullanmadan da sayfalarımızı taranabilir ve indekslenebilir yapabiliriz.
7-Ozetlersek...
JavaScript kullanan websitesinin SEO tarafında muhakkak dikkat etmesi gereken maddeler aşağıdaki gibidir:
Her bir sayfanın spesifik URL ’i bulunmalıdır. # gibi fragmantlar ile oluşmamalıdır. Tum meta etiketlerin, linklerin ve iceriğin Google tarafından ilk dalgada okunabilir durumda olması taranabilirliği ve indekslenebilirliği olumlu yonde etkiler. Vue.js, React ve Angular gibi teknolojilerin SSR kılavuzlarına goz atılabilir. SSR mumkun değilse, Puppeteer veya onun gibi pre-render hizmetlerinin kullanılabileceği dynamic rendering yontemi on plana cıkıyor. React, Angular veya Vue kullanmadan da PWA site oluşturabilirsiniz. Her bir sayfanın canonical etiketinin olduğuna ve kaynak kodda bulunduğuna emin olmalıyız. PWA icin responsive yapı olması gerekiyor. Dolayısıyla site responsive yapıda servis edilmelidir. Sayfa URL ’leri ve kaynaklar HTTPS uzerinden servis edilmelidir. Sayfalar hızlı yuklenmelidir. Google Time to Interactive (TTI) değerinin 3G icin 10 saniyenin altında olmasını onermektedir. Diğer yandan Googlebot bir sayfayı render edip ekran goruntusunu almak icin 5 saniye kadar beklemektedir. Dolayısıyla bu sure icerisinde render edebildiğinden emin olmak oldukca onemlidir. 8- PWA ve Google Analytics
Her şey guzel ancak offline olduğunda kullanıcıyı nasıl takip edebileceğiz ve olcumlemeyi nasıl doğru yapacağız soruları akıllara geliyor.
Bunun icin IndexedDB yardıma koşuyor. Mozilla ’nın rehberinde IndexedDB şoyle tanımlanıyor:
‘Dosyaların kullanıcı tarayıcısında depolanmasını sağlayan duşuk seviyeli bir API ’dır. DOM depolaması kucuk boyutlarda etkili iken buyuk boyutlardaki dosyaları ve yapısal verileri depolamada yeterli değildir. IndexedDB bu yetersizliğe karşı etkili bir cozumdur. ’
Yani offline durumda event olarak tanımlanan ve olcumlemede kullanılacak kullanıcı metrikleri, IndexedDB vasıtasıyla kayıt ediliyor ve tekrar online olma durumunda bu veriler Analytics ’e aktarılıyor. Ta ta!
Eğer Google ’ın onerdiği Workbox JavaScript kutuphanesini kullanırsanız hazır moduller ile bunu kolay bir şekilde aktif hale getirebilirsiniz. Nasıl yapılacağına dair Google ’ın hazırladığı videoya goz atabilirsiniz. Data da detaylı bir blog yazısı icin sizi şoyle alalım.
9-PWA Testi
Tum optimizasyonlar yapıldığında PWA sitemizi test etmek icin Chrome uzerinden DevTools aracını kullanabiliriz.
Audits altında Progressive Web App ’i tıklayarak denetim başlatabiliriz.
Test sonucunda nerelerde hata aldığımızı gorerek buna uygun optimizasyonlarla PWA sitemizi optimize edebiliriz.
Serinin bir onceki yazısı Hızlandırılmış mobil sayfalar (AMP) Nedir? iceriğini okumadıysanız ona da goz atmanıza fayda var!
Kaynaklar:
https://www.youtube.com/playlist?lis...moi5Q2pzDusSL7
https://www.christianoliveira.com/bl..._Web_Apps_work
https://es.slideshare.net/MariaCiela...d-pwa-98068577
https://www.aleydasolis.com/en/searc...mize-for-them/
kaynak: https://zeo.org/tr/blog/pwa-ve-seo-k...i-pwa-rehberi/