Google’ın web siteleri için 7 Ekim 2015’te duyurduğu AMP’i (Accelerated Mobile Pages) Türkçe’ye “Hızlandırılmış mobil sayfalar” olarak çevirebilmek mümkün. İsminden de anlaşılacağı üzere AMP teknolojisini kullanan sayfalar inanılmaz derecede hızlı bir şekilde açılır. Google sıralama sonuçlarında da AMP destekleyen sayfaların yanında (⚡) şeklinde bir ikon belirir.
Imaj, video ve iframe kodları gibi sayfa yüklenme süresini uzatan faktörler AMP ile devre dışı bırakılır, kullanıcı sadece gerçek içeriği görüntüler. Bu da mobil uyumlu sitelerin hızlıca açılmasını sağlar. CNBC AMP kullanımından sonra sayfalarının genelde 1 saniyenin altında açıldığını, yükleme süresinde %75 azalma görüldüğünü söyledi. Gizmodo ise sayfalarının 3 kat hızlandığını belirtti.
Accelerated Mobile Pages’in amacı açık kaynak ve hızlı siteler oluşturarak, web yayıncılığının hızını ve performansını arttırmaktır.
AMP kullanan web siteleri, destekleyen 2. parti sitelerin sunusunda (Google, Facebook gibi) önbelleğine saklanır ve kullanıcıya daha hızlı yüklenerek kullanıcı deneyimini arttırır.
AMP Destekleyen Siteler
Arama Motorları
AMP içeriğine bağlantı veren arama motorları: Google, Bing , Baidu, Sogu, Yahoo.
Sosyal Ağlar
Facebook, Twitter, Pinterest, LinkedIn gibi sosyal ağlar AMP desteği sunar.
İçerik Yönetim Platformları
Destekleyen içerik yayınlama platformları WordPress, Medium, Canvas, Drupal, Squarespace ve Tumblr.
AMP Nasıl Kullanılır?
AMP sınırlı JavaScript ve HTML kodlarına izin verir. 3. parti entegrasyon araçlarınının çoğu çalışmamaktadır.
Örnek bir AMP sayfası:
<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title>Örnek AMP</title> <link rel="canonical" href="https://bertanuzun.com/amp/"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-custom> h1 {color: red} </style> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Article headline", "image": [ "thumbnail1.jpg" ], "datePublished": "2015-02-05T08:00:00+08:00" } </script> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <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> </head> <body> <h1>Örnek bir AMP Sayfası</h1> <p> Biraz yazı <amp-img src=sample.jpg width=300 height=300></amp-img> </p> <amp-ad width=300 height=250 type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302"> </amp-ad> </body> </html>
Daha fazla AMP kodları için, https://www.ampproject.org/docs/fundamentals/spec adresine ulaşın.
WordPress AMP Kurulumu
WordPress sitenizi AMP uyumlu yapmak için Automattic şirketi tarafından geliştirilen bu eklentiyi kurmanız yeterli. Etkinleştirdikten sonra sitenizdeki tüm bağlantıların sonuna “/amp” etiketini ekleyecek olan bu yazılım tamamen ücretsiz. Ancak bu eklentinin bir dezavantajı da AMP sayfalarını çok basit renklere dönüştürüp özelleştirmeye imkân tanımıyor olması. AMP ile açılan sayfaların renk şemasını değiştirmek için AMP for WP – Accelerated Mobile Pages eklentisini indirebilirsiniz. Böylece başlık ve metin renginden tutun, sitenizin logosuna kadar birçok alana müdahale edebiliyorsunuz.
Google‘ın AMP sayfalarınızı algılayıp algılamadığını öğrenmek içinse Webmaster Tools‘a giriş yaptıktan sonra Arama görünümü > Hızlandırılmış sayfalar menüsüne girebilirsiniz.
