fbpx
Web Tasarım

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

Günümüzde bir internet sayfasının yüklenme hızı çok önemlidir. Öyle ki bu yüklenme hızı ziyaretçilerinize sayfalarınızı daha yüklenmeden, içeriğini görmeden kapattırabiliyor. Google’ın geliştirdiği AMP teknolojisi sayesin de normalden 5 belki de 10 kat daha hızlı açılabilen web sayfalarına sahip olabilirsiniz.

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

Google AMP (Accelerated Mobil Pages) nedir?

AMP (Accelerated Mobil Pages) türkçe olarak Hızlandırılmış Mobil Sayfalar anlamına gelmektedir. AMP teknolojisinin asıl amacı; bir web sayfasında ki içeriklere mobil tarafından olağanüstü hız ile erişebilmektir. AMP uyumlu bir web sayfasını; Google kendi ön belleğinde saklamaktadır. Ve belkide biraz da bu sebepten dolayı AMP sayfalara erişim çok hızlıdır. SEO ve Web Tasarım açısından mükemmeldir. WordPress altyapısı ile kolay bir şekilde kullanılabilir.

AMP ile uyumlu hale getirdiğiniz bir web sayfası; Google önbelleğinde depolanacağı ve Google Arama Sonuç Sayfası’nda AMP versiyonu gözükeceği için sitenizin kaynak tüketimini ciddi oranda azaltır. AMP sayfalarının kullanıcı açısından hiç bir zarar getirici yönü yoktur, aksine sayfa hızı çok yüksek derece de olduğu için psikolojisin de büyük bir olumlu görüş oluşturacaktır. Gün geçtikçe mobil kullanıcı sayısı artmaktadır bu analizler ile kanıtlanmıştır. Bu sebeple AMP teknolojisine hiç bir şekilde güncelleme kesilmeyebilir.

AMP uyumlu örnek bir HTML dosyası;

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/tr/documentation/guides-and-tutorials/start/create/basic_markup/">
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Bir web sayfasının AMP uyumlu olması için gerekenler;

  • “<head>” etiketi içerisinde aşağıda yazanları içermelidir;
<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>
  • Yine <head> etiketinde <script async src="https://cdn.ampproject.org/v0.js"></script>en son öğe olarak çağırılmalıdır.
  • Yine başlık etiketinin içerisinde <meta name="viewport" content="width=device-width,minimum-scale=1">kodunu içermelidir.
  • Meta charset etiketi belirtilmelidir.
  • “Canonical” etiketiyle sayfanın AMP olmayan URL adresi belirtilmelidir.
  • “<!doctype html>” ile başlıyıp “<html amp>” etiketi ile devam etmelidir.

Genel olarak toparlamak gerekirse;

  • SEO açısından mükemmel derecede önemlidir.
  • Ziyaretçiler için istedikleri hızı kat kat vermektedir.
  • WordPress ile kolay ve hızlı bir şekilde AMP teknolojisi kullanılabilir.
  • Ziyaretçileriniz Google sunucu önbelleklerine erişeceği için; sunucuya yük bindirimi büyük ölçüde azalır.

Bakınız; Mobil Uyumlu Web Tasarım Nedir?

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
Kapalı