İçindekiler

Amp 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).

Gelelim 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:https://cdn.ampproject.org/v0.js)

  • Sonra şema yapısına ait json 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 schema" da bunlar gibi . Google ın kendinin belirdiği taglar dizisi. Bu dizilerden en dikkat çeken <amp-img src="amp/logo.jpg"></amp-img>

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Bö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 "amphtml" ve "canonical" gibi linkler bulmuş kendisine

<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

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 )

Sonuç

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, E-ticaretç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