Konular
[Gizle]Amp Sayfaları Nasıl Yapılır
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 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.
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’ ): ?>//
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.