Amp açılımı
Accelerated Mobile Pages yani
Hızlandırlmış Mobil Sayfalar anlamına gelen google'nin yeni bir projesi.Amp ile oluşturulan mobil sayfalar çok hızlı yüklenecek.Amp html genel olarak
iframe-video-audio-img tagları gibi sayfaya çok yük getiren tagları değiştirerek sağlıyor.
Temel amp şablonu üzerinden anlatayım.
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="urun-1.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>
Merhaba Mars
</body>
</html>
Temel şablon bu şekildedir.Her hangi bir eksikte hata alırsınız.Yukarıdan aşağıya doğru farklılıklara bakalım.
İlk farklılık
<html amp> tagıga amp parametresi ekleniyor.Şu
<html ⚡> şekilde de olabilir.
<link rel="canonical" href="urun-1.html">
Burada ana konunun linkini belirtiyoruz.Aynı şekilde ana konuda da
<link rel="amphtml" href="amp/urun-1.html">
bu şekilde amp sayfasının linki belirtiyoruz.
Bunlarının hemen altında
style ve
script tagları vardır.Bunlar amp sayfası için standart bulunması gereken kodlar.
Temel olarak bu şekilde.Oluşturduğunuz
amp html sayfalardaki hataları
https://search.google.com/search-console/amp buradan test ederek görebilirsiniz.