Google Mobil AMP, Accelerated Mobile Pages kelimelerinin baş harfleri ile, dilimizde Hızlandırılmış Mobil Sayfalar anlamına gelmekte olup mobil cihazlar üzerinden hızlı yüklenerek kaliteli görünüm sağlanan web sayfalarının oluşturulması ile ilgili açık kaynak bir girişimdir.

Bu yazımda sizlere google AMP nedir ve nasıl mobil sayfalar için uygulanabilir, nelere dikkat ederek ilerlememiz gerektiği konusunda yaptığım araştırmalar ve uygulamaları sizlere anlatacağım. Fikir alışverişi ve uygulamalar ile ilerleyeceğiz. AMP uyumlu web sayfaları ile Google arama sonuçlarında özel görünüm özelliklerine sahip olabilirsiniz.

AMP HTML

NEDİR BU GOOGLE AMP ?

AMP web sitelerinin mobil cihazlarda çok daha yüksek hız demek olup github üzerinde halen açı kaynak olarak an be an geliştirilmesini izleyebilir, bilgi ve yeteneğiniz varsa sizde bu geliştirme ekibine katılabilirsiniz. Github üzerinden AMP projesini görüntülemek için buraya tıklayabilirsiniz.

AMP HTML

Google News dahil olmak üzere tüm web siteleri artık mobil uyumu konusunda AMP alt yapısına geçmek durumunda kalıyor. Mobil siteler konusunda, kısa süre içerisinde büyük yer değişimleri beklenmektedir. Bu değişimlerde iyi bir yerde kalabilmek için sitelerin hızlandırılmış mobil sayfalar ile uyumlu hale gelmesi gerekir.

Dünya’nın önde gelen teknoloji şirketleriyle anlaşan AMP, kıs süre içerisinde HTML sayfaların entegresinin tamamlanmış olması düşünülmektedir. Şuana kadar google dışında kullanıcılarına duyuran ve testi tamamlayan başka firma olmadığı gibi bizim için Google’ın bu sistemi kabul etmesi ve webmaster tools üzerinden bildirerek Top Stories with AMP üzerinden bilgi vermesi ile yayın hayatına başlamış oldu. Ayrıca Google’ın AMP sayfalarına ilişkin Google Arama yönergeleri için buraya tıklayabilirsiniz.

GOOGLE AMP ERİŞİMİ ve TEST

Webmaster Tools üzerinden Arama Görünümü > Hızlandırılmış Mobil Sayfalar sekmesine giderek sitenizin AMP ile ilgili tüm işlemlerini takip edebilirsiniz. Tüm hataları ve detayları görebilirsiniz. Yapısal veri aracı üzerinden de web sitenizi test ettiğinizde hataları inceleyebilirsiniz. Yapısal veri aracı üzerinden test etmek için burayı inceleyebilirsiniz.

ŞUANDA NE YAPMALIYIM?

Şuanda beklenen şey, yazılım ekiplerinin bu konuda tüm sistemlerini AMP uyumlu sayfalara göre hazırlamaları, WordPress alt yapısı kullanan kişilerin kullandığı temaların AMP uyumlu sayfalara göre güncellemeleri gerekmektedir. Bu yük şuanda yazılımcılarda olup, yazılımcınızdan temanızı AMP ile uyumlu hale getirmesini talep ederek yeni projelerinizde AMP uyumlu sayfalar talep edebilirsiniz.

NEDEN AMP KULLANMALIYIM?

Google, webmaster tools üzerinden eklediği ve resmi olarak açıkladığı bir araç olup mobil ziyaretçinin artışına bir çözüm olarak, internet bağlantılarını hızlandıramacağına göre yazılımları hızlandırma yöntemi için AMP’yi tercih etti.

AMP Webmaster Tools Görüntüsü

WORDPRESS AMP

Şuanda WordPress için AMP isimli bir eklenti mevcut. AMP sayfası için çok basit bir sistem olup bu eklenti de AMP HTML geliştirildikçe geliştirilecek olup, siteler için basit bir çözüm olacaktır. Ancak şuanda bu eklenti google data testlerinde hata vermekte olup %100 başarılı çalışmamaktadır.

