AMP nedir? Web sitemi nasıl AMP’ye çevirebilirim?

AMP nedir?

AMP (Accelerated Mobile Pages); 2015 yılında Google tarafından desteklenmeye başlayan açık kaynaklı bir framework projesidir. Bu projenin ortaya çıkış sebebi isminden de anlaşılacağı üzere mobil platformları kullanan kullanıcıların sayfalar içerisinde hızlı bir şekilde işlem yapabilmesini sağlamaktır.

Gelelim AMP’nin neler yaptığına.

  • AMP sayfa tasarımında HTML ve stil dosyaları sayfa içerisinde inline olarak yazılmaktadır. Böylece dış sunuculardan dosya çağırırken harcanan gereksiz bekleme süresinin önüne geçilmiş olur.
  • Kendisine ait Javascript Kütüphanesi bulunmaktadır. AMP’nin kendi sitesinden entegre edilerek çalıştırılabilir. ( Bkz: https://cdn.ampproject.org/v0.js
  • Web geliştiricileri için oluşturulan doküman sayesinde klasik HTML sayfalarında yapılabilen çoğu şey AMP HTML ile de yapılabilir. Mesela <img> etiketinin AMP sayfasında <amp-img> olarak kullanılması gerekiyor. Fakat bunlar web geliştiricileri için sorun değil. AMP; Ufak tefek farklılıkların dışında herkesin kolayca adapte olabileceği bir sistem.

AMP’nin eklenti ve dökümanlarını incelemek için aşağıdaki sayfayı ziyaret edebilirsiniz
Dokümanlar : https://www.ampproject.org/

AMP’ye Giriş

Öncelikle AMP sayfasına başlanmadan önce orijinal web sayfasının head bölümünde sayfanın AMP sayfa linkini hedef göstermemiz gerekiyor. Bunun için orijinal sayfada head alanına aşağıdaki amphtml parametresini eklemelisiniz.

<link rel="amphtml" href="https://www.toretto.com.tr/amp/" />

AMP tasarımına başlarken Doctype kullanımı zorunludur. Başlangıç etiketi her zaman aşağıdaki gibi olmalıdır.

 <!doctype html><html ⚡ amp> 

Head

Meta charset kullanılacaksa her zaman head etiketinin başlangıcında kullanılması gerekir.

<meta charset="utf-8">

AMP Javascript kütüphanesi charset metasından hemen sonra çekilmelidir.

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP HTML dosyasının orijinal sayfası canonical etiketi ile belirtilmelidir.

<link rel="canonical" href="https://www.toretto.com.tr/">

AMP HTML dosyasının içerisinde viewport etiketi kullanılmalıdır. İnitial-scale=1 değeri verilmelidir.

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

CSS dosyaları sayfa içerisinde inline olarak belirtilmelidir. Normal inline style’den farkı ise style etiketinin amp-custom parametresi girilmelidir.

<style amp-custom>
 h1 {
    color: red;
  }
</style>

Ek olarak AMP boilerplate

<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>

Body

Body içerisinde neredeyse tüm HTML etiketlerini kullanabilirsiniz. Belli başlı bazı etiketler dışında genellikle her şey aynıdır. Örnek olarak <img> yerine <amp-img> etiketi kullanılır. Her resimde genişlik ve yükseklik parametreleri belirtilmek zorundadır. Aksi halde console’da AMP kurallarının aşıldığı gerekçesiyle hata mesajı görüntülenir.

Buraya kadar yaptığımız işlemler ile body içerisinde dilediğimiz gibi çalışabiliriz. AMP’nin dökümanlarını inceleyerek kendinize uygun eklentileri kullanabilirsiniz.

AMP sayfalarını test etmek

AMP sayfalarını test etmek için Google’ın AMP Test Aracı’nı kullanabilirsiniz.
AMP Test Aracı : https://search.google.com/test/amp

Sayfanızda herhangi bir hatalı durum var ise bu sayfa aracılığıyla hataları görüntüleyebilir, hatanız hakkında detaylı bilgi sahibi olabilirsiniz.
Daha pratik olarak geliştiriciler console’da da aynı işlemi yapabilirler. Bunun için AMP sayfasını çalıştırıp console’u açmanız yeterli.  Eğer aşağıdaki gibi bir görüntü var ise AMP sayfanız sorunsuz çalışıyordur.
başarılı bir amp sayfasının consoleda görünümü

Aksi halde aldığınız hatayı araştırarak sorunu çözmeniz gerekebilir.

Arama Motorlarında AMP Sayfalar Nasıl Görünür?

Arama motorlarında AMP sayfalarını belirleyebilmek çok kolay. Yaptığınız bir arama sonucunda listelenen siteler arasında AMP olan sitenin hemen yanında aşağıdaki gibi AMP sembolü çıkmaktadır. amp sayfasının arama motorundaki görünümü

Bu bağlantılara arama motoru üzerinden direk tıklandığında Google sizi direkt olarak siteye yönlendirmez. Kendi AMP görüntüleyicisi ile size sayfayı hızlı bir şekilde önizlemenizi sağlar.

  • Editör
  • 10 Ağustos 2018

AMP nedir? Web sitemi nasıl AMP’ye çevirebilirim? için Cevap Yaz