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

Google, mobil arama sonuçlarında hızlandırılmış mobil sayfaları (AMP) kullanmaya başladı. Peki siz buna hazır mısınız?

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

Geçtiğimiz Ekim ayında, Google hızlı yüklenen mobil web sayfaları oluşturmak için çok erişilebilir bir çerçeve olan Accelerated Mobile Pages (AMP)’yi duyurdu. Açık kaynak girişimi, yayıncıların, güvenebilecekleri herhangi bir reklam gelirinden ödün vermeden mobil okuyucuları için hızı (ve dolayısıyla kullanıcı deneyimini) kolayca geliştirmelerini sağlamak için tasarlanmıştır.

Tecrübeli geliştiriciler yoğun performans optimizasyonları ile sıklıkla benzer sonuçlar elde etseler de, yayıncılar kaynak kısıtlamaları nedeniyle bunu çoğu zaman ihmal ederler. AMP, bu mobil optimizasyonların birincil mobil web deneyimini değiştirmeden kolayca elde edilmesini sağlar.

Ayrıca, Google’ı ve yoğun olarak kendi platformlarına entegre ederek kullanımını teşvik eden diğer önde gelen web teknolojisi şirketleri tarafından gelecekteki kullanımının ek bir faydası var.

Hızlandırılmış Mobil Sayfalar Nasıl Çalışır?

Temelde mobil web sayfaları oluşturmak için bir çerçeve olan AMP, üç temel bölümden oluşur:

1. AMP HTML

Bir HTML alt kümesi, bu biçimlendirme dili bazı özel etiketlere ve özelliklere ve birçok kısıtlamaya sahiptir. Ancak normal HTML’yi biliyorsanız, mevcut sayfaları AMP HTML’ye uyarlamakta zorluk çekmemelisiniz. Temel HTML’den farkı hakkında daha fazla ayrıntı için, “AMP Projesi’nizin olması gereken” gerekli işaretleme listesine bakın.

2. AMP JS

Mobil sayfalar için bir JavaScript çerçevesi. Çoğunlukla, kaynak kullanımı ve eşzamansız yükleme işlemini yönetir. AMP’de üçüncü taraf JavaScript’e izin verilmediğine dikkat edilmelidir.

3. AMP CDN

İsteğe bağlı bir İçerik Dağıtım Ağı (Content Delivery Network), AMP etkin sayfalarınızı önbelleğe alır ve otomatik olarak bazı performans iyileştirmeleri yapar.

Sitenizi Nasıl AMP yapacaksınız?

Başlangıç ​​olarak, herhangi bir makale sayfasının en az iki versiyonunu korumalısınız: Makale sayfanızın kullanıcıların görecekleri orijinal versiyonları ve bu sayfanın AMP versiyonları.

AMP, form öğeleri ve üçüncü taraf JavaScript gibi şeylere izin vermediğinden, standart bir uygulamada sayfanızda kullanmanız için olası müşteri adayları, sayfa yorumları ve başka bazı öğeler kullanamazsınız.

Ayrıca, kısıtlamaları yerine getirmek için site şablonunuzu yeniden yazmak zorunda kalabilirsiniz. Örneğin, AMP’deki tüm CSS’ler satır içi olmalı ve 50 KB’den az olmalıdır. Özel yazı tiplerinin yüklenme yoğunluğu nedeniyle, bu yüklemeyi daha iyi kontrol edebilmek için özel bir amp-font uzantısı kullanılarak yüklenmeleri gerekir.

Multimedya özel olarak kullanılmalıdır. Örneğin, görüntülerin özel amp-img öğesini kullanması ve açık bir genişlik ve yükseklik içermesi gerekir. (Eski bir web sitesini bir AMP şablonuna dönüştürürken, genişlik ve yükseklik özellikleri zaten kullanılmamışsa, bu büyük bir acı olabilir). Ayrıca, resimleriniz animasyonlu GIF’ler ise, ayrı amp-anim genişletilmiş bileşenini kullanmanız gerekir.

Görüntüler gibi, yerel olarak barındırılan videoları amp-video olarak adlandırılan HTML5 ile gömmek için kullanılması gereken özel bir etiket var. Bununla birlikte, YouTube videolarını gömmek için – web videolarının büyük çoğunluğu – ayrı bir genişletilmiş bileşen, amp-youtube bulunmaktadır.

Amp-carousel ile slayt gösterileri ve amp-image-lightbox ile görüntü ışık kutuları gibi şeylerin yanı sıra Twitter, Instagram, Facebook, Pinterest ve Vine için kendi genişletilmiş bileşenleri aracılığıyla sosyal medya yerleştirmeleri de bulunuyor.

Bu etiket ve genişletilmiş bileşenlerin kullanımı zor değildir; sadece site tasarımınız için biraz planlama yapmanız gerekiyor.

Google’ın (ve AMP Projesini destekleyen diğer teknolojilerin) makalenizin AMP sürümünü algılaması için, makale sayfasının orijinal sürümünü değiştirmeniz gerekecektir. Orijinal makale sayfası şu etiketi içermelidir, temel olarak AMP sayfaları için bir kanonik etiket:

<link rel="amphtml" href="http://www.example.com/blog-post/amp/">

