Tag Archives: AMP Project

AMP‘nin düzgün bir şekilde uyarlanması mobil arama sonuçlarında etkisini göstermeye başladı bile! Peki siz sitenizi buna nasıl uyarlayacaksınız? Bu yazıda AMP‘nin basit haliyle fonksiyonlarının ne işe yaradığını, nasıl kurulacağını ve nasıl ölçümleneceğini aktaracağız.

Bunun için hazır mısınız? O halde başlayalım…

AMP Nedir?

2015’in Ekim ayında Google Accelerated Mobile Pages’ı duyurdu. Bu, daha hızlı yüklenen mobil web siteleri oluşturmak için erişilmesi oldukça kolay bir framework. Açık kaynak kodlu bu girişim yayıncıların mobil kullanıcıları için yükleme hızını(dolayısıyla da kullanıcı deneyimini) geliştirirken reklam gelirlerini kaybetmemeleri için kuruldu.

Tecrübeli geliştiriciler bu tarz sonuçları etkili performans düzenlemeleri ile sağlayabilse de yayıncılar genellikle bu tarz yeteneklerden bütçe kısıtlamaları nedeniyle yoksunlar. AMP bu tarz optimizasyonları yaparken asıl önemli olan mobil web deneyimi etkenlerini kaybetmemenizi sağlıyor.

Ayrıca Google ve büyük web şirketleri tarafından kullanılıyor olması da ayrıca büyük fayda sağlıyor.

AMP Nasıl Çalışır?

Asıl amacı mobil web sayfaları oluşturmak için bir framework olan AMP üç basit parçadan oluşuyor:

1. AMP HTML: HTML’in bir alt seti olan bu biçimlendirme dili bir kaç özel set ve özellikle beraber aynı zamanda da birçok kısıtlama getiriyor. Eğer standart HTML konusunda bilginiz varsa, var olan sayfaları AMP HTML’e çevirme konusunda zorluk çekmeyeceksiniz. Daha fazla detay için AMP Project’in gerekli biçimlendirmeler listesine göz atabilirsiniz.

2. AMP JS: Mobil sayfalar için bir JavaScript framework’ü. Çoğunlukla yaptığı şey kaynak yönetimi ve senkronize olmayan sayfa yüklemeleri. Ama klasik JavaScript üçüncü parti bir uygulama olduğu için AMP’de kullanılamıyor.

3. AMP CDN: Kurulumu isteğe bağlı olan bu servis, AMP izinli sayfalarınızı alarak önbellekliyor ve otomatik olarak birkaç performans iyileştirmesi yapıyor.

Web Sitenizi Nasıl AMP’ye Uyarlayacaksınız?

Başlangıç olarak, her alt sayfanızın en az iki versiyonunu bulundurmanız gerekecek: Orijinal versiyon; ki bu genelde kullanıcıların gördüğü sayfa olacak ve bu sayfanın AMP versiyonu.

AMP üçüncü parti JavaScript ve form öğelerine izin vermediği için, potansiyel müşterilerinizin doldurabileceği formlar, sayfa altı yorum bölümü ve kullanmaya alıştığınız başka öğelere sahip olamayacaksınız.

Ayrıca yeni kısıtlamaları karşılaması için sitenizin şablonunu tekrar yazmak zorunda da kalabilirsiniz. Örneğin: AMP içerisindeki bütün CSS dosyaları tek satırda ve 50KB’dan küçük olmalı. Özel fontların yüklemeyi yavaşlatması nedeniyle, bu yüklemenin daha iyi kontrol edilebilmesi için özel bir AMP font uzantısı kullanmanız gerekiyor.

Multimedya doyalarınız özel olarak yapılandırılmalı. Örneğin resimler özel amp-img elementi kullanmalı ve yükseklik – genişlik belirtilmeli(Kurulu olan bir sitedeki görsellerin boyutları önceden belirtilmediyse AMP şablonuna çevirirken bu özellikle bunları düzenlemek size zorluk çıkarabilir). Buna ek olarak, eğer görselleriniz hareketli GIF ise bu araçtan ayrı olan amp-anim extended component’i kullanmanız gerekiyor.

Resimler gibi yerel olarak sunulan videoların HTML5 aracılığıyla yerleştirilmesi için kullanılması gereken özel bir etiket var: amp-video. Web videolarının çoğunda olduğu gibi YouTube videolarını yerleştirebilmek için ise amp-youtube adlı ayrı bir araç kullanmanız gerekiyor.

Ayrıca slaytlarınız ve lightboxlarınız için de yeni araçlar var: amp-carousel ve amp-image-lightbox. Ayrıca Twitter, Facebook, Instagram, Pinterest ve Vine gibi sosyal medya ağlarından dosyaları web sitenize yerleştirirken kullanmanız gereken uzantılar da var.

