7Amp nedir ?
Accelerated Mobile Pages ( Amp ) web sitenizin mobilde içeriklerinin daha hızlı erişilmesi için uygulanan bir kodlama yöntemdir
Google yakın geçmişte yapmış olduğu açıklamaya göre AMP kodlama yapılan siteler Google ön belleğinde saklanacak ve kullanıcı siteye mobilden erişmek istediğinde daha hızlı erişim sağlacaktır
Google amacı ise mobil üzerinden internet kullanıcısı sayısını arttırmaktır
Amp sayfa yapılandırması yaparak kullanıcılarına normalin kat kat üstü erişim hızı ve ayrıca sunucuna ekstradan trafik rahatlığı sağlayabilirsin Ayrıca Facebook , Google+ gibi paylaşım uygulamalarında artık paylaşımlarınızda amp sayfalarına yönlendirme yaptığınızda uygulamaların içerisindeki sihrine kapılıp farkınızı ortaya koyarak daha iyi bir kullanıcı deneyimi elde etmenizi sağlayacaktır Mesela benzer başlıklar arasında geçiş gibi Artık yeni içerik paylaşımında önemli olan konu kullanıcı deneyimi ve o deneyimi hangi hızda gerçekleştirdiğidir (bkz:gif)
6Gelelim işin mutfağına
Amp'ninde kendine göre bazı standartları bulunmaktadır Amp’nin amacına hizmet etmesi için firmaların sizden bekledikleri aslında html olarak kodlanmış tek bir sayfa düşünebilirsiniz İçerinde css ve java scriptlerden arındırılmış sıkıştırılmış ve ya yahut uyarlanmış Amp ye göre belli eklentiler aşağıdaki örnekte bir google Amp sayfa yapısını inceleyelim
Burda 4 adet önemli adım var
*Google ne istiyorsa ekleyin bu en basiti çünkü (bkz::cdnampprojectorgv0)
*Sonra şema yapısına ait on göndermek Ki google'ın kütüphanesi bizim amp sayfasının da çalışırken işlevsellik kazansın Bu konuda google çok katı değil bu adımı atlayabilirsiniz Fakat amp verimliliğini bir o kadar etkiler Bu ilk iki maddenin düzgün çalışması koşulunda, kütüphane kullanıcı hangi alanda ve hangi bölgede ise yükselme önceliği o alanın oluyor Örnek verecek olursak amp sayfa açıldı ve siz bir anda en alta gittiniz başta yavaş (Amp ye göre) sonradan sayfanın başlarını atlayıp sizin bulunduğunuz alandaki datalar gelecek (gif, jpg) gibi
*Amp ye özgün css işte amp mutfağın en yorucu yerlerinden biri ama örnek verecek olursak; nasıl ki print css diye bir şey varsa burda da amp css var Yani çıktının nasıl görüneceğini ayarlıyorsunuz Haliyle burada google size gene birkaç imkan sağlamakta kendine has sınıfları ile iyi bir görünüm yakalamanız mümkün
*Amp için en kasıntılı alan AMP schema Önce aklınızda bir flaş çakması için bunu yazacağım Angular , react veya ionic kullandıysanız görmüşsünüz kendi taglari mevcut, ve bu taglerle adeta bir element değilmişte , işlemlerin yapıldığı özel alanlarmış gibi yazılıyor Kendi alanlarına kendileri erişip yorumlayıp işleme alıyor İşte aynen AMP schemada bunlar gibi Google ın kendinin belirdiği taglar dizisi Bu dizilerden en dikkat çeken ampimg src amplogoampimg
CODE!doctype html
html amp lang en head meta charset utf8 script async src :cdnampprojectorgv0script titleHello, AMPstitle link rel canonicalhref http:exampleampprojectorgarticlemetadatahtml meta name viewportcontent devicewidth,minimumscale 1,initialscale 1 script type applicationld+on { @context: http:schemaorg, @type: NewsArticle, headline: Opensource framework for publishing content, datePublished: 20191007T12:02:41Z, image: logo } script style ampboilerplatebody{webkitanimation:ampstart 8s steps(1,end) 0s 1 normal both;mozanimation:ampstart 8s steps(1,end) 0s 1 normal both;msanimation:ampstart 8s steps(1,end) 0s 1 normal both;animation:ampstart 8s steps(1,end) 0s 1 normal both}@webkitkeyframes ampstart{from{visibility:hidden}to{visibility:visible}}@mozkeyframes ampstart{from{visibility:hidden}to{visibility:visible}}@mskeyframes ampstart{from{visibility:hidden}to{visibility:visible}}@okeyframes ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes ampstart{from{visibility:hidden}to{visibility:visible}}stylenoscriptstyle ampboilerplatebody{webkitanimation:none;mozanimation:none;msanimation:none;animation:none}stylenoscript head body h1Welcome to the mobile webh1 bodyCODE
html 6Bölüm 3 sezon 1 Detay
Amp bir sayfa için sancılı olmasa da uzun bir süreçten geçmeniz gerekecektir Bunların içinde şemanızdan tutun optimizasyonunuza kadar bir çok işlem bulunuyor Tabi işleriniz bunlarla da bitmeyen bir serüvene dönüşecektir Daha sonrasında onaylatma ve onaylatılan sayfaların da son olarak paylaşımlara yerleştirilmesi kalıyorç Bu süreç de sosyal medyaların veya firmaların kendince amp standartları olacak kısacası bu durum biraz kötü Amp çöplüğü oluşturacak ama hiç yüklenmemesinden iyidir İşte tam bu yüzden Amp sayfalar için Google amphtmlve canonicalgibi linkler bulmuş kendisine
CODElink rel canonicalhref :wwwexamplecomurltoampdocumenthtml
link rel amphtmlhref :wwwexamplecomurltoampdocumenthtmlCODE
Burada şair şunu anlatmak istiyor bak bu 1 bunun birde bu amp si var ama bu amp ,bununda bir şu html var yani ikisid e aynı şey, ben masumum özgün içerik ürettim ama teknolojiye ayak uydurmam gerek cümlesinin koda dökülmüş hali ( detaylar için canonical link e bakabilirsiniz )
5Sonuç
Amp hali hazırda html gibi kült bir kod değil belki seneye HAMPT (hyper application multiplier page text) geliştirilir ve hepimiz gitti bizim emekçiler deriz Ama günümüzde iyi hayat kurtarıyor, blog sayfası olanın bloğuna , haber sayfası olanın haberine, Eticaretçinin ürünlerini hızlı ve kullanışlı bir şekilde platformlarda gezmelerine sağlayacak tabi bu da site sahipleri için bir artı demektir
Özel not :
En can alıcı noktasını sona sakladım Amp sayfalarda sanki resim geçer gibi kendinizin yada bir başka amp sayfaların (sizinle eş içerikteki) arasında geçebiliyorsunuz Bu da sizin sayfanızın sanki uygulamanın platformun bir parçası gibi yapıyor
En azından ben gördüğümde woow demiştim
Accelerated Mobile Pages ( Amp ) web sitenizin mobilde içeriklerinin daha hızlı erişilmesi için uygulanan bir kodlama yöntemdir
Google yakın geçmişte yapmış olduğu açıklamaya göre AMP kodlama yapılan siteler Google ön belleğinde saklanacak ve kullanıcı siteye mobilden erişmek istediğinde daha hızlı erişim sağlacaktır
Google amacı ise mobil üzerinden internet kullanıcısı sayısını arttırmaktır
Amp sayfa yapılandırması yaparak kullanıcılarına normalin kat kat üstü erişim hızı ve ayrıca sunucuna ekstradan trafik rahatlığı sağlayabilirsin Ayrıca Facebook , Google+ gibi paylaşım uygulamalarında artık paylaşımlarınızda amp sayfalarına yönlendirme yaptığınızda uygulamaların içerisindeki sihrine kapılıp farkınızı ortaya koyarak daha iyi bir kullanıcı deneyimi elde etmenizi sağlayacaktır Mesela benzer başlıklar arasında geçiş gibi Artık yeni içerik paylaşımında önemli olan konu kullanıcı deneyimi ve o deneyimi hangi hızda gerçekleştirdiğidir (bkz:gif)
6Gelelim işin mutfağına
Amp'ninde kendine göre bazı standartları bulunmaktadır Amp’nin amacına hizmet etmesi için firmaların sizden bekledikleri aslında html olarak kodlanmış tek bir sayfa düşünebilirsiniz İçerinde css ve java scriptlerden arındırılmış sıkıştırılmış ve ya yahut uyarlanmış Amp ye göre belli eklentiler aşağıdaki örnekte bir google Amp sayfa yapısını inceleyelim
Burda 4 adet önemli adım var
*Google ne istiyorsa ekleyin bu en basiti çünkü (bkz::cdnampprojectorgv0)
*Sonra şema yapısına ait on göndermek Ki google'ın kütüphanesi bizim amp sayfasının da çalışırken işlevsellik kazansın Bu konuda google çok katı değil bu adımı atlayabilirsiniz Fakat amp verimliliğini bir o kadar etkiler Bu ilk iki maddenin düzgün çalışması koşulunda, kütüphane kullanıcı hangi alanda ve hangi bölgede ise yükselme önceliği o alanın oluyor Örnek verecek olursak amp sayfa açıldı ve siz bir anda en alta gittiniz başta yavaş (Amp ye göre) sonradan sayfanın başlarını atlayıp sizin bulunduğunuz alandaki datalar gelecek (gif, jpg) gibi
*Amp ye özgün css işte amp mutfağın en yorucu yerlerinden biri ama örnek verecek olursak; nasıl ki print css diye bir şey varsa burda da amp css var Yani çıktının nasıl görüneceğini ayarlıyorsunuz Haliyle burada google size gene birkaç imkan sağlamakta kendine has sınıfları ile iyi bir görünüm yakalamanız mümkün
*Amp için en kasıntılı alan AMP schema Önce aklınızda bir flaş çakması için bunu yazacağım Angular , react veya ionic kullandıysanız görmüşsünüz kendi taglari mevcut, ve bu taglerle adeta bir element değilmişte , işlemlerin yapıldığı özel alanlarmış gibi yazılıyor Kendi alanlarına kendileri erişip yorumlayıp işleme alıyor İşte aynen AMP schemada bunlar gibi Google ın kendinin belirdiği taglar dizisi Bu dizilerden en dikkat çeken ampimg src amplogoampimg
CODE!doctype html
html amp lang en head meta charset utf8 script async src :cdnampprojectorgv0script titleHello, AMPstitle link rel canonicalhref http:exampleampprojectorgarticlemetadatahtml meta name viewportcontent devicewidth,minimumscale 1,initialscale 1 script type applicationld+on { @context: http:schemaorg, @type: NewsArticle, headline: Opensource framework for publishing content, datePublished: 20191007T12:02:41Z, image: logo } script style ampboilerplatebody{webkitanimation:ampstart 8s steps(1,end) 0s 1 normal both;mozanimation:ampstart 8s steps(1,end) 0s 1 normal both;msanimation:ampstart 8s steps(1,end) 0s 1 normal both;animation:ampstart 8s steps(1,end) 0s 1 normal both}@webkitkeyframes ampstart{from{visibility:hidden}to{visibility:visible}}@mozkeyframes ampstart{from{visibility:hidden}to{visibility:visible}}@mskeyframes ampstart{from{visibility:hidden}to{visibility:visible}}@okeyframes ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes ampstart{from{visibility:hidden}to{visibility:visible}}stylenoscriptstyle ampboilerplatebody{webkitanimation:none;mozanimation:none;msanimation:none;animation:none}stylenoscript head body h1Welcome to the mobile webh1 bodyCODE
html 6Bölüm 3 sezon 1 Detay
Amp bir sayfa için sancılı olmasa da uzun bir süreçten geçmeniz gerekecektir Bunların içinde şemanızdan tutun optimizasyonunuza kadar bir çok işlem bulunuyor Tabi işleriniz bunlarla da bitmeyen bir serüvene dönüşecektir Daha sonrasında onaylatma ve onaylatılan sayfaların da son olarak paylaşımlara yerleştirilmesi kalıyorç Bu süreç de sosyal medyaların veya firmaların kendince amp standartları olacak kısacası bu durum biraz kötü Amp çöplüğü oluşturacak ama hiç yüklenmemesinden iyidir İşte tam bu yüzden Amp sayfalar için Google amphtmlve canonicalgibi linkler bulmuş kendisine
CODElink rel canonicalhref :wwwexamplecomurltoampdocumenthtml
link rel amphtmlhref :wwwexamplecomurltoampdocumenthtmlCODE
Burada şair şunu anlatmak istiyor bak bu 1 bunun birde bu amp si var ama bu amp ,bununda bir şu html var yani ikisid e aynı şey, ben masumum özgün içerik ürettim ama teknolojiye ayak uydurmam gerek cümlesinin koda dökülmüş hali ( detaylar için canonical link e bakabilirsiniz )
5Sonuç
Amp hali hazırda html gibi kült bir kod değil belki seneye HAMPT (hyper application multiplier page text) geliştirilir ve hepimiz gitti bizim emekçiler deriz Ama günümüzde iyi hayat kurtarıyor, blog sayfası olanın bloğuna , haber sayfası olanın haberine, Eticaretçinin ürünlerini hızlı ve kullanışlı bir şekilde platformlarda gezmelerine sağlayacak tabi bu da site sahipleri için bir artı demektir
Özel not :
En can alıcı noktasını sona sakladım Amp sayfalarda sanki resim geçer gibi kendinizin yada bir başka amp sayfaların (sizinle eş içerikteki) arasında geçebiliyorsunuz Bu da sizin sayfanızın sanki uygulamanın platformun bir parçası gibi yapıyor
En azından ben gördüğümde woow demiştim