Merhaba arkadaşlar, bugün sizlere Google’ın AMP projesinden bahsedeceğim.
AMP Nedir?
AMP, Accelerated Mobile Pages’in baş harflerinden oluşmuş, Hızlandırılmış Mobil Sayfalar anlamına gelen, daha hızlı mobil sayfaların oluşturulması için geliştirilmiş bir Google projesidir.
Bir AMP projesinde, inline javascript yazamaz, sadece inline css yazabilirsiniz. Javascript işlemleri için, AMP’nin mobil sayfalar için gerekli oluşturduğu komponentleri kullanabilirsiniz.
Bir AMP sayfasında neler olmalıdır?
Google, geçerli bir AMP sayfasında zorunlu olan etiketleri şu şekilde listeliyor;
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
</style>
</head>
<body>
</body>
</html>
Bunlara yakından kısaca bir bakalım;
<html ⚡>
Bu kısımda ⚡ işareti ya da onun yerine amp de yazılabilir, AMP projesi olduğunu belirlememizi sağlıyor.
<link rel="canonical" href="self.html" />
Burada canonical linkine, AMP sayfasının orjinal linkini yazmalısınız. Yani Google’a, bu AMP sayfasının asıl sayfası şurasıdır diye belirtiyorsunuz.
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
Bu kısmı boşluklarıyla beraber hiç değiştirmeden kullanın. Aksi taktirde hatalı bir kullanım olacaktır.
<script async src="https://cdn.ampproject.org/v0.js"></script>
AMP’nin ana javascript dosyasıdır, tabi ki zorunludur ????
<style amp-custom></style>
Burada ise, Inline yazacağınız CSS etiketini yazdık. amp-custom niteliği olmadan yine hata verecektir. Bu arada Inline CSS’inde belli bir Byte limiti var, onu aşarsanız yine hata alırsınız.
AMP’de Komponentler
Proje içinde kullanılmak üzere, bir çok komponent mevcut. Bunlardan en çok kullanılanı, img, video, iframe ve reklam komponentleri olabilir. Tüm komponentlere buradaki linkten ulaşabilirsiniz.
Şimdi örnek bir komponent inceleyelim, örneğin nasıl bir resin eklenir? Doğrudan img etiketi ile eklerseniz, geçersiz bir AMP sayfası olacaktır.
<amp-img src="resim.jpg" width="1080" height="610" layout="responsive" alt="AMP"></amp-img>
Gördüğünüz gibi bu şekilde kullandık. Bunu kullanırken javascript gereği duymadık, ama örneğin bir analytics kodu yerleştirmemiz gereksin. O zamanda analytics komponentini kullanacağız. Bu sefer önce ona ait javascript kodunu sayfamızda head etiketi içerisine ekliyoruz.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Daha sonra uygun bir yere analytics kodumuzu ekliyoruz.
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-KODUNUZ"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Bu şekilde, aklınıza gelebilecek bir çok şeyi komponentler bölümünde bulabilirsiniz.
AMP sayfalarını Debug etmek
AMP sayfasında hataları konsol’dan görebilmek için, sayfa linkinin sonuna #development=1 yazıp sayfayı yenilerseniz, hata varsa hataları yoksa geçerli bir sayfa olduğunun uyarısını görebilirsiniz konsolunuzda.
http://localhost/konu/amp#development=1
AMP Sayfaları – Normal Sayfalar
Bir AMP sayfasının normal versiyonunu belirlemek için, şu şekilde etiket kullanacaksınız;
<link rel="canonical" href="self.html" />
Normal bir sayfanın AMP sayfasını belirlemek için ise şöyle bir kullanım olacak;
<link rel="amphtml" href="self-amp.html" />
Ve böylece Google amca projenizde AMP sayfalarını takip edip indexleyebilecek.
Örnek bir AMP sayfası
Video’da hazırladığım örnek AMP sayfasını aşağıdaki linkten indirebilirsiniz;
https://drive.google.com/open?id=0BxX-AwfGLF5vZ0Q1MFRRdFFNUWs
WordPress için AMP
WordPress’de mevcut içerikleriniz için AMP sayfasını hazırlamak isterseniz, eklenti kullanmanız yeterli.
Ben şu eklentiyi kullanıyorum: https://wordpress.org/plugins/amp/
Tek yapmanız gereken eklentiyi kurup etkinleştirmek. Gerisini google amcaya bırakın ????