Bu etiket ve uzantı araçlarının kullanımı zor değil, sadece adım adım ilerlemeniz gerekiyor.

Google (ve bu AMP Project’i destekleyen diğer platoformalar)’ın makalelerinizin AMP versiyonlarını bulmaları için sözü geçen makalenin orijinal versiyonunu düzenlemeniz gerekecek. Sitenizin alt sayfaları AMP sayfaları için standart olan aşağıdaki etikete sahip olmalı:

AMP Discovery sayfası aynı zamanda AMP’yi kullanan platfomlardan bazılarının Schema.org meta verilerini kullanmalarının önemli olduğunu belirtiyor. Bu yolla alt sayfanızın içerik tipini belirtebileceksiniz.

Dahası, Schema.org meta verilerinin “içeriğinizin Google Arama’da Haberler sekmesinde ön izlemeli olarak görüntülenmesi için zorunlu” olduğu belirtiliyor. Yani AMP’yi uygulayarak Google’dan gelecekte bir fayda sağlamak istiyorsanız, meta verilerinizin doğru yaptığınızdan emin olun.

AMP İle Reklamlardan Nasıl Para Kazanabilirim?

AdBlocker‘ların yükselen gücü site sahiplerinin para kazanmalarını zorlaştırdı. Bazı kullanıcılara, site hızı arttırdığı için AdBlocker kullanmak çekici geliyor. AMP, bu duruma bir çare olarak görebilir. Hızlandırılmış mobil sayfalar projesinin bir amacı da mobil sitelerin reklamlardan etkili bir şekilde para kazanmasını sağlarken aynı zamanda da kullanıcı odaklı bir yaklaşım sunmak. Bu mantıkla, amaç bir çok reklam formatı, ağı ve teknolojisi için bu proje içerisinde destek sağlanması.

Bunun bir Sonucu olarak, bir çok popüler reklam ağı amp-ad extended component kullanıyor:

• Amazon A9
• AdReactor
• Google AdSense
• AOL AdTech
• Google Doubleclick
• Flite
• Taboola
• Adform
• DotAndAds
• Plista
• Smart AdServer
• Yieldmo

Eğer bunların nasıl göründüğünü merak ediyorsanız, her reklam ağının reklam örneklerini buradan görebilirsiniz.

Eğer kazanç sisteminiz daha kompleks bir yapıya sahipse(ödeme adımları ve abonelikler gibi) bunu AMP içerisine kurmanız için belgeler mevcut. Aynı zamanda da AMP Access uzantısını kullanabilirsiniz.

AMP’de Analitik Araçları Var Mı?

Evet. Hatta AMP’deki analitik araçları oldukça iddialı. Birden fazla analitik aracına web sitenizin performansını ölçümleyip raporlayabilirsiniz. AMP’de analitik için kullanabileceğiniz iki araç var:

• AMP-Pixel Aracı: Bu, basit bir etiketle tıpkı tipik bir takip pikseli gibi GET talebini kullanarak site ziyaretlerini sayıyor. Kullanabileceğiniz bir kaç farklı değişkeni var, mesela DOCUMENT_REFERRER ve Title gibi.

• AMP-Analytics Extended Component: Bu amp-pixel’den biraz daha gelişmiş bir araç. Yapılandırma ve analitik için daha üst seviye bir çözüm sunduğu için büyük ihtimalle seçiminiz bu araçtan yana olacak.

Eğer Google Analytics’i çalışır hale getirmekle uğraşmıyorsanız, amp-analytics seçiminiz olmalı. Gerekli JavaScript kütüphanesini bölümüne ekleyerek sayfanızın bölümü için bir JSON biçimlendirmesini kullanmanız gerekecek.

Eğer AMP içerisindeki Google Analytics hakkında daha fazla bilgi almak istiyorsanız, Google’ın geliştirici sayfasındaki AMP Analytics bölümüne göz atabilir, Analytics’i nasıl kuracağınızı gösteren birkaç örnek bulabilirsiniz.

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

Google, AMP kullanan bir sitenin arama sonuçlarında nasıl görüneceğini gösteren bir örnek sağladı. Bu örneğe mobil cihazınızdan bu adrese giderek ulaşabilirsiniz.

Türkiye’den büyük yayıncılar henüz bu değişikliğe ayak uydurmasa da, The Guardian ve The Washington Post gibi dünya develerinin örnek sayfalarını linklere tıklayarak görebilirsiniz.

WordPress’te AMP’yi Kullanmaya Nasıl Başlarım?

