9 Kasım 2016, Çarşamba
Progresif Web Uygulamaları (PWA'lar), kullanıcılara en iyi mobil siteleri ve yerel uygulamaları sunmak için yeni teknolojilerden yararlanmaktadır. Bu uygulamalar şu anda web ortamındaki en heyecan verici fikirlerden biridir. Ancak gerçek bir etki yaratabilmeleri için hem dizine eklenebilir hem de bağlanabilir olmaları önemlidir. Bu makalede sunulan her öneri, progresif web uygulaması veya basit bir statik web sitesi oluşturmanıza bakılmaksızın dizine eklenebilirlik açısından mevcut en iyi uygulamalardan biridir. Bununla birlikte, size yol gösterecek bir yapılacaklar listesi sunmak için en iyi uygulamaları aşağıda bir araya getirdik:
İçeriğinizi Taranabilir Hale Getirin
Neden mi? Önceden web siteleri, HTML'lerini sunucuda oluşturuyordu. Bu, içeriğinizin doğrudan bağlanabilir olmasını sağlamanın en kolay yoluydu. Web uygulamaları ile HTML'lerin istemci tarafında oluşturulması kavramı popüler hale geldi. Bu işlemde kullanıcılar sayfada gezinirken içerik sayfada dinamik olarak güncellenir ve sayfanın yeniden yüklenmesine gerek kalmaz.
Bu konudaki modern yaklaşıma göre her iki yöntem de karma olarak kullanılır. Buna göre kullanıcı doğrudan bir URL'ye gittiğinde sayfa sunucu tarafında oluşturulur ve ilk sayfa yüklendikten sonra gezinme ve eşzamansız istekler için istemci tarafında oluşturma kullanılır.
Sunucu tarafı PWA örneğimiz sunucu tarafı oluşturmayı gösterirken karma PWA örneğimiz ise birleşik yaklaşımı göstermektedir.
Sunucu tarafı ve istemci taraflı oluşturma terminolojisine aşina değilseniz istemci taraflı ve sunucu tarafı oluşturma ile react ve node.js'de sunucu tarafı oluşturma hakkındaki bu makalelere göz atın.
En iyi uygulamalar:
Kullanıcıların web istekleri ilk yüklendiğinde içeriğin alınması için sunucu tarafı oluşturmayı veya karma oluşturmayı kullanın.
Her zaman URL'lerinizin bağımsız olarak erişilebilir olduğundan emin olun:
https://www.example.com/product/25/
Yukarıdaki örnek söz konusu kaynağa derin bağlantı sunmalıdır.
Progresif web uygulamanızda sunucu tarafı veya karma oluşturmayı destekleyemiyorsanız ve istemci taraflı oluşturma kullanmaya karar verirseniz Google Search Console "Google Gibi Getir aracını" kullanarak içeriğinizin Arama tarayıcımız için başarıyla oluşturulduğunu doğrulamanızı öneririz.
Derin bağlantılara erişen kullanıcıları web uygulamanızın ana sayfasına yönlendirmeyin.
Ayrıca kullanıcılara derin bağlantı yerine hata sayfası da gösterilmemelidir.
Taranabilir URL'ler Sağlayın
Neden mi? Parça tanımlayıcılar (#user/24601/ veya #!user/24601/), tarayıcıların
sayfayı yeniden yüklemeden sunucudaki yeni içerikleri AJAX taramasıyla alabilmesini sağlayan etkili bir çözümdü.
Bu tasarım istemci tarafı oluşturma olarak bilinir.
Bununla birlikte, parça tanımlayıcı söz dizimi, Facebook'taki Open Graph Protocol gibi bazı web araçları, çerçeveler ve protokollerle uyumlu değildir.
History API, kaynakları
eşzamansız olarak getirerek sayfaların yeniden yüklenmesini önlemeye devam ederken parça tanımlayıcılar
olmadan URL'yi güncelleyebilmemizi sağlar. Bir taşla iki kuş diyebiliriz. AJAX tarama şeması
(#!/escaped-fragment URL'leriyle) eskiden mantıklı olsa da artık
önerilmez.
Karma PWA ve istemci tarafı PWA örneklerimiz Geçmiş API'sini göstermektedir.
En iyi uygulamalar:
Parça tanımlayıcı (# veya #!) içermeyen aşağıdaki gibi taranabilir URL'ler sağlayın:
https://www.example.com/product/25/
İstemci tarafı veya karma oluşturma kullanıyorsanız Geçmiş API'si ile tarayıcı gezinmesini desteklediğinizden emin olun.
Kaçınılması gerekenler:
Benzersiz URL'leri yönlendirmek için #! URL yapısının kullanılması önerilmez:
https://www.example.com/#!product/25/
Bu kullanım, Geçmiş API'si ortaya çıkmadan önce geçici bir çözüm olarak sunulmuştu. # URL yapısından ayrı bir kalıp olduğu düşünülmektedir.
# URL yapısının yanında ! simgesi olmadan kullanılması
desteklenmez:
https://www.example.com/#ürün/25/
Bu URL yapısı halihazırda web'de kullanılan bir kavramdır ve belli bir sayfadaki içeriğe derin bağlantı yapılması ile ilgilidir.
Standart URL'ler Belirtin
Neden mi? Birden fazla URL'de aynı içerik bulunduğunda (aynı veya farklı alan adında olabilir), dizine ekleme karmaşasını çözmenin en iyi yolu bir sayfayı standart olarak işaretledikten sonra, aynı içeriğin bulunduğu diğer tüm sayfaların bu standart sayfaya yönlendirilmesidir.
En iyi uygulamalar:
Belirli bir içeriği yansıtan tüm sayfalara aşağıdaki etiketi ekleyin:
<link rel="canonical" href="https://www.example.com/your-url/" />
Accelerated Mobile Pages'ı destekliyorsanız eşdeğeri olan rel="amphtml" talimatını da doğru kullandığınızdan
emin olun.
Kaçınılması gerekenler:
İçeriği birden fazla URL'ye kopyalamayın ve rel="canonical" bağlantı öğesini kullanmayı unutmayın.
Örneğin rel="canonical" bağlantı öğesi, izleme parametresine sahip URL'ler için karışıklığı önleyebilir.
Sayfalarınız arasında çakışan standart referanslar oluşturmaktan kaçının.
Farklı Cihaz Türlerine Göre Tasarlayın
Neden mi? Tüm kullanıcılarınızın hangi cihazla olursa olsun web sitenizi görüntülerken en iyi deneyimi yaşaması önemlidir.
Sitenizi duyarlı olarak tasarlayın. Yazı tipleri, kenar boşlukları, dolgular, düğmeler ve sitenizin genel tasarımı, ekran çözünürlüklerine ve cihaz görüntü alanlarına göre dinamik olarak ölçeklenmelidir.
Masaüstü veya tablet cihazlar için ölçeklendirilen küçük resimler kötü deneyim anlamına gelir. Bunun aksine, çok yüksek çözünürlüklü resimlerin cep telefonlarına indirilmesi uzun sürer ve bu da mobil kaydırma performansını etkileyebilir.
PWA'lar için kullanıcı deneyimi hakkında daha fazla bilgi edinin.
En iyi uygulamalar:
Farklı
yoğunluğa sahip ekranlarda farklı
çözünürlükteki resimleri getirerek cihaz ekranının gösterebileceğinden daha büyük resimlerin indirilmesini
önlemek için srcset özelliğini kullanın.
Cihazın boyutu ne olursa olsun metninizin okunabilir olmasını sağlamak için yazı tipi boyutunu ve satır yüksekliğini ölçeklendirin. Benzer şekilde, öğelerin dolgu ve kenar boşluklarının da makul bir şekilde ölçeklendirildiğinden emin olun.
Chrome Geliştirici Araçları'ndaki Cihaz Modu özelliğini ve Mobil Uyumluluk Testi Aracı'nı kullanarak çeşitli ekran çözünürlüklerini test edin.
Kullanıcılara, Google'a gösterdiğinizden farklı içerik göstermeyin. Sitenizin tasarımını farklı cihazlarda değiştirmek için yönlendirmeler veya kullanıcı aracısı algılama (diğer adıyla tarayıcı yoklaması ya da dinamik sunum) kullanıyorsanız içeriğin aynı kalması önemlidir.
Google tarafından getirilen içeriğin, kullanıcının gördüğü içerikle eşleştiğini doğrulamak için Search Console'daki "Google Gibi Getir" aracını kullanın.
Kullanılabilirlik nedeniyle, sabit boyutlu yazı tipleri kullanmaktan kaçının.
Aşamalı Biçimde Geliştirin
Neden mi? Web sayfasına yeni özellikler eklerken izlenebilecek en güvenli yol değişiklikleri aşamalı şekilde yapmaktır. Özellikleri tek tek eklerseniz her bir değişikliğin etkisini gözlemleyebilirsiniz.
Alternatif olarak birçok geliştiriciye göre progresif web uygulaması, mobil sitelerini tek seferde revizyondan geçirmek için bir fırsattır. Bunun için yeni web uygulamasını yalıtılmış bir ortamda geliştirerek hazır olduğunda mevcut mobil siteleri ile değiştirirler.
Özellikleri aşamalı olarak geliştirirken değişiklikleri ayrı parçalara bölmeyi deneyin. Örneğin sunucu tarafı oluşturmadan karma oluşturmaya geçmeyi planlıyorsanız bu değişikliği diğer özelliklerle birlikte yapmak yerine ayrı bir aşamada, tek başına gerçekleştirin.
İki yaklaşımın da kendine ait avantajları ve dezavantajları vardır. Geçiş sürekli olduğu için aşamalı geliştirme sayesinde arama dizinine ekleme daha az karmaşık hale gelir. Ancak aşamalı yöntem, geliştirme sürecini yavaşlatabilir ve geliştirmeye en baştan başlanmadıysa revizyon işleminin daha az yenilik getirme ihtimali vardır.
Her iki durumda da dikkat edilmesi gereken en hassas noktalar standart URL'ler ve sitenizin robots.txt yapılandırmasıdır.
En iyi uygulamalar:
Yeni özellikleri birer birer ekleyerek web sitenizi aşamalı olarak geliştirin.
Örneğin henüz HTTPS desteği yoksa sitenizi daha güvenli bir siteye taşıyarak başlayın.
Kaçınılması gerekenler:
Progresif web uygulamanızı erişime kapalı bir ortamda geliştirdiyseniz rel-canonical bağlantılarının ve robots.txt yapılandırmasının düzgün bir şekilde ayarlandığından emin olmadan uygulamayı kullanıma sunmaktan kaçının.
rel-canonical bağlantılarınızın asıl siteye yönlendirdiğinden ve robots.txt yapılandırmanızın, tarayıcıların yeni sitenizi taramasına izin verdiğinden emin olun.
Tarayıcıların, geliştirmeye devam ettiğiniz sitenizi kullanıma açılmadan önce taramasını önlemek mantıklı bir çözüm olsa da, sitenizi kullanıma açtıktan sonra tarayıcılara izin vermeyi unutmayın.
Progresif Geliştirme Kullanın
Neden mi? Tarayıcı özelliklerinin mümkünse kullanılmadan önce algılanması gerekir. Özellik algılaması ayrıca belirli bir özelliği desteklediğini düşündüğünüz tarayıcılarda test yapmaktan daha iyidir.
Geçmişte yaygın olan hatalı uygulamalardan biri kullanıcının sahip olduğu tarayıcıyı test ederek özellikleri etkinleştirmek veya devre dışı bırakmaktı. Ancak tarayıcılar yeni özelliklerle birlikte sürekli geliştiği için artık bu uygulama çok önerilmiyor.
Hizmet çalışanı nispeten yeni bir teknolojidir ve ilerlemek adına çalışmalar yaparken uyumluluk sorunu yaşanmaması önemlidir. Bu, progresif geliştirmenin ne zaman kullanılacağına dair mükemmel bir örnektir.
En iyi uygulamalar:
Service Worker kaydı yapmadan önce API'sinin kullanılabilir olup olmadığını kontrol edin.
if ('serviceWorker' in navigator) {
...
Web sitenizin tüm özellikleri her API'ye özel algılama yöntemini kullanın.
Web uygulamanızdaki özellikleri etkinleştirmek veya devre dışı bırakmak için hiçbir zaman tarayıcının kullanıcı aracısını kullanmayın. Özelliğin API'sinin kullanılabilir olup olmadığını her zaman kontrol edin ve kullanılabilir değilse kontrollü azalma uygulayın.
Birden fazla tarayıcıda test etmeden uygulamanızı güncellemeyin veya kullanıma sunmayın. Kullanıcı tabanınızda hangi tarayıcıların popüler olduğunu öğrenmek için sitenizin analizine bakın.
Search Console ile Test Edin
Neden mi? Google Arama'nın sitenizin içeriğini nasıl görüntülediği anlaşılmalıdır. Search Console'u kullanarak sitenizden tek tek URL'leri getirebilir ve "Tara > Google Gibi Getir" özelliğiyle Google Arama'nın URL'leri nasıl gördüğünü inceleyebilirsiniz. Search Console, ilgili seçenek işaretlendiğinde sayfanızı oluştururken JavaScript kodlarınızı işler. Aksi halde sadece ham HTML yanıtı gösterir.
Google Search Console, sitenizin içeriğini ayrıca, Yapısal Veriler, Zengin Kartlar, Site Bağlantıları ve Accelerated Mobile Pages özelliklerinin olup olmadığını algılamak dahil çeşitli şekillerde analiz eder.
En iyi uygulamalar:
Search Console'u kullanarak sitenizi izleyin, "Google gibi Getir" özelliğini ve diğer özellikleri keşfedin.
Search Console'da Tara > Site Haritaları menüsünü kullanarak bir Site Haritası sağlayın. Site Haritası, Google Arama'nın sitenizdeki tüm sayfaları fark edebilmesi için etkili bir yöntemdir.
Schema.org'un yapısal verileri ile ek açıklamalar belirtin
Neden mi? Schema.org yapısal veri özelliği, web sitenizin en önemli bölümlerini makine ile işlenebilir veri olarak özetlemeye yarayan esnek bir sözlüktür. Bu, bir sayfanın NewsArticle olduğunu söylemek kadar genel veya turnede olan bir müzik grubunun konumu, grup ismi, konser salonu ve bilet satıcısı gibi bilgilerini vermek ya da bir yemek tarifinin malzemelerini ve adımlarını özetlemek kadar spesifik bir şeklinde karşımıza çıkabilir.
Bu meta veri web uygulamanızın her sayfası için kullanışlı olmayabilir. Ancak mümkün olduğunda kullanılması önerilir. Google, sayfayı oluşturduktan sonra bunu ayıklar.
NewsArticle, Recipe ve Product gibi çeşitli veri türleri
bulunur. Desteklenen tüm veri
türlerini buradan inceleyebilirsiniz.
En iyi uygulamalar:
Google'ın Yapılandırılmış Veri Test Aracı'nı kullanarak Schema.org meta verilerinizin doğru olduğunu onaylayın.
Sağladığınız verilerin göründüğünü ve hata bulunmadığını kontrol edin.
Sayfanızın asıl içeriği ile eşleşmeyen veri tiplerini kullanmaktan kaçının. Örneğin, sattığınız bir tişört
için Recipe değil, Product kullanın.
Open Graph ve Twitter Cards ile ek açıklama belirtin
Neden mi? Schema.org meta verisine ek olarak Facebook’un Open Graph protokolü ve Twitter zengin kartları desteği eklemek de yararlı olabilir.
İçeriğiniz ilgili sosyal ağlarda paylaşıldığında bu meta veri biçimleri kullanıcı deneyimini iyileştirir.
Mevcut siteniz veya web uygulamanız bu biçimleri kullanıyorsa optimum virallik seviyesine ulaşılabilmesi için progresif web uygulamanızda da bu biçimlerin bulunması gerekir.
En iyi uygulamalar:
Open Graph işaretlemenizi Facebook Object Debugger Tool ile test edin.
Twitter'ın meta veri biçimi hakkında bilgi edinin.
Mevcut siteniz destekliyorsa bu biçimleri kullanmayı unutmayın.
Birden Fazla Tarayıcı ile Test Edin
Neden mi? Kullanıcılar için bir web sitesinin tüm tarayıcılarda aynı şekilde davranması kesinlikle çok önemlidir. Farklı ekran boyutlarına uyum sağlasak da mobil bir sitenin iPhone veya Android olmasına bakılmaksızın benzer boyutlara sahip tüm cihazlarda aynı performansı göstermesini bekleriz.
Tüm dünyada kullanılan web tarayıcılarının sayısına bakıldığında, web'in çok parçalı bir yapı olduğu düşünülse de, bu kadar yenilik getiren bir platform olmasının nedeni yine bu çeşitlilik ve rekabettir. Şu anda web standartları hiç olmadığı kadar gelişmiş durumda ve modern araçlar sayesinde geliştiriciler rahat bir şekilde zengin ve farklı tarayıcılarla uyumlu web siteleri geliştirebiliyor.
En iyi uygulamalar:
PWA'nızın farklı tarayıcılar ile uyumlu olduğundan emin olmak için BrowserStack.com, Browserling.com veya BrowserShots.org gibi tarayıcılar arası test araçlarını kullanın.
Sayfa Yükleme Performansını Ölçün
Neden mi? Bir web sitesi ne kadar hızlı yüklenirse kullanıcı deneyimi de o kadar iyi olur. Sayfa hızı optimizasyonu, web geliştirme alanında çok önemli bir kavramdır, ancak bir sitenin yeni bir sürümünü geliştirirken kimi zaman gerekli optimizasyonların yüksek önceliğe sahip olmadığı düşünülmektedir.
Progresif bir web uygulaması geliştirirken sayfa yükleme hızınızın performansını ölçmeniz ve en iyi sonuçları elde etmek için siteyi kullanıma sunmadan önce optimize etmeniz önerilir.
En iyi uygulamalar:
Sitenizin sayfa yükleme performansını ölçmek için Page Speed Insights ve Web Page Test gibi araçları kullanın. Googlebot, oluşturma konusunda biraz daha sabırlı olsa da araştırmalara göre tüketicilerin %40'ı, yüklenmesi üç saniyeden uzun süren bir sayfadan ayrılır.
Web sayfası performansı önerilerimiz ve kritik oluşturma yolu hakkında buradan daha fazla bilgi edinebilirsiniz.
Optimizasyonu siteyi kullanıma sunduktan sonraya bırakmayın. Web sitenizin içeriği yeni bir progresif web uygulamasına taşımadan önce hızlı yükleniyorsa optimizasyonunuzun korunması gerekir.
Umarız yukarıdaki yapılacaklar listesi işinize yaramıştır ve dizine eklenebilirlik bakış açısı ile Progresif Web Uygulamanızı geliştirmeniz konusunda size doğru şekilde yardımcı olmuştur.
Başlarken istemci tarafı, sunucu tarafı ve karma oluşturma konularını gösteren Progresif Web Uygulaması dizine eklenebilirlik örneklerimizi mutlaka kontrol edin. Her zaman olduğu gibi, sorularınız varsa lütfen Web Yöneticisi Forumlarımızdan bize ulaşın.