9 Kasım 2016, Çarşamba
Progressive Web Apps
(PWA’lar), mobil sitelerin ve yerel uygulamaların en iyi özelliklerini kullanıcılara sunmak için yeni teknolojilerden yararlanıyor ve web dünyasındaki en heyecan verici yeni fikirlerden birini oluşturuyorlar. Ancak gerçek bir etki yaratabilmeleri için indekslenebilir ve bağlantı verilebilir olmaları kritik önem taşıyor. Bu makalede sunulan her öneri, bir PWA veya basit bir statik web sitesi oluşturuyor olmanız fark etmeksizin, indekslenebilirlik için mevcut en iyi uygulamalardır. Yine de, size rehberlik etmesi adına bu en iyi uygulamaları bir kontrol listesinde derledik:
İçeriğinizi Taranabilir Hale Getirin
Neden? Geçmişte web siteleri, içeriğinizin doğrudan bağlantı verilebilir olmasını sağlamanın en basit yolu olan HTML’lerini her zaman sunucuda oluşturur veya işlerdi. Web uygulamaları, kullanıcı sayfalar arasında gezinirken sayfanın yeniden yüklenmesine gerek kalmadan içeriğin dinamik olarak güncellendiği istemci tarafı işleme (client-side rendering) kavramını popüler hale getirdi.
Modern yaklaşım, bir kullanıcı doğrudan bir URL’ye gittiğinde sunucu tarafı işlemenin (server-side rendering), ilk sayfa yüklemesinden sonraki gezinmeler ve asenkron istekler için ise istemci tarafı işlemenin kullanıldığı hibrit işlemedir.
Sunucu tarafı PWA örneğimiz saf sunucu tarafı işlemeyi gösterirken, hibrit PWA örneğimiz birleşik yaklaşımı sergilemektedir.
Sunucu tarafı ve istemci tarafı işleme terminolojisine aşina değilseniz, istemci ve sunucu tarafı işleme ile react ve node.js’de sunucu tarafı işleme hakkındaki bu makalelere göz atın.
En iyi uygulamalar:
Kullanıcıların içeriği web isteklerinin ilk yüklemesinde alabilmeleri için sunucu tarafı veya hibrit işleme kullanın.
URL’lerinizin bağımsız olarak erişilebilir olduğundan her zaman emin olun:
Yukarıdakiler, ilgili kaynağa doğrudan bağlantı (deep link) vermelidir.
Progressive Web App’iniz için sunucu tarafı veya hibrit işlemeyi destekleyemiyorsanız ve istemci tarafı işlemeyi kullanmaya karar verirseniz, içeriğinizin Arama tarayıcımız için başarıyla işlendiğini doğrulamak amacıyla Google Search Console “Google gibi getir” aracını kullanmanızı öneririz.
Doğrudan bağlantılara erişen kullanıcıları web uygulamanızın ana sayfasına yönlendirmeyin.
Ayrıca, doğrudan bağlantı vermek yerine kullanıcılara hata sayfası sunmaktan da kaçınılmalıdır.
Temiz URL’ler Sağlayın
Neden? Parça tanımlayıcıları (#user/24601/ veya #!user/24601/), tarayıcıların sayfayı yeniden yüklemeden sunucudan yeni içerik AJAX ile çekmesi için etkili bir geçici çözümdü. Bu tasarım, istemci tarafı işleme olarak bilinir.
Ancak parça tanımlayıcı sözdizimi, Facebook’un Open Graph protokolü gibi bazı web araçları, çerçeveleri ve protokolleriyle uyumlu değildir.
History API, kaynakları asenkron olarak çekerken ve dolayısıyla sayfa yeniden yüklemelerinden kaçınırken URL’yi parça tanımlayıcıları olmadan güncellememize olanak tanır; bu her iki dünyanın da en iyi yanlarını sunar. AJAX tarama şeması (#! / escaped-fragment URL’leri ile) zamanında mantıklıydı ancak artık önerilmemektedir.
Hibrit PWA ve istemci tarafı PWA örneklerimiz History API’yi göstermektedir.
En iyi uygulamalar:
Parça tanımlayıcıları (# veya #!) içermeyen temiz URL’ler sağlayın, örneğin:
İstemci tarafı veya hibrit işleme kullanıyorsanız, History API ile tarayıcı gezinmesini desteklediğinizden emin olun.
Kaçının:
Benzersiz URL’ler oluşturmak için #! URL yapısını kullanmak önerilmez:
History API’nin ortaya çıkışından önce bir geçici çözüm olarak tanıtılmıştır. Tamamen # olan URL yapısından ayrı bir model olarak kabul edilir.
! sembolü eşlik etmeden # URL yapısını kullanmak desteklenmez:
https://www.example.com/#product/25/
Bu URL yapısı web’de zaten mevcut olan bir kavramdır ve belirli bir sayfadaki içeriğe doğrudan bağlantı vermekle ilgilidir.
Canonical URL’leri Belirtin
Neden? Aynı içerik birden fazla URL altında (aynı veya farklı alan adlarında) mevcut olduğunda indeksleme karmaşasını ortadan kaldırmanın en iyi yolu, bir sayfayı canonical (standart) olarak işaretlemek ve bu içeriği kopyalayan diğer tüm sayfaların ona referans vermesini sağlamaktır.
En iyi uygulamalar:
Belirli bir içeriği yansıtan tüm sayfalara şu etiketi ekleyin:
Accelerated Mobile Pages (AMP) destekliyorsanız, onun karşılığı olan rel="amphtml" talimatını da doğru şekilde kullandığınızdan emin olun.
Kaçının:
Birden fazla URL’de kısıtlı içerik oluşturmaktan ve rel="canonical" bağlantı öğesini kullanmamaktan kaçının.
Örneğin, rel="canonical" bağlantı öğesi, izleme parametrelerine sahip URL’ler için belirsizliği azaltabilir.
Sayfalarınız arasında çelişkili canonical referansları oluşturmaktan kaçının.
Birden Fazla Cihaz İçin Tasarlayın
Neden? Tüm kullanıcılarınızın, cihazları ne olursa olsun web sitenizi görüntülerken mümkün olan en iyi deneyimi yaşaması önemlidir.
Sitenizi duyarlı (responsive) tasarıma sahip hale getirin; yazı tipleri, kenar boşlukları, dolgular, düğmeler ve sitenizin genel tasarımı ekran çözünürlüklerine ve cihaz görünüm alanlarına göre dinamik olarak ölçeklenmelidir.
Masaüstü veya tablet cihazlar için büyütülen küçük görseller kötü bir deneyim sunar. Tersine, çok yüksek çözünürlüklü görseller cep telefonlarında indirilmesi uzun sürer ve mobil kaydırma performansını etkileyebilir.
PWA’lar için UX hakkında daha fazla bilgi edinin.
En iyi uygulamalar:
Cihazın ekranının görüntüleyebileceğinden daha büyük görselleri indirmekten kaçınmak için farklı yoğunluktaki ekranlar için farklı çözünürlükte görseller getiren srcset özniteliğini kullanın.
Metninizin cihaz boyutu ne olursa olsun okunaklı olduğundan emin olmak için yazı tipi boyutunuzu ve satır yüksekliğinizi ölçeklendirin. Benzer şekilde, öğelerin dolgularının ve kenar boşluklarının da makul şekilde ölçeklendiğinden emin olun.
Chrome Geliştirici Araçları’nın 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ı cihazlar için değiştirmek amacıyla yönlendirmeler veya kullanıcı aracısı algılama (diğer adıyla tarayıcı koklama veya dinamik sunum) kullanıyorsanız, içeriğin kendisinin 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 “Google gibi getir” aracını kullanın.
Kullanılabilirlik nedenleriyle sabit boyutlu yazı tipleri kullanmaktan kaçının.
Yinelemeli Olarak Geliştirin
Neden? Bir web uygulamasına özellik eklerken izlenebilecek en güvenli yollardan biri, değişiklikleri yinelemeli (iteratif) olarak yapmaktır. Özellikleri tek tek eklerseniz, her bir değişikliğin etkisini gözlemleyebilirsiniz.
Alternatif olarak, birçok geliştirici Progressive Web App’lerini mobil sitelerini tek seferde elden geçirmek için bir fırsat olarak görmeyi tercih eder; yeni web uygulamasını izole bir ortamda geliştirip hazır olduğunda mevcut mobil siteleriyle değiştirirler.
Özellikleri yinelemeli olarak geliştirirken, değişiklikleri ayrı parçalara bölmeye çalışın. Örneğin, sunucu tarafı işlemeden hibrit işlemeye geçmeyi düşünüyorsanız, bunu diğer özelliklerle birleştirmek yerine tek bir yineleme olarak ele alın.
Her iki yaklaşımın da kendi artıları ve eksileri vardır. Yineleme yapmak, geçiş sürekli olduğu için arama indekslenebilirliği ile uğraşmanın karmaşıklığını azaltır. Ancak yineleme yapmak, geliştirme süreci sıfırdan başlamıyorsa daha yavaş bir geliştirme sürecine ve potansiyel olarak daha az yenilikçi bir revizyona yol açabilir.
Her iki durumda da, dikkat etmeniz gereken en hassas alanlar canonical URL’leriniz ve sitenizin robots.txt yapılandırmasıdır.
En iyi uygulamalar:
Yeni özellikleri parça parça ekleyerek web sitenizi kademeli olarak geliştirin.
Örneğin, henüz HTTPS’yi desteklemiyorsanız, güvenli bir siteye geçiş yaparak başlayın.
Kaçının:
Progressive Web App’inizi izole bir ortamda geliştirdiyseniz, rel-canonical bağlantılarının ve robots.txt’nin uygun şekilde ayarlandığını kontrol etmeden yayına almaktan kaçının.
Rel-canonical bağlantılarınızın gerçek siteye işaret ettiğinden ve robots.txt yapılandırmanızın tarayıcıların yeni sitenizi taramasına izin verdiğinden emin olun.
Yayından önce geliştirme aşamasındaki sitenizi tarayıcıların indekslemesini engellemek mantıklıdır, ancak yayına girdiğinizde tarayıcıların yeni sitenize erişim engelini kaldırmayı unutmayın.
Kademeli İyileştirme (Progressive Enhancement) Kullanın
Neden? Mümkün olan her yerde, tarayıcı özelliklerini kullanmadan önce algılamak önemlidir. Özellik algılama, belirli bir özelliği desteklediğine inandığınız tarayıcıları test etmekten daha iyidir.
Geçmişte yaygın olan kötü bir uygulama, kullanıcının hangi tarayıcıya sahip olduğunu test ederek özellikleri etkinleştirmek veya devre dışı bırakmaktı. Ancak tarayıcılar özelliklerle sürekli geliştiğinden, bu teknik kesinlikle önerilmez.
Service Worker nispeten yeni bir teknolojidir ve ilerleme uğruna uyumluluğu bozmamak önemlidir; bu, kademeli iyileştirmenin ne zaman kullanılacağına dair mükemmel bir örnektir.
En iyi uygulamalar:
Bir Service Worker kaydetmeden önce API’sinin kullanılabilirliğini kontrol edin:
Web sitenizin tüm özellikleri için API başına algılama yöntemini kullanın.
Web uygulamanızdaki özellikleri etkinleştirmek veya devre dışı bırakmak için asla tarayıcının kullanıcı aracısını (user agent) kullanmayın. Her zaman özelliğin API’sinin mevcut olup olmadığını kontrol edin ve mevcut değilse zarif bir şekilde düşürün (graceful degradation).
Sitenizi birden fazla tarayıcıda test etmeden güncellemekten veya yayına almaktan kaçının! Kullanıcı tabanınız arasında hangi tarayıcıların en popüler olduğunu öğrenmek için site analizlerinizi kontrol edin.
Search Console ile Test Edin
Neden? Google Arama’nın sitenizin içeriğini nasıl gördüğünü anlamak önemlidir. Search Console‘u kullanarak sitenizden tekil URL’ler getirebilir ve “Tarama > Google gibi getir” özelliğini kullanarak Google Arama’nın bunları nasıl gördüğünü görebilirsiniz. Search Console, bu seçenek belirlendiğinde JavaScript’inizi işleyecek ve sayfayı oluşturacaktır; aksi takdirde yalnızca ham HTML yanıtı gösterilir.
Google Search Console ayrıca sayfanızdaki içeriği, Yapılandırılmış Veri, Zengin Kartlar, Site Bağlantıları ve Accelerated Mobile Pages varlığını algılamak dahil olmak üzere çeşitli şekillerde analiz eder.
En iyi uygulamalar:
Search Console’u kullanarak sitenizi izleyin ve Google gibi getir dahil olmak üzere özelliklerini keşfedin.
Search Console Tarama > Site Haritaları aracılığıyla bir site haritası sağlayın. Bu, Google Arama’nın sitenizin tüm sayfalarından haberdar olmasını sağlamanın etkili bir yolu olabilir.
Schema.org yapılandırılmış verileriyle açıklama ekleyin
Neden? Schema.org yapılandırılmış verileri, sayfanızın en önemli kısımlarını makine tarafından işlenebilir veriler olarak özetlemek için esnek bir sözlüktür. Bu, bir sayfanın NewsArticle olduğunu söylemek kadar genel veya turneye çıkan bir grup için konum, grup adı, mekan ve bilet satıcısını detaylandırmak ya da bir tarif için malzemeleri ve adımları özetlemek kadar spesifik olabilir.
Bu meta verilerin kullanımı web uygulamanızdaki her sayfa için mantıklı olmayabilir ancak mantıklı olduğu yerlerde önerilir. Google, sayfa oluşturulduktan sonra bunu ayıklar.
NewsArticle, Recipe ve Product dahil olmak üzere çeşitli veri türleri mevcuttur. Ayrıca tüm desteklenen veri türlerini buradan keşfedebilirsiniz.
En iyi uygulamalar:
Google’ın Yapılandırılmış Veri Test Aracı‘nı kullanarak Schema.org meta verilerinizin doğru olduğunu doğrulayın.
Sağladığınız verilerin göründüğünü ve herhangi bir hata olmadığını kontrol edin.
Sayfanızın gerçek içeriğiyle eşleşmeyen bir veri türü kullanmaktan kaçının. Örneğin, sattığınız bir tişört için Recipe kullanmayın; bunun yerine Product kullanın.
Open Graph ve Twitter Cards ile açıklama ekleyin
Neden? Schema.org meta verilerine ek olarak, Facebook’un Open Graph protokolü ve Twitter zengin kartları için destek eklemek de yardımcı olabilir.
Bu meta veri formatları, içeriğiniz ilgili sosyal ağlarda paylaşıldığında kullanıcı deneyimini iyileştirir.
Mevcut siteniz veya web uygulamanız bu formatları kullanıyorsa, optimum virallik için bunların Progressive Web App’inize de dahil edildiğinden emin olmanız önemlidir.
En iyi uygulamalar:
Open Graph işaretlemenizi Facebook Nesne Hata Ayıklama Aracı ile test edin.
Twitter’ın meta veri formatı hakkında bilgi edinin.
Mevcut siteniz destekliyorsa bu formatları dahil etmeyi unutmayın.
Birden Fazla Tarayıcı ile Test Edin
Neden? Kullanıcı perspektifinden bakıldığında, bir web sitesinin tüm tarayıcılarda aynı şekilde davranması önemlidir. Deneyim farklı ekran boyutlarına göre uyarlanabilse de, hepimiz bir mobil sitenin iPhone veya Android cep telefonu olsun, benzer boyuttaki cihazlarda aynı şekilde çalışmasını bekleriz.
Web, dünya genelinde kullanılan tarayıcı sayısı nedeniyle parçalanmış olarak algılanabilse de, bu çeşitlilik ve rekabet, web’i bu kadar yenilikçi bir platform yapan şeyin bir parçasıdır. Neyse ki, web standartları hiç olmadığı kadar olgunlaşmıştır ve modern araçlar, geliştiricilerin zengin, tarayıcılar arası uyumlu web sitelerini güvenle oluşturmalarını sağlar.
En iyi uygulamalar:
PWA’nızın tarayıcılar arası 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? Bir web sitesi kullanıcı için ne kadar hızlı yüklenirse, kullanıcı deneyimi o kadar iyi olur. Sayfa hızı için optimizasyon web geliştirmede zaten iyi bilinen bir odak noktasıdır, ancak bazen bir sitenin yeni bir sürümünü geliştirirken gerekli optimizasyonlar yüksek öncelikli olarak görülmez.
Bir Progressive Web App geliştirirken, en iyi sonuçlar için siteyi yayına almadan önce sayfa yükleme hızınızın performansını ölçmenizi ve optimize etmenizi öneririz.
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ırmalar tüketicilerin %40’ının yüklenmesi üç saniyeden uzun süren bir sayfayı terk ettiğini göstermiştir.
Web sayfası performansı önerilerimiz ve kritik oluşturma yolu (critical rendering path) hakkında buradan daha fazla bilgi edinin.
Optimizasyonu yayına alma sonrası bir adım olarak bırakmaktan kaçının. Web sitenizin içeriği yeni bir Progressive Web App’e geçmeden önce hızlı yükleniyorsa, optimizasyonlarınızda gerileme yapmamak önemlidir.
Yukarıdaki kontrol listesinin faydalı olacağını ve Progressive Web App’lerinizi indekslenebilirliği göz önünde bulundurarak geliştirmenize yardımcı olacak doğru rehberliği sağlayacağını umuyoruz.
Başlarken, sunucu tarafı, istemci tarafı ve hibrit işlemeyi gösteren Progressive Web App indekslenebilirlik örneklerimize göz atmayı unutmayın. Her zaman olduğu gibi, herhangi bir sorunuz olursa lütfen Web Yöneticisi Forumlarımızdan bize ulaşın.
Biz bunu nasıl uyguluyoruz
We archive Search Central announcements because client questions often trace back to a change that was announced years ago. Reading the original is faster than reconstructing it from second-hand summaries.
İlgili hizmetler