AMP kullanmaya başlamanın en kolay adımlarından biri WordPress web sitelerine kurulumu. Automattic ve WordPress tarafından geliştirilen resmi bir eklenti var ve GitHub üzerinden güncelleniyor.

Adım 1: Resmi WordPress Eklentisini Kurun

Başlamak için, amp-wp Github sayfasına giderek “Download ZIP” butonuna tıklayın. Bu eklentiyi herhangi bir WordPress eklentisini kurar gibi sitenize kurabilirsiniz.

Yükleme işlemi bittikten sonra, yapmanız gereken tek şey herhangi bir makale sayfasına “/amp/” eklemek.

Adım 2: Değerlendirme Ve Kurcalama

Geç olsa bile Google Arama Konsolu alt sayfalarınızın AMP versiyonlarını eklentinin yerleştirdiği rel=”amphtml” etiketi sayesinde bulacaktır. Böylece alt sayfalarınızın toplu halde değerlendirilmesi mümkün olacak. Bununla ilgili tek sorun, en azından benim tecrübeme göre, değişimleri hızlıca görememesi. Eğer bir şeyi düzeltirseniz, bu değişikliğin görülmesi birkaç günü alabilir.

Arama Konsolu ve Chrome değerlendirme sürecini beraber kullanmanızı tavsiye ederim. Chrome değerlendirme sürecini kullanmak için, AMP sayfalarınızdan birine Chrome ile giriş yapın ve URL’nin sonuna “#development=1” yazın. Control + Shift + I kullanarak Chrome Geliştirici Araçları’nı açın ve Console’a geçiş yapın.

Değerlendirme sonucunu görmek için sayfanızı yenilemeniz gerekebilir ama bunu yaptıktan sonra “AMP validation succesful” mesajını veya düzeltmeniz gereken sorunların bir listesini verecektir.

Büyük ihtimalle sadece WordPress eklentisini yüklemek yeterli olmayacak ve AMP’den faydalanmasını istediğiniz tüm sayfaları tek tek inceleyerek düzeltme yapmanız gerekecek.

Al sayfalarınızın nasıl düzenlendiğine bağlı olarak, AMP versiyonlarının geçerli olmasını sağlamak için birkaç değişiklik yapmanız gerekebilir. Karşılaşabileceğiniz sorunlardan zorlayıcı olanları görsellerin yükseklik ve genişlik özelliklerini belirtmek ve https kullanmayan eski YouTube yerleştirmelerini düzeltmekti.

Adım 3: Schema Düzenlemelerini Geçerli Hale Getirme

Önceden bahsettiğim gibi AMP sayfalarınızda Schema.org düzeltmeleri kullanmanız da önemli. Sayfalarınızı geçerli düzeltmeler konusunda kontrol etmek için Google’ın Düzenli Veri Test Aracı’nı kullanabilirsiniz.

Adım 4: Google Analytics’i AMP WordPres Eklentisi İle Kullanılır Hale Getirme

Analitik araçları ile takip edemeyecekseniz bir sitenin ne faydası olabilir? AMP WordPress eklentisi amp-analytics’i kurulumla beraber sunmuyor ama etkinleştirmesi oldukça kolay.

AMP WordPress eklentisinin Google Analytics ile çalışmasını sağlamak için amp-post-tamplate-actions.php dosyasını FTP veya WordPress Başlangıç’ı kullanarak düzenleyin ve aşağıdakini sonuna ekleyin:

add_action( ‘amp_post_template_head’, ‘amp_post_template_add_analytics_js’ ); function amp_post_template_add_analytics_js( $amp_template ) { $post_id = $amp_template->get( ‘post_id’ ); ?>get( ‘post_id’ ); ?>// <?php }

UA-XXXXX-Y’yi Google Analytics kimliğinizle değiştirdiğinizden emin olun.

Şimdi AMP sayfalarınızı tekrar değerlendirmeden geçirin ve WordPress web sitenize temel AMP kurulumunuzla birlikte yerleştirilmiş bir AMP Analytic aracınız olduğunu göreceksiniz.

Sonuç Olarak

AMP mobil web sitelerinin hızını arttırmak için yayıncılar için çok zor olmayan bir yol sunuyor. Sizin bir siteniz var mı? Eğer varsa AMP hakkında düşünemeye başlamalısınız. Çünkü bu şimdilik yeni bir teknoloji olsa da ileride Google’ın sayfalarınızın arama sonuçlarındaki sıralamanızı belirlemesinde en önemli etkenlerden birisi haline gelecek.

Güncelleme: Google Penguin 4.0 Algoritma Güncellemesi ile mobil arama sonuçlarında AMP uyumlu sayfalar artık daha üst sıralarda gösterilmeye başlayacak. Bu güncelleme hakkındaki yazımıza buradan ulaşabilirsiniz.