Gürkan ve Kalemi

Tamamen Kişisel

AMP Sayfa Hazırlamak



The Accelerated Mobile Pages ya da kısaca AMP, hızlandırılmış mobil sayfalar olarak dilimize çevrilmiş. Geleceğin teknolojisi olarak görülen bu yapıyı yavaş yavaş büyük internet siteleri, mesela haber sitelerinin kullanmaya başladıklarını görüyoruz. Çok uzak olamayn bir gelecekte tüm web sitelerinin bu standarda uyması gerekecek, çünkü gidişat bunun kaçınılmaz olarak böyle olacağını gösteriyor. AMP ile ilgili güzel bir haber burada yer alıyor. Ben uzun uzadıya AMP nedir diye anlatmayacağım. Sayfalarımızı nasıl AMP uyumlu yapabiliriz, ondan bahsedeceğim.

AMP'nin site hızını nasıl etkilediği burada anlatılmış. Basit bir AMP sayfası1 şöyledir:

amp kod örneği

Burada belirteyim, eğer WordPress kullanıyorsanız, sayfalarınızı otomatik olarak AMP versiyona çeviren eklenti var. Eklentiye buradan ulaşabilirsiniz.

Bunun dışında başka uygulamalar, hazır sistemler kullanıyorsanız, ilgili uygulama geliştiricilerinin bu konuya el atmasını bekleyeceksiniz demektir. Çünkü AMP sayfalarınız ya amp.siteadi.com veya siteadi.com/amp gibi bir adreste barınmak zorunda ve bunu yapmak ileri seviyede web tasarım uzmanlığı gerektirir. Ama herhangi hazır bir sistem kullanmıyorsanız -benim gibi- kendi AMP sayfalarınızı rahatlıkla oluşturabilirsiniz. Konuya devam etmeden önce belli şeyleri kısaca özetleyeyim.

AMP sayfalarda, normal sayfalarınızdan farklı olarak, normal sayfanızda kullandığınız scriptleri kullanamayacaksınız. Zaten AMP'nin mantığı da bu: Az kod, temiz kod, hızlı erişim. Resimleri ve örneğin YouTube videolarınızı, yine belirli standartlara göre eklemeniz gerekiyor. Bunlardan başka yukarıdaki kodda gördüğünüz her şey, AMP sayfa şablonunda mutlaka bulunmalı. Yazdığınız kodu buradan kontrol ederek doğru ve uyumlu bir içeriğe sahip olup olmadığınızı kontrol edebilirsiniz.

Şu an bu sayfanın AMP versiyonu burada yer almakta. Bilgisayardan girerken bakarsanız, normal sayfadan farklı ve daha hızlı olduğunu göreceksiniz. Şimdi bundan sonraki konuda adım adım AMP sayfa hazırlamayı örneklendirerek işlemeye devam edeceğim.


  1. Kaynak kodları buradan aldım.