Hızlandırılmış Mobil Sayfalara Nasıl Başlamalı? ; Google Hızlandırılmış Mobil Sayfalar (AMP, Accelerated Mobile Pages) adındaki projesini başlattı.

bu proje nedir ve bunun ile çalışmaya nasıl başlanmalıdır, bu sorulara bu yazıda cevap arayacağız. İçeriğin ikinci kısmında direk WordPress’e nasıl AMP uygulanacağı anlatılmıştır.

AMP Nedir?

Google 2015 Ekim ayında daha hızlı yüklenen mobil sayfalar oluşturmak için kolay ulaşılabilir bir proje başlattığını belirtti. Proje açık kaynak kodludur ve içerik hazırlayan kişilere içeriğin kalitesinden ödün vermeden kullanıcılara daha hızlı yüklenen içerikler sunmak için oluşturulmuştur.

Deneyimli kullanıcılar bu araç olmaksızın en iyi hız değerleri için sitelerini optimize etmiş olsalar da kaynak yetersizliği nedeniyle sıkça hız konusunda ihmal gerçekleşebilmektedir. AMP mobil kullanımda herhangi bir ödün vermeden hız artışını sunan değimi kolaylıkla gerçekleştirme imkanı sunmaktadır.

Daha hızlı mobil sayfalar hem kullanıcılarınızı memnun edecektir hem de arama motorlarını.

AMP Nasıl Çalışır?

Temel bir AMP yapısı 3 temel unsurdan oluşur.

1 – AMP HTML : HTML’nin bir alt kümesi gibidir, bu yapı normal HTML özelliklerine sahiptir ancak bazı kısıtlara da sahiptir. Eğer normal HTML konusunda bir sorununuz yoksa, AMP HTML ile çalışmaya kolayca adapte olabilirsiniz. Normal HTML’den nasıl ayrıldığı ve gerekli temel yapı hakkında daha fazla bilgi için bu sayfayı inceleyebilirsiniz.

2 – AMP JS : Mobil sayfalar için bir Java Script yapısıdır. Çoğu parça için yürütme ve eş zamanlı olmayan yüklemeyi yönetir. Şunu bilmeniz gerekir üçündü parti JS uygulamaları AMP ile çalışmaz.

3 – AMP CDN : Opsiyonel bir İçerik Dağıtım Ağıdır. AMP ile çalışan sayfaları alır, belleğine alır ve onları için bazı iyileştirme çalışmaları yapar.

Sitenize Nasıl uygularsınız?

Bu uygulamaya yeni başladığınızda sayfanın bir normal hali ve AMP uygulanmış hali olarak en az iki adet sayfa sürümü ile çalışmalısınız.

AMP üçüncü parti JS, sayfa içinde form ve yorum yapılmasına olanak sağlamadığından, bu sayfa türünü kullanmamayı tercih edebilirsiniz. (AMP Form Hack ile AMP uyguladığınız sayfaya form ekleyebilirsiniz.)

Bunun bir diğer sıkıntılı yeri ise mevcut kullandığınız tema üzerinde AMP kısıtları için bazı uyum işlemlerini yapmanız gerekecek gibi duruyor. Örneğin AMP sayfasında tüm CSS dosyaları satır içinde ve toplamda 50 KB değerinden daha küçük olmalıdır. Yükleme kısmını daha iyi kontrol etmek için yazı biçimlerinizi de mevcut AMP yazı biçimlerinde kullanmalısınız.

Medya unsurları özel olarak ele alınmalıdır. Örneğin resimler amp-img yapısında kullanılmalıdır. Bunun yanında Gif dosyaları için de amp-anim kullanmak gerekir.

Resimler gibi siteniz üzerinde barındırdığınız videolar için amp-video yapısını kullanmanız gerekir. Sitenizde barındırmadığınız örneğin Youtube videoları için amp-youtube yapısını kullanmalısınız.

Facebook, resim slaytı, light box gibi bir çok özellik için amp uygulamalarına göz atmanız gerekir. Bunları kullanmak çok zor değildir.

Google gibi arama motorlarının sayfanızın amp sürümünü tanıması için onlara sayfa kodunda bilgi vermeniz gerekir.

<link rel=”amphtml” href=”http://www.siteadresi.com/blog-yazisi/amp/”>

Bu kod ile sayfanın amp kullanan sürümünde olunduğunu belirtebilirsiniz. Sayfayı daha keşfedilebilir yani SEO açısından daha uygun hale getirmek için bu sayfayı ziyaret edebilirsiniz.

AMP sayfaların bir faydası da reklam kullanımı adına olur. Yavaş yüklenen reklamlar, reklam engelleyici programların kullanımını artırır. Hızlı yüklenen reklamlar kullanıcılar için çok bir problem oluşturmaz genelde.

Google MAP Demo sayfasından bu konuda bir demoyu izleyebilirsiniz.

WordPress’e Nasıl Ekleriz?

Eğer yukarıdaki işlem biraz zor gözüktüyse bir Worspress site üzerinden bunu uygulayabilirsiniz. AMP için oluşturulmuş bir WordPress Eklentisi mevcuttur. Bu linkten ilk olarak eklentiyi indirmeniz gerekir. Bu kurulunca AMP uygulamak istediğiniz sayfa adreslerinin sonuna “/amp/” uzantısını eklemeniz gerekir.

Google Arama Konsolu’nda bu ekentiyi kurduktan sonra arma görünümü menüsünün altında hızlandırılmış mobil sayfalar bölümünde sayfaların durumunu görebilirsiniz. Ama eklediğiniz AMP sayfalar hemen bu bölüme düşmeyebilir.

Schema yapısı da sayfalar için oldukça önemlidir, SEO çalışmalarınızda çok yardımcı olacaktır. Sayfalarınızı yapısal veri test aracı ile test edebilir ve hataları düzeltebilirsiniz. Sıkça gözlenen bir hata logonun gözükmemesidir.

Logo sorununu çözmek için WordPress penlinde Eklentiler>Düzenleyici>AMP yolunu izleyiniz.

if ( $site_icon_url ) {
$metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => $site_icon_url,
‘height’ => self::SITE_ICON_SIZE,
‘width’ => self::SITE_ICON_SIZE,
);
}

kodu yerine

$metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => ‘http://domain.com/wp-content/uploads/logo-60.png’,
‘height’ => 60,
‘width’ => 170,
);

bunu ekleyiniz.

Koddaki site adresini düzeltmeyi ve logo boyutunu ayarlamayı unutmayınız.

AMP WordPress eklentisi Google Analytics desteği vermemektedir. Ancak bunun da çözümü vardır. amp-post-template-actions.php dosyasını açarak, bu dosyanın sonuna aşağıdaki kodu ekleyiniz. Koddaki account bölümüne kendi Google Analytics kodunuzu eklemeyi unutmayınız.

Sonuç olarak biraz kısıtlı imkanlarla içerik oluşturma imkanı sunsa da sitenizi hızlandırmak konusunda yardımcı olabilecektir.

WordPress, Joomla CMS Sistemleri İçin…

WordPress ve Joomla gibi popüler CMS sistemlerinde AMP eklentilerini kolaylıkla bulabilirsiniz.