{"id":24957,"date":"2016-11-09T00:00:00","date_gmt":"2016-11-09T00:00:00","guid":{"rendered":"https:\/\/alienroad.com\/google-bilgi-bankasi\/building-indexable-progressive-web-apps\/"},"modified":"2016-11-09T00:00:00","modified_gmt":"2016-11-09T00:00:00","slug":"building-indexable-progressive-web-apps","status":"publish","type":"ar_kb","link":"https:\/\/alienroad.com\/google-bilgi-bankasi\/building-indexable-progressive-web-apps\/","title":{"rendered":"\u0130ndekslenebilir Progressive Web App'ler Olu\u015fturma"},"content":{"rendered":"

9 Kas\u0131m 2016, \u00c7ar\u015famba<\/p>\n

\n Progressive Web Apps<\/a>
\n (PWA’lar), mobil sitelerin ve yerel uygulamalar\u0131n en iyi \u00f6zelliklerini kullan\u0131c\u0131lara sunmak i\u00e7in yeni teknolojilerden yararlan\u0131yor ve web d\u00fcnyas\u0131ndaki en heyecan verici yeni fikirlerden birini olu\u015fturuyorlar. Ancak ger\u00e7ek bir etki yaratabilmeleri i\u00e7in indekslenebilir ve ba\u011flant\u0131 verilebilir olmalar\u0131 kritik \u00f6nem ta\u015f\u0131yor. Bu makalede sunulan her \u00f6neri, bir PWA veya basit bir statik web sitesi olu\u015fturuyor olman\u0131z fark etmeksizin, indekslenebilirlik i\u00e7in mevcut en iyi uygulamalard\u0131r. Yine de, size rehberlik etmesi ad\u0131na bu en iyi uygulamalar\u0131 bir kontrol listesinde derledik:\n<\/p>\n

<\/p>\n

\u0130\u00e7eri\u011finizi Taranabilir Hale Getirin<\/h2>\n

\n Neden?<\/b> Ge\u00e7mi\u015fte web siteleri, i\u00e7eri\u011finizin do\u011frudan ba\u011flant\u0131 verilebilir olmas\u0131n\u0131 sa\u011flaman\u0131n en basit yolu olan HTML’lerini her zaman sunucuda olu\u015fturur veya i\u015flerdi. Web uygulamalar\u0131, kullan\u0131c\u0131 sayfalar aras\u0131nda gezinirken sayfan\u0131n yeniden y\u00fcklenmesine gerek kalmadan i\u00e7eri\u011fin dinamik olarak g\u00fcncellendi\u011fi istemci taraf\u0131 i\u015fleme (client-side rendering) kavram\u0131n\u0131 pop\u00fcler hale getirdi.\n<\/p>\n

\n Modern yakla\u015f\u0131m, bir kullan\u0131c\u0131 do\u011frudan bir URL’ye gitti\u011finde sunucu taraf\u0131 i\u015flemenin (server-side rendering), ilk sayfa y\u00fcklemesinden sonraki gezinmeler ve asenkron istekler i\u00e7in ise istemci taraf\u0131 i\u015flemenin kullan\u0131ld\u0131\u011f\u0131 hibrit i\u015flemedir.\n<\/p>\n

\n Sunucu taraf\u0131 PWA \u00f6rne\u011fimiz<\/a> saf sunucu taraf\u0131 i\u015flemeyi g\u00f6sterirken, hibrit PWA \u00f6rne\u011fimiz<\/a> birle\u015fik yakla\u015f\u0131m\u0131 sergilemektedir.\n<\/p>\n

\n Sunucu taraf\u0131<\/b> ve istemci taraf\u0131<\/b> i\u015fleme terminolojisine a\u015fina de\u011filseniz, istemci ve sunucu taraf\u0131 i\u015fleme<\/a> ile react ve node.js’de sunucu taraf\u0131 i\u015fleme<\/a> hakk\u0131ndaki bu makalelere g\u00f6z at\u0131n.\n<\/p>\n

\n

En iyi uygulamalar:<\/b><\/p>\n

\n Kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011fi web isteklerinin ilk y\u00fcklemesinde alabilmeleri i\u00e7in sunucu taraf\u0131 veya hibrit i\u015fleme kullan\u0131n.\n <\/p>\n

\n URL’lerinizin ba\u011f\u0131ms\u0131z olarak eri\u015filebilir oldu\u011fundan her zaman emin olun:\n <\/p>\n

<\/div>\n

\n Yukar\u0131dakiler, ilgili kayna\u011fa do\u011frudan ba\u011flant\u0131 (deep link) vermelidir.\n <\/p>\n

\n Progressive Web App’iniz i\u00e7in sunucu taraf\u0131 veya hibrit i\u015flemeyi destekleyemiyorsan\u0131z ve istemci taraf\u0131 i\u015flemeyi kullanmaya karar verirseniz, i\u00e7eri\u011finizin Arama taray\u0131c\u0131m\u0131z i\u00e7in ba\u015far\u0131yla i\u015flendi\u011fini do\u011frulamak amac\u0131yla Google Search Console “Google gibi getir” arac\u0131n\u0131 kullanman\u0131z\u0131 \u00f6neririz.\n <\/p>\n<\/div>\n

\n

\n Do\u011frudan ba\u011flant\u0131lara eri\u015fen kullan\u0131c\u0131lar\u0131 web uygulaman\u0131z\u0131n ana sayfas\u0131na y\u00f6nlendirmeyin.\n <\/p>\n

\n Ayr\u0131ca, do\u011frudan ba\u011flant\u0131 vermek yerine kullan\u0131c\u0131lara hata sayfas\u0131 sunmaktan da ka\u00e7\u0131n\u0131lmal\u0131d\u0131r.\n <\/p>\n<\/div>\n


<\/p>\n

Temiz URL’ler Sa\u011flay\u0131n<\/h2>\n

\n Neden?<\/b> Par\u00e7a tan\u0131mlay\u0131c\u0131lar\u0131 (#user\/24601\/<\/code> veya #!user\/24601\/<\/code>), taray\u0131c\u0131lar\u0131n sayfay\u0131 yeniden y\u00fcklemeden sunucudan yeni i\u00e7erik AJAX ile \u00e7ekmesi i\u00e7in etkili bir ge\u00e7ici \u00e7\u00f6z\u00fcmd\u00fc. Bu tasar\u0131m, istemci taraf\u0131 i\u015fleme olarak bilinir.\n<\/p>\n

\n Ancak par\u00e7a tan\u0131mlay\u0131c\u0131 s\u00f6zdizimi, Facebook’un Open Graph protokol\u00fc<\/a> gibi baz\u0131 web ara\u00e7lar\u0131, \u00e7er\u00e7eveleri ve protokolleriyle uyumlu de\u011fildir.\n<\/p>\n

\n History API<\/a>, kaynaklar\u0131 asenkron olarak \u00e7ekerken ve dolay\u0131s\u0131yla sayfa yeniden y\u00fcklemelerinden ka\u00e7\u0131n\u0131rken URL’yi par\u00e7a tan\u0131mlay\u0131c\u0131lar\u0131 olmadan g\u00fcncellememize olanak tan\u0131r; bu her iki d\u00fcnyan\u0131n da en iyi yanlar\u0131n\u0131 sunar. AJAX tarama \u015femas\u0131 (#!<\/code> \/ escaped-fragment URL’leri ile) zaman\u0131nda mant\u0131kl\u0131yd\u0131 ancak art\u0131k \u00f6nerilmemektedir.\n<\/p>\n

\n Hibrit PWA ve istemci taraf\u0131 PWA \u00f6rneklerimiz<\/a> History API’yi g\u00f6stermektedir.\n<\/p>\n

\n

En iyi uygulamalar:<\/b><\/p>\n

\n Par\u00e7a tan\u0131mlay\u0131c\u0131lar\u0131 (#<\/code> veya #!<\/code>) i\u00e7ermeyen temiz URL’ler sa\u011flay\u0131n, \u00f6rne\u011fin:\n <\/p>\n

<\/div>\n

\n \u0130stemci taraf\u0131 veya hibrit i\u015fleme kullan\u0131yorsan\u0131z, History API ile taray\u0131c\u0131 gezinmesini destekledi\u011finizden emin olun.\n <\/p>\n<\/div>\n

\n

Ka\u00e7\u0131n\u0131n:<\/h3>\n

\n Benzersiz URL’ler olu\u015fturmak i\u00e7in #!<\/code> URL yap\u0131s\u0131n\u0131 kullanmak \u00f6nerilmez:\n <\/p>\n

<\/div>\n

\n History API’nin ortaya \u00e7\u0131k\u0131\u015f\u0131ndan \u00f6nce bir ge\u00e7ici \u00e7\u00f6z\u00fcm olarak tan\u0131t\u0131lm\u0131\u015ft\u0131r. Tamamen #<\/code> olan URL yap\u0131s\u0131ndan ayr\u0131 bir model olarak kabul edilir.\n <\/p>\n<\/div>\n

\n

\n !<\/code> sembol\u00fc e\u015flik etmeden #<\/code> URL yap\u0131s\u0131n\u0131 kullanmak desteklenmez:\n <\/p>\n

\n https:\/\/www.example.com\/#product\/25\/\n <\/p>\n

\n Bu URL yap\u0131s\u0131 web’de zaten mevcut olan bir kavramd\u0131r ve belirli bir sayfadaki i\u00e7eri\u011fe do\u011frudan ba\u011flant\u0131 vermekle ilgilidir.\n <\/p>\n<\/div>\n


<\/p>\n

Canonical URL’leri Belirtin<\/h2>\n

\n Neden?<\/b> Ayn\u0131 i\u00e7erik birden fazla URL alt\u0131nda (ayn\u0131 veya farkl\u0131 alan adlar\u0131nda) mevcut oldu\u011funda indeksleme karma\u015fas\u0131n\u0131 ortadan kald\u0131rman\u0131n en iyi yolu, bir sayfay\u0131 canonical (standart) olarak i\u015faretlemek ve bu i\u00e7eri\u011fi kopyalayan di\u011fer t\u00fcm sayfalar\u0131n ona referans vermesini sa\u011flamakt\u0131r.\n<\/p>\n

\n

En iyi uygulamalar:<\/b><\/p>\n

\n Belirli bir i\u00e7eri\u011fi yans\u0131tan t\u00fcm sayfalara \u015fu etiketi ekleyin:\n <\/p>\n

<\/div>\n

\n Accelerated Mobile Pages (AMP) destekliyorsan\u0131z, onun kar\u015f\u0131l\u0131\u011f\u0131 olan rel=\"amphtml\"<\/code> talimat\u0131n\u0131 da do\u011fru \u015fekilde kulland\u0131\u011f\u0131n\u0131zdan emin olun.\n <\/p>\n<\/div>\n

\n

Ka\u00e7\u0131n\u0131n:<\/h3>\n

\n Birden fazla URL’de k\u0131s\u0131tl\u0131 i\u00e7erik olu\u015fturmaktan ve rel=\"canonical\"<\/code> ba\u011flant\u0131 \u00f6\u011fesini kullanmamaktan ka\u00e7\u0131n\u0131n.\n <\/p>\n

\n \u00d6rne\u011fin, rel=\"canonical\"<\/code> ba\u011flant\u0131 \u00f6\u011fesi, izleme parametrelerine sahip URL’ler i\u00e7in belirsizli\u011fi azaltabilir.\n <\/p>\n<\/div>\n

\n

\n Sayfalar\u0131n\u0131z aras\u0131nda \u00e7eli\u015fkili canonical referanslar\u0131 olu\u015fturmaktan ka\u00e7\u0131n\u0131n.\n <\/p>\n<\/div>\n


<\/p>\n

Birden Fazla Cihaz \u0130\u00e7in Tasarlay\u0131n<\/h2>\n

\n Neden?<\/b> T\u00fcm kullan\u0131c\u0131lar\u0131n\u0131z\u0131n, cihazlar\u0131 ne olursa olsun web sitenizi g\u00f6r\u00fcnt\u00fclerken m\u00fcmk\u00fcn olan en iyi deneyimi ya\u015famas\u0131 \u00f6nemlidir.\n<\/p>\n

\n Sitenizi duyarl\u0131 (responsive) tasar\u0131ma<\/a> sahip hale getirin; yaz\u0131 tipleri, kenar bo\u015fluklar\u0131, dolgular, d\u00fc\u011fmeler ve sitenizin genel tasar\u0131m\u0131 ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerine ve cihaz g\u00f6r\u00fcn\u00fcm alanlar\u0131na g\u00f6re dinamik olarak \u00f6l\u00e7eklenmelidir.\n<\/p>\n

\n Masa\u00fcst\u00fc veya tablet cihazlar i\u00e7in b\u00fcy\u00fct\u00fclen k\u00fc\u00e7\u00fck g\u00f6rseller k\u00f6t\u00fc bir deneyim sunar. Tersine, \u00e7ok y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rseller cep telefonlar\u0131nda indirilmesi uzun s\u00fcrer ve mobil kayd\u0131rma performans\u0131n\u0131 etkileyebilir.\n<\/p>\n

\n PWA’lar i\u00e7in UX<\/a> hakk\u0131nda daha fazla bilgi edinin.\n<\/p>\n

\n

En iyi uygulamalar:<\/b><\/p>\n

\n Cihaz\u0131n ekran\u0131n\u0131n g\u00f6r\u00fcnt\u00fcleyebilece\u011finden daha b\u00fcy\u00fck g\u00f6rselleri indirmekten ka\u00e7\u0131nmak i\u00e7in farkl\u0131 yo\u011funluktaki ekranlar i\u00e7in farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte g\u00f6rseller getiren srcset<\/code> \u00f6zniteli\u011fini<\/a> kullan\u0131n.\n <\/p>\n

\n Metninizin cihaz boyutu ne olursa olsun okunakl\u0131 oldu\u011fundan emin olmak i\u00e7in yaz\u0131 tipi boyutunuzu ve sat\u0131r y\u00fcksekli\u011finizi \u00f6l\u00e7eklendirin. Benzer \u015fekilde, \u00f6\u011felerin dolgular\u0131n\u0131n ve kenar bo\u015fluklar\u0131n\u0131n da makul \u015fekilde \u00f6l\u00e7eklendi\u011finden emin olun.\n <\/p>\n

\n Chrome Geli\u015ftirici Ara\u00e7lar\u0131’n\u0131n Cihaz Modu<\/a> \u00f6zelli\u011fini ve Mobil Uyumluluk Testi arac\u0131n\u0131<\/a> kullanarak \u00e7e\u015fitli ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerini<\/a> test edin.\n <\/p>\n<\/div>\n

\n

\n Kullan\u0131c\u0131lara Google’a g\u00f6sterdi\u011finizden farkl\u0131 i\u00e7erik g\u00f6stermeyin. Sitenizin tasar\u0131m\u0131n\u0131 farkl\u0131 cihazlar i\u00e7in de\u011fi\u015ftirmek amac\u0131yla y\u00f6nlendirmeler veya kullan\u0131c\u0131 arac\u0131s\u0131 alg\u0131lama<\/a> (di\u011fer ad\u0131yla taray\u0131c\u0131 koklama veya dinamik sunum<\/a>) kullan\u0131yorsan\u0131z, i\u00e7eri\u011fin kendisinin ayn\u0131 kalmas\u0131 \u00f6nemlidir.\n <\/p>\n

\n Google taraf\u0131ndan getirilen i\u00e7eri\u011fin kullan\u0131c\u0131n\u0131n g\u00f6rd\u00fc\u011f\u00fc i\u00e7erikle e\u015fle\u015fti\u011fini do\u011frulamak i\u00e7in Search Console “Google gibi getir” arac\u0131n\u0131 kullan\u0131n.\n <\/p>\n

\n Kullan\u0131labilirlik nedenleriyle sabit boyutlu yaz\u0131 tipleri kullanmaktan ka\u00e7\u0131n\u0131n.\n <\/p>\n<\/div>\n

<\/p>\n

Yinelemeli Olarak Geli\u015ftirin<\/h2>\n

\n Neden?<\/b> Bir web uygulamas\u0131na \u00f6zellik eklerken izlenebilecek en g\u00fcvenli yollardan biri, de\u011fi\u015fiklikleri yinelemeli (iteratif) olarak yapmakt\u0131r. \u00d6zellikleri tek tek eklerseniz, her bir de\u011fi\u015fikli\u011fin etkisini g\u00f6zlemleyebilirsiniz.\n<\/p>\n

\n Alternatif olarak, bir\u00e7ok geli\u015ftirici Progressive Web App’lerini mobil sitelerini tek seferde elden ge\u00e7irmek i\u00e7in bir f\u0131rsat olarak g\u00f6rmeyi tercih eder; yeni web uygulamas\u0131n\u0131 izole bir ortamda geli\u015ftirip haz\u0131r oldu\u011funda mevcut mobil siteleriyle de\u011fi\u015ftirirler.\n<\/p>\n

\n \u00d6zellikleri yinelemeli olarak geli\u015ftirirken, de\u011fi\u015fiklikleri ayr\u0131 par\u00e7alara b\u00f6lmeye \u00e7al\u0131\u015f\u0131n. \u00d6rne\u011fin, sunucu taraf\u0131 i\u015flemeden hibrit i\u015flemeye ge\u00e7meyi d\u00fc\u015f\u00fcn\u00fcyorsan\u0131z, bunu di\u011fer \u00f6zelliklerle birle\u015ftirmek yerine tek bir yineleme olarak ele al\u0131n.\n<\/p>\n

\n Her iki yakla\u015f\u0131m\u0131n da kendi art\u0131lar\u0131 ve eksileri vard\u0131r. Yineleme yapmak, ge\u00e7i\u015f s\u00fcrekli oldu\u011fu i\u00e7in arama indekslenebilirli\u011fi ile u\u011fra\u015fman\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131r. Ancak yineleme yapmak, geli\u015ftirme s\u00fcreci s\u0131f\u0131rdan ba\u015flam\u0131yorsa daha yava\u015f bir geli\u015ftirme s\u00fcrecine ve potansiyel olarak daha az yenilik\u00e7i bir revizyona yol a\u00e7abilir.\n<\/p>\n

\n Her iki durumda da, dikkat etmeniz gereken en hassas alanlar canonical URL’leriniz ve sitenizin robots.txt yap\u0131land\u0131rmas\u0131d\u0131r.\n<\/p>\n

\n

En iyi uygulamalar:<\/b><\/p>\n

\n Yeni \u00f6zellikleri par\u00e7a par\u00e7a ekleyerek web sitenizi kademeli olarak geli\u015ftirin.\n <\/p>\n

\n \u00d6rne\u011fin, hen\u00fcz HTTPS’yi desteklemiyorsan\u0131z, g\u00fcvenli bir siteye ge\u00e7i\u015f yaparak ba\u015flay\u0131n.\n <\/p>\n<\/div>\n

\n

Ka\u00e7\u0131n\u0131n:<\/b><\/p>\n

\n Progressive Web App’inizi izole bir ortamda geli\u015ftirdiyseniz, rel-canonical ba\u011flant\u0131lar\u0131n\u0131n ve robots.txt’nin uygun \u015fekilde ayarland\u0131\u011f\u0131n\u0131 kontrol etmeden yay\u0131na almaktan ka\u00e7\u0131n\u0131n.\n <\/p>\n

\n Rel-canonical ba\u011flant\u0131lar\u0131n\u0131z\u0131n ger\u00e7ek siteye i\u015faret etti\u011finden ve robots.txt yap\u0131land\u0131rman\u0131z\u0131n taray\u0131c\u0131lar\u0131n yeni sitenizi taramas\u0131na izin verdi\u011finden emin olun.\n <\/p>\n<\/div>\n

\n

\n Yay\u0131ndan \u00f6nce geli\u015ftirme a\u015famas\u0131ndaki sitenizi taray\u0131c\u0131lar\u0131n indekslemesini engellemek mant\u0131kl\u0131d\u0131r, ancak yay\u0131na girdi\u011finizde taray\u0131c\u0131lar\u0131n yeni sitenize eri\u015fim engelini kald\u0131rmay\u0131 unutmay\u0131n.\n <\/p>\n<\/div>\n


<\/p>\n

Kademeli \u0130yile\u015ftirme (Progressive Enhancement) Kullan\u0131n<\/h2>\n

\n Neden?<\/b> M\u00fcmk\u00fcn olan her yerde, taray\u0131c\u0131 \u00f6zelliklerini kullanmadan \u00f6nce alg\u0131lamak \u00f6nemlidir. \u00d6zellik alg\u0131lama, belirli bir \u00f6zelli\u011fi destekledi\u011fine inand\u0131\u011f\u0131n\u0131z taray\u0131c\u0131lar\u0131 test etmekten daha iyidir.\n<\/p>\n

\n Ge\u00e7mi\u015fte yayg\u0131n olan k\u00f6t\u00fc bir uygulama, kullan\u0131c\u0131n\u0131n hangi taray\u0131c\u0131ya sahip oldu\u011funu test ederek \u00f6zellikleri etkinle\u015ftirmek veya devre d\u0131\u015f\u0131 b\u0131rakmakt\u0131. Ancak taray\u0131c\u0131lar \u00f6zelliklerle s\u00fcrekli geli\u015fti\u011finden, bu teknik kesinlikle \u00f6nerilmez.\n<\/p>\n

\n Service Worker nispeten yeni bir teknolojidir ve ilerleme u\u011fruna uyumlulu\u011fu bozmamak \u00f6nemlidir; bu, kademeli iyile\u015ftirmenin ne zaman kullan\u0131laca\u011f\u0131na dair m\u00fckemmel bir \u00f6rnektir.\n<\/p>\n

\n

En iyi uygulamalar:<\/b><\/p>\n

\n Bir Service Worker kaydetmeden \u00f6nce API’sinin kullan\u0131labilirli\u011fini kontrol edin:\n <\/p>\n

<\/div>\n

\n Web sitenizin t\u00fcm \u00f6zellikleri i\u00e7in API ba\u015f\u0131na alg\u0131lama y\u00f6ntemini kullan\u0131n.\n <\/p>\n<\/div>\n

\n

\n Web uygulaman\u0131zdaki \u00f6zellikleri etkinle\u015ftirmek veya devre d\u0131\u015f\u0131 b\u0131rakmak i\u00e7in asla taray\u0131c\u0131n\u0131n kullan\u0131c\u0131 arac\u0131s\u0131n\u0131 (user agent) kullanmay\u0131n. Her zaman \u00f6zelli\u011fin API’sinin mevcut olup olmad\u0131\u011f\u0131n\u0131 kontrol edin ve mevcut de\u011filse zarif bir \u015fekilde d\u00fc\u015f\u00fcr\u00fcn (graceful degradation).\n <\/p>\n

\n Sitenizi birden fazla taray\u0131c\u0131da test etmeden g\u00fcncellemekten veya yay\u0131na almaktan ka\u00e7\u0131n\u0131n! Kullan\u0131c\u0131 taban\u0131n\u0131z aras\u0131nda hangi taray\u0131c\u0131lar\u0131n en pop\u00fcler oldu\u011funu \u00f6\u011frenmek i\u00e7in site analizlerinizi kontrol edin.\n <\/p>\n<\/div>\n


<\/p>\n

Search Console ile Test Edin<\/h2>\n

\n Neden?<\/b> Google Arama’n\u0131n sitenizin i\u00e7eri\u011fini nas\u0131l g\u00f6rd\u00fc\u011f\u00fcn\u00fc anlamak \u00f6nemlidir. Search Console<\/a>‘u kullanarak sitenizden tekil URL’ler getirebilir<\/a> ve “Tarama > Google gibi getir” \u00f6zelli\u011fini kullanarak Google Arama’n\u0131n bunlar\u0131 nas\u0131l g\u00f6rd\u00fc\u011f\u00fcn\u00fc g\u00f6rebilirsiniz. Search Console, bu se\u00e7enek belirlendi\u011finde JavaScript’inizi i\u015fleyecek ve sayfay\u0131 olu\u015fturacakt\u0131r; aksi takdirde yaln\u0131zca ham HTML yan\u0131t\u0131 g\u00f6sterilir.\n<\/p>\n

\n Google Search Console ayr\u0131ca sayfan\u0131zdaki i\u00e7eri\u011fi, Yap\u0131land\u0131r\u0131lm\u0131\u015f Veri, Zengin Kartlar, Site Ba\u011flant\u0131lar\u0131 ve Accelerated Mobile Pages varl\u0131\u011f\u0131n\u0131 alg\u0131lamak dahil olmak \u00fczere \u00e7e\u015fitli \u015fekillerde analiz eder.\n<\/p>\n

\n

En iyi uygulamalar:<\/b><\/p>\n

\n Search Console’u kullanarak sitenizi izleyin ve Google gibi getir dahil olmak \u00fczere \u00f6zelliklerini ke\u015ffedin.\n <\/p>\n

\n Search Console Tarama ><\/span> Site Haritalar\u0131<\/b> arac\u0131l\u0131\u011f\u0131yla bir site haritas\u0131 sa\u011flay\u0131n. Bu, Google Arama’n\u0131n sitenizin t\u00fcm sayfalar\u0131ndan haberdar olmas\u0131n\u0131 sa\u011flaman\u0131n etkili bir yolu olabilir.\n <\/p>\n<\/div>\n


<\/p>\n

Schema.org yap\u0131land\u0131r\u0131lm\u0131\u015f verileriyle a\u00e7\u0131klama ekleyin<\/h2>\n

\n Neden?<\/b> Schema.org<\/a> yap\u0131land\u0131r\u0131lm\u0131\u015f verileri, sayfan\u0131z\u0131n en \u00f6nemli k\u0131s\u0131mlar\u0131n\u0131 makine taraf\u0131ndan i\u015flenebilir veriler olarak \u00f6zetlemek i\u00e7in esnek bir s\u00f6zl\u00fckt\u00fcr. Bu, bir sayfan\u0131n NewsArticle<\/code> oldu\u011funu s\u00f6ylemek kadar genel veya turneye \u00e7\u0131kan bir grup i\u00e7in konum, grup ad\u0131, mekan ve bilet sat\u0131c\u0131s\u0131n\u0131 detayland\u0131rmak ya da bir tarif i\u00e7in malzemeleri ve ad\u0131mlar\u0131 \u00f6zetlemek kadar spesifik olabilir.\n<\/p>\n

\n Bu meta verilerin kullan\u0131m\u0131 web uygulaman\u0131zdaki her sayfa i\u00e7in mant\u0131kl\u0131 olmayabilir ancak mant\u0131kl\u0131 oldu\u011fu yerlerde \u00f6nerilir. Google, sayfa olu\u015fturulduktan sonra bunu ay\u0131klar.\n<\/p>\n

\n NewsArticle<\/code>, Recipe<\/code> ve Product<\/code> dahil olmak \u00fczere \u00e7e\u015fitli veri t\u00fcrleri mevcuttur. Ayr\u0131ca t\u00fcm desteklenen veri t\u00fcrlerini buradan<\/a> ke\u015ffedebilirsiniz.\n<\/p>\n

\n

En iyi uygulamalar:<\/b><\/p>\n

\n Google’\u0131n Yap\u0131land\u0131r\u0131lm\u0131\u015f Veri Test Arac\u0131<\/a>‘n\u0131 kullanarak Schema.org meta verilerinizin do\u011fru oldu\u011funu do\u011frulay\u0131n.\n <\/p>\n

\n Sa\u011flad\u0131\u011f\u0131n\u0131z verilerin g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc ve herhangi bir hata olmad\u0131\u011f\u0131n\u0131 kontrol edin.\n <\/p>\n<\/div>\n

\n

\n Sayfan\u0131z\u0131n ger\u00e7ek i\u00e7eri\u011fiyle e\u015fle\u015fmeyen bir veri t\u00fcr\u00fc kullanmaktan ka\u00e7\u0131n\u0131n. \u00d6rne\u011fin, satt\u0131\u011f\u0131n\u0131z bir ti\u015f\u00f6rt i\u00e7in Recipe<\/code> kullanmay\u0131n; bunun yerine Product<\/code> kullan\u0131n.\n <\/p>\n<\/div>\n


<\/p>\n

Open Graph ve Twitter Cards ile a\u00e7\u0131klama ekleyin<\/h2>\n

\n Neden?<\/b> Schema.org meta verilerine ek olarak, Facebook’un Open Graph protokol\u00fc ve Twitter zengin kartlar\u0131 i\u00e7in destek eklemek de yard\u0131mc\u0131 olabilir.\n<\/p>\n

\n Bu meta veri formatlar\u0131, i\u00e7eri\u011finiz ilgili sosyal a\u011flarda payla\u015f\u0131ld\u0131\u011f\u0131nda kullan\u0131c\u0131 deneyimini iyile\u015ftirir.\n<\/p>\n

\n Mevcut siteniz veya web uygulaman\u0131z bu formatlar\u0131 kullan\u0131yorsa, optimum virallik i\u00e7in bunlar\u0131n Progressive Web App’inize de dahil edildi\u011finden emin olman\u0131z \u00f6nemlidir.\n<\/p>\n

\n

En iyi uygulamalar:<\/b><\/p>\n

\n Open Graph i\u015faretlemenizi Facebook Nesne Hata Ay\u0131klama Arac\u0131<\/a> ile test edin.\n <\/p>\n

\n Twitter’\u0131n meta veri format\u0131<\/a> hakk\u0131nda bilgi edinin.\n <\/p>\n<\/div>\n

\n

\n Mevcut siteniz destekliyorsa bu formatlar\u0131 dahil etmeyi unutmay\u0131n.\n <\/p>\n<\/div>\n


<\/p>\n

Birden Fazla Taray\u0131c\u0131 ile Test Edin<\/h2>\n

\n Neden?<\/b> Kullan\u0131c\u0131 perspektifinden bak\u0131ld\u0131\u011f\u0131nda, bir web sitesinin t\u00fcm taray\u0131c\u0131larda ayn\u0131 \u015fekilde davranmas\u0131 \u00f6nemlidir. Deneyim farkl\u0131 ekran boyutlar\u0131na g\u00f6re uyarlanabilse de, hepimiz bir mobil sitenin iPhone veya Android cep telefonu olsun, benzer boyuttaki cihazlarda ayn\u0131 \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 bekleriz.\n<\/p>\n

\n Web, d\u00fcnya genelinde kullan\u0131lan taray\u0131c\u0131 say\u0131s\u0131 nedeniyle par\u00e7alanm\u0131\u015f olarak alg\u0131lanabilse de, bu \u00e7e\u015fitlilik ve rekabet, web’i bu kadar yenilik\u00e7i bir platform yapan \u015feyin bir par\u00e7as\u0131d\u0131r. Neyse ki, web standartlar\u0131 hi\u00e7 olmad\u0131\u011f\u0131 kadar olgunla\u015fm\u0131\u015ft\u0131r ve modern ara\u00e7lar, geli\u015ftiricilerin zengin, taray\u0131c\u0131lar aras\u0131 uyumlu web sitelerini g\u00fcvenle olu\u015fturmalar\u0131n\u0131 sa\u011flar.\n<\/p>\n

\n

En iyi uygulamalar:<\/b><\/p>\n

\n PWA’n\u0131z\u0131n taray\u0131c\u0131lar aras\u0131 uyumlu oldu\u011fundan emin olmak i\u00e7in BrowserStack.com<\/a>, Browserling.com<\/a> veya BrowserShots.org<\/a> gibi taray\u0131c\u0131lar aras\u0131 test ara\u00e7lar\u0131n\u0131 kullan\u0131n.\n <\/p>\n<\/div>\n


<\/p>\n

Sayfa Y\u00fckleme Performans\u0131n\u0131 \u00d6l\u00e7\u00fcn<\/h2>\n

\n Neden?<\/b> Bir web sitesi kullan\u0131c\u0131 i\u00e7in ne kadar h\u0131zl\u0131 y\u00fcklenirse, kullan\u0131c\u0131 deneyimi o kadar iyi olur. Sayfa h\u0131z\u0131 i\u00e7in optimizasyon web geli\u015ftirmede zaten iyi bilinen bir odak noktas\u0131d\u0131r, ancak bazen bir sitenin yeni bir s\u00fcr\u00fcm\u00fcn\u00fc geli\u015ftirirken gerekli optimizasyonlar y\u00fcksek \u00f6ncelikli olarak g\u00f6r\u00fclmez.\n<\/p>\n

\n Bir Progressive Web App geli\u015ftirirken, en iyi sonu\u00e7lar i\u00e7in siteyi yay\u0131na almadan \u00f6nce sayfa y\u00fckleme h\u0131z\u0131n\u0131z\u0131n performans\u0131n\u0131 \u00f6l\u00e7menizi ve optimize etmenizi \u00f6neririz.\n<\/p>\n

\n

En iyi uygulamalar:<\/b><\/p>\n

\n Sitenizin sayfa y\u00fckleme performans\u0131n\u0131 \u00f6l\u00e7mek i\u00e7in Page Speed Insights<\/a> ve Web Page Test<\/a> gibi ara\u00e7lar\u0131 kullan\u0131n. Googlebot olu\u015fturma konusunda biraz daha sab\u0131rl\u0131 olsa da, ara\u015ft\u0131rmalar<\/a> t\u00fcketicilerin %40’\u0131n\u0131n y\u00fcklenmesi \u00fc\u00e7 saniyeden uzun s\u00fcren bir sayfay\u0131 terk etti\u011fini g\u00f6stermi\u015ftir.\n <\/p>\n

\n Web sayfas\u0131 performans\u0131 \u00f6nerilerimiz ve kritik olu\u015fturma yolu (critical rendering path) hakk\u0131nda buradan<\/a> daha fazla bilgi edinin.\n <\/p>\n<\/div>\n

\n

\n Optimizasyonu yay\u0131na alma sonras\u0131 bir ad\u0131m olarak b\u0131rakmaktan ka\u00e7\u0131n\u0131n. Web sitenizin i\u00e7eri\u011fi yeni bir Progressive Web App’e ge\u00e7meden \u00f6nce h\u0131zl\u0131 y\u00fckleniyorsa, optimizasyonlar\u0131n\u0131zda gerileme yapmamak \u00f6nemlidir.\n <\/p>\n<\/div>\n


<\/p>\n

\n Yukar\u0131daki kontrol listesinin faydal\u0131 olaca\u011f\u0131n\u0131 ve Progressive Web App’lerinizi indekslenebilirli\u011fi g\u00f6z \u00f6n\u00fcnde bulundurarak geli\u015ftirmenize yard\u0131mc\u0131 olacak do\u011fru rehberli\u011fi sa\u011flayaca\u011f\u0131n\u0131 umuyoruz.\n<\/p>\n

\n Ba\u015flarken, sunucu taraf\u0131, istemci taraf\u0131 ve hibrit i\u015flemeyi g\u00f6steren Progressive Web App indekslenebilirlik \u00f6rneklerimize<\/a> g\u00f6z atmay\u0131 unutmay\u0131n. Her zaman oldu\u011fu gibi, herhangi bir sorunuz olursa l\u00fctfen Web Y\u00f6neticisi Forumlar\u0131m\u0131zdan<\/a> bize ula\u015f\u0131n.\n<\/p>\n

\n Yay\u0131nlayan: Tom Greenaway, Geli\u015ftirici Savunucusu<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

9 Kas\u0131m 2016, \u00c7ar\u015famba Progressive Web Apps (PWA’lar), mobil sitelerin ve yerel uygulamalar\u0131n en iyi \u00f6zelliklerini kullan\u0131c\u0131lara sunmak i\u00e7in yeni teknolojilerden yararlan\u0131yor ve web d\u00fcnyas\u0131ndaki en heyecan verici yeni fikirlerden birini olu\u015fturuyorlar. Ancak ger\u00e7ek bir etki yaratabilmeleri i\u00e7in indekslenebilir ve ba\u011flant\u0131 verilebilir olmalar\u0131 kritik \u00f6nem ta\u015f\u0131yor. Bu makalede sunulan her \u00f6neri, bir PWA veya basit […]<\/p>\n","protected":false},"menu_order":82886,"template":"","meta":{"footnotes":""},"ar_kb_kategori":[665],"ar_kb_etiket":[],"class_list":["post-24957","ar_kb","type-ar_kb","status-publish","has-post-thumbnail","hentry","ar_kb_kategori-blog"],"_links":{"self":[{"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb\/24957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb"}],"about":[{"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/types\/ar_kb"}],"version-history":[{"count":0,"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb\/24957\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/media\/27123"}],"wp:attachment":[{"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/media?parent=24957"}],"wp:term":[{"taxonomy":"ar_kb_kategori","embeddable":true,"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb_kategori?post=24957"},{"taxonomy":"ar_kb_etiket","embeddable":true,"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb_etiket?post=24957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}