WordPress eklentilerinde AMP araması yaparak eklentiye ulaşabilirsiniz. Eklentiyi aktif ettikten sonra yapmanız gereken hiçbir ayar veya düzenleme yoktur. Direkt olarak içerik sayfanızda sayfa url adresiniz sonuna /amp eklerseniz sonucu görebilirsiniz. Bu sayfaları da google standartlarına göre siz de düzenleyebilirsiniz.

Bu konuda iyi araştırma yapabilecekleri ve uygulayabileceklerini düşündüğüm Themeforest içerisindeki TagDiv ile görüştüm. Newspaper tema lisansım mevcut ve AMP ile ilgili yeni bir güncelleme için araştırma ve çalışmalar yaptıklarını, en kısa sürede temaya entegre edileceğini bildirdiler. Ülkemizdeki temalara uygulanması veya özel yazılımlarda talep edilmesi 2017 yılını aşacak gibi görünüyor.

ÖZEL YAZILIM AMP

Özel yazılım kullanan herkes AMP HTML takip ederek, alt yapılarını AMP HTML standartlarına uygun hale getirmeleri gerekmektedir. An itibariyle AMP HTML geliştirilmeye devam etmekte olup takipçisi olmanızda yarar vardır. Halen sayfa örnekleri hazırlanmaktadır. Github üzerinden AMP projesini takip etmek için buraya tıklayabilirsiniz.

AMP HTML şuan ülkemizde sıralama açısından bir faktör olmadığını ve yakın zaman etkileneceğini de bir gerçek. Şu aşamada beklemek ve AMP HTML gidişatını yakın takip etmek en doğru olan olacaktır. Ben de araştırmalarıma her gün devam ediyorum. Gelişmeler oldukça bu yazım altından sizlere bilgi vermeye devam edeceğim.

GÜNCELLEME 20.04.2016 04:51

Bu sayfanın AMP HTML versiyonunu görmek için buraya tıklayabilirsiniz. Yapısal veri test aracı üzerinden yapacağınız bu sayfanın AMP HTML testinde sayfanın %100 sorunsuz çalıştığını görebilirsiniz. Şuanda AMP eklentisiyle, logo hatası dahil tüm sorunları çözümleyerek %100 çalıştırdım. Sayfaların indeks almasını ve zamanla nelerle karşılaşacağımızı paylaşmaya devam edeceğim.

GÜNCELLEME 28.04.2016 23:40

Aşağıdaki resimde gördüğünüz gibi yaklaşık 1 haftada geldiğim son durum, 40 sayfamın da sorunsuz AMP indekslenmiş olması. Bunu nasıl başardım? Şuanda basit bir AMP eklentisi üzerinde yaptığım ince düzenlemeler ile sorunsuz olarak AMP uyumlu sayfaları hazırlamış bulunmaktayım.

AMP Webmaster Tools Görüntüsü

AMP EKLENTİSİNDEKİ LOGO ve WIDTH HEIGHT HATA ÇÖZÜMÜ

Öncelikle wp-content/plugins/amp/includes yolunu izleyiniz. class-amp-post-template.php dosyasında düzenlemek yapmak için download ediniz. 144. satırdaki kodun altına, şu kodları ekleyerek, logoyu kendi logonuza göre adres ve boyutlarını giriniz.

[quote]$site_icon_url = $this->get( ‘site_icon_url’ );
$metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => ‘http://www.kaantukek.com/wp-content/uploads/2016/04/kaantukek.jpeg’,
‘height’ => ’32’,
‘width’ => ’32’,
);[/quote]

AMP Hata Düzenleme

Yukarıdaki görselde gördüğünüz kod biçimini yakalamalısınız.

GÜNCELLEME 11.06.2017 10:15

Uzun aradan sonra yazıyı güncellemem gerektiğini fark ettim. Tam olarak yazımdan 14 ay sonra, artık AMP daha stabil. Bu nedenle WordPress için AMP kullanımını detaylı olarak anlatacağım.

