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.
Nasıl Yapılır?
AMP sayfalar için öncelikle bazı kurallar var;
- Sayfa mutlaka doctype ile başlamalı. Ör: <!doctype html>
- Sayfada <html amp> tagı bulunmalı.
- <head> ve <body> tagları olmalı.
- 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.
- <head> tagından hemen sonra <meta charset=”utf-8″> olmalı.
- <head> tagı içerisinde <meta name=”viewport” content=”width=device-width,minimum-scale=1″> olmalı.
- <head> tagı arasında <script async src=”https://cdn.ampproject.org/v0.js”></script> olmalı.
- 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.