AMP Hızlandırılmış Mobil Sayfalar

Ağustos 07 2019

AMP Hızlandırılmış Mobil Sayfalar

Amp Nedir?

 

Amp, “Accelerated Mobil Pages” yani Hızlandırılmış Mobil Sayfalar anlamını taşır. Mobil web site sayfalarının normale göre daha hızlı ve daha akıcı açılıp kullanılmasını sağlar. İnternet sayfalarını Google´ın önbelleğinde saklayıp kullanıcıların daha hızlı erişmesine katkıda bulunur. 2015 yılında Google´ın desteğini almasıyla beraber gitgide kullanımı artmıştır. Sürekli kendini güncelleyen Google, bu güncelleme ile mobil site kullanımı daha kullanışlı hale getirmeyi hedeflemekte. Eğer bir siteye girmeden önce site isminin yanında şimşek işareti var ise o sitede Amp teknolojisini kullanılmış diyebiliriz. Google Amp Projesi´nin geliştirilme amacı, internet adresleri için salt okunurluk ve saf hız ortamı oluşturmaktır. Amp Projesi, kodlar ile oluşturulmuş sayfaları ön belleğe alarak her ziyaretçiye siteyi anlık olarak önbellekten sunar. 

 

Amp Hangi Amaçla Kullanılır?   

 

Günümüzde akıllı telefon kullanımı bilgisayar kullanımından daha fazla bu yüzden kullanıcılar bilgisayardaki hızı telefonda da istiyorlar ne yazık ki bu çokta mümkün değil. Amp, mobil internet sayfalarını daha hızlı hale getirerek kullanıcıların işlerini kolaylaştırıyor. Bu yüzden çoğu site sahibi sitelerini Amp kullanarak oluşturuyor. Kullanıcılara sadeleştirilmiş bir Html formu sunan bu sistem, tamamen açık kaynaklı olmasından dolayı benimsenmiştir. Eğer yeterli düzeyde Html bilginiz var ise kolayca Amp sayfası oluşturabilirsiniz. Mobil sitenizin Google sıralamalarında daha üst sıralara çıkmasını istiyorsanız Amp ´ye başvurabilirsiniz.

 

Amp´nin Seo´ya Etkisi      

 

Amp, sitenin görünürlüğünü arttırmaya yardımcı oluyor ve daha çok erişim alınmasına katkıda bulunuyor. Amp kullanan siteler mobil ziyaretçiler için birinci seçenek olacağını Google tarafından onaylandığı için sıralamada önemli değişiklikler oluyor. Amp sayfalar anında açıldığı için Google bu sayfalara önem veriyor.  Bu özelliği sıralama faktörü olarak kullanıyor. Google yaptığı testlerde, Amp destekli olan sitelerin olmayan sitelere göre daha üst sıralarda yer aldığını açıkladı. Normal sayfalara göre daha çok tıklanma aldığı kanıtlanmış durumda.

 

Amp & Tasarım    

 

Sitenizde Amp uyumlu tasarım oluşturmak için normal Html tagları ile değil aşağıdaki Amp uyumlu tagları yazmanız gerekmekte. Aşağıdaki görselde kullanım şeklini görebilirsiniz.

                                        amp tasarım

                                                                 

 

Amp & Html  

 

Amp uyumlu siteyi Html´de yazarken belli sınırlar içinde yazmalısınız. Eğer Amp kod kütüphanesinin desteklemediği kodları yazdığınız takdirde sayfanız görüntülenmeyecektir. Amp ´de yazdığınız kodlara çok dikkat etmeniz gerekmektedir. Uygun kodları yazdığınızdan emin olmanız gerekir.Alttaki kodlar ile kendi sitenize Amp oluşturabilirsiniz. 

 

  • Belge tipiyle <!doctype html> başlamalıdır.
  • Üst seviye bir <html ⚡> etiketi içermelidir (<html amp> de kabul edilir).
  • <head> ve <body> etiketleri içermelidir (HTML›de isteğe bağlıdır).
  • Başında AMP HTML belgesinin düzenli HTML sürümünü ya da böyle bir HTML versiyonu mevcut değilse kendisini gösteren bir <link rel="canonical" href="$SOME_URL">etiketi içerir.
  • Baş etiketin ilk ürünü olarak <meta charset="utf-8"> etiketini içerir.
  • Baş etiketin içerisinde bir <meta name="viewport" content="width=device-width,minimum-scale=1"> etiketi içerir. initial-scale=1›in de eklenmesi önerilir.
  • Başında en son öge olarak<script async src="https://cdn.ampproject.org/v0.js"></script> etiketini içerir (Buna AMP JS kitaplığı da eklenip yüklenir).
  • <head> etiketinde aşağıdakileri içerir: <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>

 

Amp & WordPress   

 

Eğer sitenizde WordPress kullanıyorsanız çok kolay ve hızlıca Amp kurabilirsiniz. Bunu sadece bir eklentiyle halletmeniz mümkün. Konu WordPress olunca kolaylıklar peşinden geliyor. “WordPress’te her şey bir eklentiye bakar.” sözünü kanıtlar niteliğinde bir eklenti kullanımı ile bu işi halledebilirsiniz. WordPress için Google Amp nedir dersek, sadece iki eklenti ile yapacağınız uygulama diyebiliriz. 

 

Amp & Yapay Zekâ   

 

Yakın zamanda Amp ile yapay zekanın Google tarafından birleştirilmesi düşünülüyor. Peki yapay zekâ ve Amp birleştirildiğinde ne gibi katkıları olacak? Yapay zekâ ve Amp birleştirildiğinde, dijital pazarlamacılar e-ticaret siteleri tasarım açısından daha zengin bir site tasarlamakta zorluk çekmeyecekler. Yapay zekâ, bir sayfanın içeriğini arama cümlesi olmadan sitenin alakalı olduğu konuyu belirleyebilir.

 

Amp´nin Avantajları 

 

  • Hızlı ve akıcı olması
  • WordPress ile uyumlu olması
  • Açık kaynak kodlu olması
  • Kendi kod kütüphanesi olması
  • Google´ın önbelleğinden hızlıca aktarılması
  • Mobil sıralamalarda daha üst sıralarda yer alma imkânı
  • Kurulumunun kolay olması

 

Amp´nin Dezavantajları

 

  • Html, Css, JavaScript gibi desteklerini sınırlı olarak vermesi
  • Google Analytics haricinde analiz programı kullanılamaması
Kategoriler

Adı Soyadı

×