Öncelikle buradaki adresten WordPress için AMP eklentisini indiriyoruz. Eklentiyi aktif ettikten sonra AMP FOR WP isimli firmanın AMP eklentisi için hazırladığı tema ve modül eklentisini şuradaki adresten indiriyoruz. AMP FOR WP ekibi çok çalışkan ve yardımsever olduğunu söylemeliyim. Yazılımcı ve ekip lideri Ahmed Kaludi, AMP entegre konusunda ve akabinde ekstra modüller ile ilgili çok destek oldu.

2 eklentiyide aktif ettikten sonra menünüzün en sonunda AMP olarak bir menü gelecek. Bu menüden Getting Started sekmesine gidiniz. Aşağıdaki görüntüden de görebildiğiniz gibi bir çok AMP eklentisi ücretli ve lisanslıdır. AMP FOR WP, tamamen ücretsiz olup, AMP sayfalarınızda kullanmak isteyeceğiniz, örnek özel adsense yerleşim eklentisi, email data formları, yıldız oy eklentisi vb modüller ücretlidir.

Bu konuda size bir ipucu vermeliyim. Bu eklentiler alan adına lisanslanmaktadır. AMP FOR WP adresindeki chat bölümü veya contact ( iletişim ) sayfasından bir mesaj gönderin ve eklentiyi almak istediğinizi, ancak çok fazla siteniz olduğunu, sınırsız lisans sağlamalarınız rica edin. Ahmed Türkleri kırmıyor ve her siteniz için ayrı lisans almak yerine, şöyle lisans sağlıyor. NOT: WooCommerce ve Category etiketi kaldırma eklentisi artık ücretsiz indirilebilir.

Yani bu eklenti sınırsız ( süresiz ) tüm sitelerimde kullanabileceğim bir lisans olarak ayarlanmış durumdadır.

General sekmesinden logo dışında birkaç tema ayarınızı yapabilirsiniz. AMP ON PAGE açık olmalı. AMP temasının kullanılabilir olması gerekmektedir. Benim ayarlarım aşağıdaki görselde mevcut.

Homepage sekmesinden ana sayfanızda özel sayfa mevcutsa, görsel thumbnail boyutlarınızı ve NON AMP linkinin açıp kapalı olup olmadığınızı ayarlayabilirsiniz. Tema işlevi ile ilgili birkaç ayarın bulunduğu alandır. Benim ayarlarım aşağıdaki görselde mevcuttur.

Design sekmesinden AMP tema ayarlarınızı belirleyebilir, özel CSS ayarları girebilirsiniz. Design Selector alanından var olan 3 temadan bir tanesini seçmelisiniz. Akabinde seçtiğiniz tema ayarına göre, arama sekmesinin görünüp görünmeyeceği, telefon numarası eklenip eklenmeyeceği ve tema renk seçeneklerini düzenleyebileceksiniz. Açılan sekmenin en üstünde bulunan LAUNCH POST BUILDER ile alt bölümdeki üç temadan seçtiğiniz tema için ayarlama yapabilmektesiniz. Benim tercihim,

Single sekmesinden sosyal iconların görünüp görünmeyeceği, yazıların alıntı olarak gösterilip gösterilmeyeceği, İleri – Geri linklerinin açık olup olmayacağı, yazıların güncellenme tarihinin görünüp görünmeyeceği ve single alanında yazar biyografisinin açık olup olmaması seçenekleri mevcut. Ayrıca en alt bölümde benzer içerikler seçimi yapılabiliyor. Benim single alanı ile ilgili tercihim;

Advertisement sekmesi reklam ayarlarını yapabileceğiniz sekme. Menü sekmesinden AMP menü ayarlarını yapabilirsiniz. Social sekmesi sosyal medya hesaplarınız ile ilgili, SEO sekmesinden site içi seo ayarlarınızı yapmalısınız. Analytics sekmesinde site sayaç bilgilerinizi girerken analytics için tüm kodu değil sadece UA- ile başlayan alanı girmelisiniz. Veya tag manager ile tüm kodları tek yerden yönetebilirsiniz.  Unutmadan Advance Settings için AMP yönlendirmesini aktif etmeyi unutmayınız.

WordPress ve özel sistemleriniz için AMP ile ilgili aklınıza takılan, hataları ve sorunları yorum bölümünden iletirseniz, bildiğim kadarıyla destek / yardımcı olmaya çalışacağım.