Websitenizi AMP’ye nasıl geçirirsiniz?

 

AMP’li sayfalar maksimum 1 saniye içinde açılır. AMP olmayanlar ise minimum 2 saniye  içerisinde ortalama ise 3 3,5 saniye yalnız %300 gibi bir değişiklik olduğundan kullanıcı deneyimini mükemmele taşıyor. İnternette değil de dosyalar arasında geçiş yapıyorsunuz gibi oluyor. Bunun yapılmasının temel nedeniyse progressive web app dediğimiz gelecek web teknolojisi. İleride mobil uygulamalar olmayacak. Web siteleri birer mobil uygulama olacak. Uygulamalar da kimse beklemek istemez pat pat pat kullanmak ister 🙂 O deneyimi şu anda AMP kısıtlı olarak yaşatıyor işte.

Bugün sizlere AMP (Accelerated Mobile Pages)  uyumu konusunda videolu, görsel bir eğitimde bulunacağım.

AMP Genel Mantık

Şimdi Javascript websitenizde sepete eklerken, bir şeye tıklanıldığında sayfa yenilenmeden işlemleri gerçekleştiren tarayıcının programlama dili oluyor. Bizim web sitemizde bir çok <script> etiketi var bunları gerçekleştiren. Yine CSS Stil şablonu yani bir tamamen stil özelliklerini tarayıca anlatan dosya. İşte hem bu <script >etiketlerinden hem de bu stil şablonu dosyasından tek bir adet istiyor. Bunu da yalnızca kendi versiyonu ile istiyor. Tamamen kendi kurallarını kullanarak ve bu kurallar içerisined hem Javascript, hem CSS hatta HTML tarafında (img etiketi yok misal amp-image etikei var) yalnızca kendi etiketleri var. Sayfaların en başında  <html> etiketi bulunur. Bu html etiketini <html amp> yapıyoruz ve o andan itibaren tarayıcı o sayfayı amp özelliklerine göre derliyor. Yani demem o ki bizim bu AMP’ye geçmemiz için tüm özelliklerimizi yeni baştan AMP’ye göre oluşturmalıyız.

 

  1. Tüm <script> etiketlerini kaldırın
  2. Yalnızca bir adet CSS olabilir. Bu da
    <style amp-custom> 
    </style>

    şeklinde koyulabilir. Tüm CSS’leri bir araya getirin ve bu CSS dosyasının boyutu 50 kb’yi geçmesin

  3. Belgenin başına <!doctype html> ekleyin
  4. Html etiketinin AMP  <html amp> özniteliğini ekleyin
  5. <link rel="canonical" href="$SOME_URL" /> $SOME_URL web sitenizde bulunduğunuz sayfayı gösterir.
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width,minimum-scale=1">
  8. <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>
  9. <script async src="https://cdn.ampproject.org/v0.js"></script>

WordPress için

İşte hazır bir altyapı kullanmanın avantajlarından bir tanesi! Popüler içerik yönetim sistemlerle ilgilenen geliştiriciler de fazla olurlar. Bu nedenle bir güncelleme olduğunda eklentiye çok hızlı bir şekilde ulaşabilirsiniz.

WordPress’in kendi yayınladığı AMP eklentisi
WordPress AMP eklentileri içerisinde popüler olan

Joomla için

Joomla AMP eklentisi

 

 

 

AMP (Accelerated Mobile Pages) Google için neden önemli?

Accelerated Mobile Pages Project

AMP daha hızlı dolayısıyla daha iyi bir mobil kullanıcı deneyimi oluşturmak amaçlı bir yöntem.

Bu yöntem sadece temel HTML özelliklerini kullanarak mümkün olduğunca gereksiz yüklemelerden sizi kurtarıp direkt olarak zengin içeriğe odaklamayı hedefliyor.

Bunla da kalmıyor, girdiğiniz sayfaların önbelliğini alıyor ve daha sonra girdiğinizde sayfayı tekrar yüklemek yerine önbellek üzerinden alıp yalnızca içeriği değiştiriyor. Bu şekilde içeriğin temiz ve direkt olarak yüklenmesi sağlanıyor.

Google için neden önemli?

Google için önemli olan içeriktir. Daha doğrusu kullanıcısına vereceği maksimum faydadır. Bu fayda içerisinde en çok kullanılan ürünü ve gelir kapısı Google Aramadır.

Google Arama günümüzde 200’den fazla sinyal alıp bir sıralama gerçekleştirir. Bu sıralamayı sağlayan temel faktörler güncellik, içerik ve temel olarak güvenilirliktir. İçerik en can alıcı noktalardan biridir. Google web sitelerinde her içeriği anlamlandıramayabilir. Halbuki scheme yapıları içerisinde içeriği zenginleştirdiğimizde Google anlamadan biz içeriğimizi göstermiş oluruz.

AMP sayfalar hem yalınlık, hem de zenginleştirilmiş içeriklere sahiptirler, işte tam bu nedenle Google mobil aramalarda hem kendi aramalarını geliştirip hem de kullanıcı deneyimini iyileştirecek bir çözüm oluşturabilir.

Şu anda AMP’nin internette yaygınlığı çok yaygın değil. Muhtemelen AMP bir yıl sonra mobil uyumlaşacak, daha fazla yaygınlaşacak. Sonuçta internetin devi Google, bizler ise Google’ın müşterisiyiz.

Güncelleme : 01.06.2017

Bu konuda Google için herhangi bir yaptırım (AMP yapan siteleri öne çekme) yok. Fakat öyle tahmin ediyorum ki kulislerde ne zaman bir yaptırım uygulasak diye konuşuyorlardır veya hala erken görüyorlardır. Yani demem o ki birgün mutlaka AMP gerekli olacak. Şimdiden geçmeniz sizin yararınıza.