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’nin eklenti ve dökümanlarını incelemek için aşağıdaki sayfayı ziyaret edebilirsiniz
Dokümanlar : https://www.ampproject.org/
Ö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 href="https://www.toretto.com.tr/amp/" rel="amphtml" />
AMP tasarımına başlarken Doctype kullanımı zorunludur. Başlangıç etiketi her zaman aşağıdaki gibi olmalıdır.
<!doctype html>
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 href="https://www.toretto.com.tr/" rel="canonical" />
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="" type="text/css"><br /> h1 {<br /> color: red;<br /> }<br /> </style>
Ek olarak AMP boilerplate
<style amp-boilerplate="" type="text/css">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 içerisinde neredeyse tüm HTML etiketlerini kullanabilirsiniz. Belli başlı bazı etiketler dışında genellikle her şey aynıdır. Örnek olarak yerine
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 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.
Aksi halde aldığınız hatayı araştırarak sorunu çözmeniz gerekebilir.
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. 
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.
AMP nedir? Web sitemi nasıl AMP’ye çevirebilirim? yazısına ilk yorum yapan siz olun!
AMP nedir? Web sitemi nasıl AMP’ye çevirebilirim? için Cevap Yaz