AMP Nedir? Google AMP Ne İşe Yarar?

AMP Nedir

İçindekiler

Google AMP Nedir?

Google AMP Nedir?

AMP açılımı; Accelerated Mobile Pages (Hızlandırılmış Mobil Sayfalar) web sitenize cep telefonu tablet gibi cihazlardan daha hızlı erişilmesi için uygulanan bir kodlama yöntemdir.

Mobil kullanımı arttırmak amacıyla google AMP sayfaları ön belleğinde tutarak daha hızlı açılmasını sağlamaktadır. Ayrıca AMP için getirilen bir takım kısıtlamalar nedeniyle AMP sayfalarda yüksek boyutlu resimler ve sayfa yüklenme süresini yükselten javascriptler olmayacak.

AMP Nasıl Kullanılır?

Web sitenize AMP sayfaları dahil etmek için google’ın belirlediği kurallar çerçevesinde düzenleme yapılması gerekmektedir. Yani tamamen özgür değilsiniz, AMP kuralları dahilinde yapabilecekleriniz kısıtlı olacaktır.

Google AMP resmi sayfasını buradan ziyaret edebilirsiniz: https://www.ampproject.org

Basit AMP Sayfası

Basir bir AMP sayfasını incelersek;

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

İlk olarak html tag’ında sayfanın AMP sayfası olduğunu belirtiyoruz. <html amp lang=”en”>
Google AMP zorunlu javascript dosyasını çağırıyoruz.
AMP sayfamızın normal sürümünü işaretliyoruz <link rel=”canonical” href=”http://example.ampproject.org/article-metadata.html”>
JSON ile schema işaretlemelerini yapıyoruz.
Yine zorunlu olan style kodlarını ekliyoruz.

Kendi stillerimizi harici bir style.css benzeri dosyadan çağırmıyoruz, her sayfanın stillerini <style amp-custom></style> etiketleri arasında dahil ediyoruz.

AMP sayfasında resim nasıl eklenir?

<amp-img src="logo.jpg" alt="Logo" width="200" height="75" class="amp-logo"></amp-img>

<img> etiketini yukarıdaki şekilde kullanabilirsiniz.

AMP sayfasında farklı bir kullanım örneği daha; <amp-accordion> </amp-accordion>

Gördüğünüz gibi google AMP kendine özgü kodlar içermektedir, ve HTML5 yapısında kullandığımız bir çok kod çalışmamakta yada farklı kullanılmaktadır.
Kendine özgü yapısıyla bir AMP sayfası oluşturduğunuzda test etmek için: https://search.google.com/test/amp sayfasını kullanabilirsiniz. AMP sayfanızdaki hataları buradan görebilir ve düzenleyebilirsiniz.