Erkan Ceran

Google AMP Project Nedir, Nasıl Kullanılır?

Erkan Ceran

Google gelişen web teknolojileri ile birlikte web sayfalarının, mobilde artan yüküne bir çözüm getirme amacıyla “Accelerated Mobile Pages Project” (Hızlandırılmış Mobil Sayfalar) kısaca AMP adını verdiği projeyi açık kaynak olarak kullanıma sundu.

Accelerated Mobile Pages Project

Adından anlaşılacağı üzere tamamen mobilde sayfaların daha hızlı yüklenmesi için normal HTML yapısı üzerine farklı taglar kullanarak geliştirilmiş bir proje. Şimdiden Twitter, Pinterest, WordPress.com, Chartbeat, Parse.ly, Adobe Analytics ve LinkedIn platformlarının AMP sayfalara geçiş için hazırlıklar yaptığı söylenmekte.

https://www.google.com/images/google-blog-assets/amp-phone-10062015.mp4

Nasıl Yapılır?

AMP sayfalar için öncelikle bazı kurallar var;

  1. Sayfa mutlaka doctype ile başlamalı. Ör: <!doctype html>
  2. Sayfada <html amp> tagı bulunmalı.
  3. <head> ve <body> tagları olmalı.
  4. AMP yapılan sayfanın, normal HTML versiyonu var ise bu <link rel=”canonical” href=”$SOME_URL” /> linki ile belirtilmeli, yoksa kendini işaret etmeli.
  5. <head> tagından hemen sonra <meta charset=”utf-8″> olmalı.
  6. <head> tagı içerisinde <meta name=”viewport” content=”width=device-width,minimum-scale=1″> olmalı.
  7. <head> tagı arasında <script async src=”https://cdn.ampproject.org/v0.js”></script> olmalı.
  8. Son olarak “AMP Boilerplate” denilen bir kod <head> arasında olmalı.

AMP projesi Open Graph Protocol, Twitter Cards, schema.org/NewsArticle vb gibi şemaları desteklemektedir.

Örnek “Hello World”

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="hello-world.html" >
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-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>
  </head>
  <body>Hello World!</body>
</html>

Bir çok HTML 5 tagini AMP destekliyor. Taglara özellik olarak verilen “on” ile başlayan örneğin; onlick, onmouseover, ayrıca xml bazlı xmlns, xml:lang gibi özelliklere izin verilmiyor. Inline “style” kullanımaması gerekiyor.

<style> içerisinde @font-face, @keyframes, @media, @supports kurallarına izin veriliyor fakat @import yasak. <style amp-custom> ile custom style eklenebiliyor. * ve :not() selector önerilmiyor.

amp-* kodları dışındaki taglere pseudo-selectors yapılabiliyor. Ör: a:hover, div:last-of-type.

“-amp- , i-amp” class ismi olarak verilemez, rezervli. Fakat “amp-” ile başlayan classlar override edilebilir. “!important” yasak.

Animasyonlar için sadece “opacity, transform” taglerinin kullanımına izin veriliyor. “overflow” auto veya scroll değerlerinde olamaz.

Custom yapılan <style> maximum 50,000 byte olmalı. (50kb)

Dışardan font eklenmesi için çağırılan url nin, whitelist te olması gerekli şaunda 2 tane mevcut; https://fast.fonts.net, https://fonts.googleapis.com

 

HTML Tag  AMP Karşılığı
script Ancak type=”application/ld+json” şeklinde kullanılabilir.
img amp-img
video amp-video
audio amp-audio
iframe amp-iframe
base, frame, frameset, object, param, applet, embed Yasaklı.
form Şuanda yok fakat üzerinde çalışıyorlar, gelecek.
inputlar input, textarea, select, option henüz yok sadece “button” kullanılabilir
style amp-custom kodu kullanılarak arasında bir adet “style” a izin veriliyor.
link Sadece burada verilen değerlere rel=”xx” olarak izin veriliyor.
meta http-equiv özelliği dışındakilerde sorun yok.
a href e “javascript” verilemiyor. target=”_blank” zorunlu.
svg Tüm SVG elementleri izinli.

Projenin https://www.ampproject.org isimli sayfasından ve Github linkinden kod dökümanlarına ulaşabilir ve daha detaylı bilgi alabilirsiniz.

WordPress sayfalarınızın, hızlı bir şekilde AMP versiyonlarını da çıkarmak istiyorsanız; şu linkteki eklentiyi kurabilirsiniz. Bu sayfanın amp versiyonu için tıklayın.

Google AMP demo arama sayfası için tıklayın.

Exit mobile version