İçindekiler
AMP Nedir?
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 Japonya.
Sosyal platformlar
AMP içeriği sunan sosyal ve dağıtım platformları Twitter, LinkedIn, Pinterest, Reddit, Nuzzle, Tencent Qzone (Çin), Weibo (Çin).
İçerik yayınlama platformları
Destekleyen içerik yayınlama platformları WordPress, Medium, Canvas, Drupal, Squarespace ve Tumblr.
AMP Nasıl Kullanılır?
Sınırlı şekilde JS ve CSS kullanabilirsiniz. Bununla beraber Google Analytics dışında başka bir analiz platformunu da desteklemiyor. Yani eklediğiniz 3. parti araçlar AMP’de çalışmayacaktı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’te AMP kurulumu çok basit
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.