AMP Discovery sayfası ayrıca AMP’yi destekleyen bazı platformların, sayfanın içerik türünü belirtmek için Schema.org meta verisine gereksinim duyacağını da belirtir. (Şu anda, “makale”, “yemek tarifi”, “inceleme” ve “video” GitHub’da sayfa türü örnekleri olarak listelenmiştir.)

Ayrıca, Schema.org meta verilerinin “içeriğinizin Google Arama haberleri carousel (Carousel: metin ve görsellerin bir araya getirilerek, içeriğin aynı ve kendini tekrar edebilen çerçeve içerisinde kullanıcıya sunulmasıdır.) gösterisinde görünmeye uygun hale getirilmesi için bir zorunluluk olduğunu” belirtir. AMP’yi uygulayarak Google’dan gelecekte bir fayda sağlamaya çalışıyorsanız, şemanızı doğru yaptığınızdan emin olun!

AMP’deki Reklamlarla Nasıl Para Kazanırım?

Reklam engelleyicilerin artması, yayıncıların web sitelerinden para kazanmalarını zorlaştırdı. Bazı kullanıcılar için, web sitesi yükleme süresini iyileştirmek, göz atma hızını artırmaya yardımcı olabilecek reklam engelleyicileri kullanmak için bir teşvik olmuştur. AMP, bu konuda bir cevap olarak görülebilir, projenin de belirttiği gibi:

Hızlandırılmış Mobil Sayfalar Projesinin bir amacı, kullanıcı merkezli bir yaklaşımı benimseyerek mobil web’de etkin reklamdan para kazanmayı sağlamaktır. Bu bağlamda amaç, Hızlandırılmış Mobil Sayfalardaki kapsamlı reklam biçimleri, reklam ağları ve teknolojiler için destek sağlamaktır.

Sonuç olarak, en popüler reklam ağlarından bazıları şu anda amp-reklam genişletilmiş bileşenini kullanıyor (yolda daha fazla uyumluluk olasılığı var):

  • Amazon A9
  • AdReactor
  • Google AdSense
  • AOL AdTech
  • Google Doubleclick
  • Flite
  • Taboola
  • Adform
  • DotAndAds
  • plista
  • Akıllı AdServer
  • Yieldmo

Bunların nasıl göründüğünü görmek istiyorsanız , AMP’nin GitHub sayfasındaki .md dosyalarında her reklam ağı için örnekler sağlanmıştır.

Para kazanma işleminiz daha karmaşıksa – ödeme duvarları veya aboneliklerden yararlanarak – “AMP Access” uzantısını kullanarak AMP içinde uygulamak için de belgeler bulunur.

AMP’nin Analytics’i Var mı?

Evet. Aslında, AMP’deki analitik çok zekice. Birden fazla analitik izlemenin bir siteyi yavaşlatmasını önlemek için, “bir kez ölçün, birçok kişiye rapor verin” felsefesini uyguladılar. Web siteniz için AMP ile analitik işlevselliğini etkinleştirmenin iki yolu vardır:

  • Amp-Piksel Bileşeni: Bu, bir GET isteği kullanarak sayfa görüntülemelerini tipik bir izleme pikseli olarak saymak için kullanılabilecek basit bir etikettir. DOCUMENT_REFERRER ve Başlık gibi, içinden geçirilebilecek çok sayıda değişken vardır.
  • Amp-Analytics Genişletilmiş Bileşeni: Bu, amp-pikselden biraz daha gelişmiş. Analytics’i sitenize uygulamak için kullanacağınız şey büyük olasılıkla. Çünkü analitik etkileşimleri için daha yüksek düzeyde bir yapılandırma sağlar.

Google Analytics’i çalıştırmayı denemediyseniz, amp-analytics ile yol alabilirsiniz. Gerekli JavaScript kitaplığını bölümüne eklemeniz ve ardından sayfanızın bölümündeki bazı JSON işaretlemesi yoluyla yapılandırmanız gerekir.

AMP’de Google Analytics’le ilgileniyorsanız , geliştirici sayfalarında Google’ın AMP Analytics bölümünü inceleyin. Birkaç uygulama örneği bulunuyor.

AMP, Google’da Nasıl Görünecek?

Google, bir AMP özelliğinin SERP’de nasıl görüneceğine dair bir demo hazırladı. Cep telefonunuzda g.co/ampdemo adresine giderek (veya Chrome Geliştirici Araçları’nda öykünerek) deneyebilirsiniz. Ardından, “Mars” gibi bir şey arayın. AMP makalelerini sayfanın en üstünde carousel olarak görebilirsiniz.

SERP içine gömülü bir okuma deneyimi için birine tıklayın. AMP özellikli başka bir makaleyi okumak için sağa veya sola kaydırabilirsiniz. Bir yayıncının AMP sayfasına gitmekten farklı bir deneyim.

Pecado's Web

Demo içerisinde, The Guardian (örnek AMP sayfası) ve The Washington Post (örnek AMP sayfası) gibi birkaç büyük yayıncı bulunabilir.

Bir sonraki yazıda WordPress altyapılı sitenizi AMP uyumlu nasıl yapacağınız konusu paylaşacağım. Sevgiyle kalın.

Kaynak: Search Engine Land

Share

You may also like...

Bir cevap yazın

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