Hızlandırılmış Mobil Sayfalar (Google AMP) Doğru Web Tasarım

Google'ın en son teknolojisi olan hızlandırılmış mobil sayfalar yani google amp sisteminden haberiniz varmı? Eğer yoksa veya az bir bilgiye sahipseniz bu makale size sitenizi geliştirmek için oldukça önemli bilgiler katacak.

Hızlandırılmış Mobil Sayfalar ( Google AMP ) nedir?



Bilirsiniz ki mobil kullanıcıları düşük hızda ( standart bağlantı 3g ) internete bağlandıkları için web sitesi 3 saniyeden fazla bekleten web sitelerinden hemen çıkarlar. Bunun böyle olduğunu çoğumuz kendimizden biliriz. Google "2020 yılına kadar dünya genelinde hücresel ağ bağlantılarının %70'i 3G veya daha düşük hızlarda gerçekleşecek" diye bir varsayımda bulunmuş. Bu sebepten dolayı web sitelerinin oldukça hızlı açılabilmesi için Google, AMP ( Accelerated Mobile Pages ) projesini geliştirdi. HTML'den farklı bir işaretleme diline sahip olan bu AMP işaretleme dilini javascript kodları sayesinde işler hale getirmiş. Bu sebepten dolayı önce kendine özel javascript kütüphaneyi yükleyip, sonrasında kodları çalıştırabiliyorsunuz.


Hızlandırılmış Mobil Sayfalar ( Google AMP ) nasıl kullanılır?



Örnek AMP sayfası kodu;
<!doctype html>
<html amp lang="tr">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Merhaba, DWT</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>Hoşgeldiniz</h1>
  </body>
</html>



Sitenizin AMP versiyonunu Google'a bildirmek için;
​<link rel="amphtml" href="https://dogruwebtasarim.com/amp/" />
Amp versiyonu ile oluşturulmuş sayfanızın kaynağını bildirmek için?
<link rel="canonical" href="https://dogruwebtasarim.com" />

Ayrıca AMP ile ilgili herşeyi resmi sayfasından inceleyebilirsiniz: https://www.ampproject.org/tr/



Google AMP ile ilgili kafanıza takılan veya merak ettiğiniz sorular varsa iletişime geçerek bilgi alabilirsiz.

Google amp uyumlu bir siteye sahip olmak isterseniz web tasarım paketlerimizden birini satın alabilirsiniz.
mobil uyumlu site şablonları ücretsiz mobil uyumlu site asp.net mobil uyumlu site hızlandırılmış mobil sayfalar google hızlı site indexleme