AMP özellikle ilk çıktığı zamanlarda oldukça popüler oldu. Türkiye’de özellikle AMP’yi haber sitelerinin kullanmasıyla beraber görmeye başladı. Hala daha gelişen ve SERP’e entegre edilen birçok özelliğinin olduğu bir yapı. Yazıda AMP’nin teknik olarak kurulumundan daha çok SEO’da kullanımı ve alakalı konulara değineceğim.
AMP rehberine hazırsanız başlayalım!
AMP Nedir?
AMP (Accelerated Mobile Pages) yani Hızlandırılmış Mobil Sayfalar web site sahipleri için 7 Ekim 2015’te geliştirilmiş açık kaynaklı bir kodlama standardıdır. Temel olarak amacı sayfaların çok daha hızlı açılmasını sağlamaktır.
AMP sayfalarınız hatasız açılıyorsa Google ilgili arama sonuçlarında da sayfanızı gösterecekse sayfasını kendi CDN’inde gösterecektir. Google yerine Cloudflare AMP Cache özelliğini de kullanabilirsiniz.
Masaüstünde yer alan birçok öğenin mobile geçince gereksiz yük oluşturduğu ve özellikle mobil verideyken sayfaların açılışını yavaşlattığı bir gerçek :/
AMP Neden Önemli?
Hareket halindeyken mobil cihazlarda her zaman internetin hızlı olmadığı anlamını taşıyabilir. Bu durumlarda sayfalarınızın mobil sürümlerini AMP ile standartlaştırarak AMP sayfalarınızı kullanıcılara sunarak yavaş hızlarda bile çok rahat içeriğe ulaşmalarını sağlayabilirsiniz.
SEO’da sayfa hızının ne denli önemli olduğunu biliyorsunuz, AMP’nin en önemli avantajlarından birisi bunu size sunabilmesidir. Google AMP’yi SERP’e 20 Eylül 2016 tarihinde eklemeye başladı. Sunucunuza da daha az yük bindirmektedir.
AMP’yi herkes kullanmak zorunda değil; çünkü özellikle kendi kütüphanesinde olmayan bazı Javascript fonksiyonları gibi birçok özelliği desteklemiyor (en azından şimdilik.) Ayrıca basitleştirilmiş düzeyde CSS kullanmanız da gerekiyor.
AMP’de özel Javascript kullanılmasına yeşil ışık Nisan 2019’da gelmişti.
JavaScript is coming to AMP! ? ?
With ‘amp-script’, custom #JS can operate within AMP Documents. Don’t believe us? The animation below was built using AMP Script!
Tune into #AMPConf April 17-18 to learn more and see how it’s done.
More info here ? https://t.co/dWISodWsdI pic.twitter.com/PteziUS11f
— AMP Project (@AMPhtml) 11 Nisan 2019
AMP yeniliklerinden bir örnek vermek gerekirse Story;
AMP Sayfalarda Story dönemi :=) pic.twitter.com/QEMeR02kJL
— Samet Özsüleyman (@sametozsuleyman) 14 Şubat 2018
AMP’de e-ticaret sitenizin mobil sayfalarının AMP için ayrı olarak tasarımının yapılması ve kodlama yapısına geçilmesi zor bir süreçtir. Bunu birçok kişinin yapacağını açıkçası pek sanmıyorum :=) Burada UX’i olumsuz etkileyecek bir değişim dönüşümleri etkileyebilir. E-ticaret sitelerinde blog içeriklerinde AMP’yi kullanmayı düşünebilirsiniz.
AMP Kimin İşine Yarıyor?
En çok içerik tabanlı sitelerin işine yaramaktadır. Mesela benim blogum içerik tabanlı bir site ve bana göre AMP uygun olabilir. Haber siteleri zaten Google News ve Top Stories gibi etkenlerden dolayı AMP’yi kullanıyorlar.
Mesela Twitter’dan verilen bağlatılarda eğer siteniz AMP kullanıyorsa tarayıcı otomatik olarak AMP sayfanızı gösterecektir. AMP’yi her sayfanızda kullanmak zorunda değilsiniz sitenizin belirli bölümlerinde kullanmayı seçebilirsiniz.
AMP WordPress Kurulumu
Özel yazılımlara nazaran hazır CMS WordPress sadece birkaç dakika içerisinde AMP WordPress Eklentisiyle sitenizi AMP’ye çevirebiliyor.
- Eklentiyi indirin ve yükleyin, (mutlaka sitenizin yedeğini alın)
- Eklentiyi etkinleştirin,
- AMP ayarları bölümünden sitenize özel AMP logo vs. ayarlarınızı yapın hepsi bu kadar.
Sayfalarınızın AMP’de nasıl göründüğünü test etmek istiyorsanız sayfanın sonuna /amp yazmanız yeterlidir. Başka bir eklentiyse Yoast SEO sitenizde kuruluysa Yoast AMP eklentisidir.
Dikkat: AMP sayfalarınızda MFI’ye uygun olarak işaretlemelerinizi de eklemeyi unutmayın.
AMP & En Çok Okunan Haberler (Top Stories)
Top Stories’te yer alabilmek ve burada gözükmek ayrı bir konu ve net bir cevabı olmayan konu. Belki ayrı bir makale bile yazabilirim bununla ilgili.
AMP’e sahip haber siteleri Google’da şöyle gözükür;
Top Stories’te yer alabilmek için G-News kayıtlı olmanız gerekmiyor. Burada çıkanlar kadar kaliteli ve teknik gereksinimleri karşılamanız önemli.
AMP’ye Geçince Sonuç Nasıl Olur?
Aynı HTTPS geçişi gibi AMP geçişleri de dikkatli yapılmalıdır. Profesyonelce yapılan geçişler ciddi başarıları da beraberinde getirmektedir. AMP hakkında Case Studies isterseniz ilgili kaynak birçok örneği anlatıyor.
E-ticaret sitelerinden geçiş yapan var mı diye sorarsanız Myntra geçtiğini açıklamıştı.
AMP’ye geçince tasarımınızı da responsive tasarımınıza benzetmeye çalışabilirsiniz bu sayede default tasarımlardan farklı olarak kullanıcıların alıştığı deneyimi sunmayı sürdürebilirsiniz.
Geçişlerde AMP’de Google Analytics’te (veya Adobe) doğru kodları çalıştırmayı ve AMP trafiğinin yönlendirme kısmından değilde organik taraftan gelmesiyle ilgili entegre işlemini yapmanızı öneririm. Doğru verileri daha net anlayabilirsiniz.
İstatistiklerde 2 ay önce 2 ay sonra olmak üzere mevsimselliği de göz önüne alarak karşılaştırınız ve kararınızı veriniz. Burada;
- Hemen çıkma oranı,
- Organik trafik,
- Sayfa görüntülenme sayısı,
- Sayfada geçirilen ortalama süre gibi metriklere bakabilirsiniz.
Önemli: AMP sayfalarınızdaki içerik mobil içeriğinizle büyük ölçüde uyuşmalıdır. Aksi durumda AMP sayfalarınız SERP’te yer almayabilir.
Featured Snippet olarakta AMP sayfalarınız çıkabilir;
Featured Snippets olarak yer alan AMP sayfalarının arama sorgusuyla alakalı bölümünü Google, arka planı turuncu renkte gösterecek şekilde belirtiyor ve direkt olarak o bölüme kaydırıyor. Örnek sorgular: “burun törpüleme nedir”, “sistein içeren besinler” deneyebilirsiniz. pic.twitter.com/DE0zZKA4SA
— Samet Özsüleyman (@sametozsuleyman) 3 Ocak 2019
Google AMP Testi
AMP sayfalarınızın hatalı olup olmadığını https://search.google.com/test/amp adresinden test ederek öğrenebilirsiniz. Burada dilerseniz sitenizin açık URL’sini veya kaynak kodunu yapıştırın ve sayfanızı görün. Testin birkaç dakika sürebileceğini unutmayın.
Sonucun SERP’te nasıl gözükeceğini görmek için “Arama Sonucu Önizle” butonuna tıklayın;
AMP sayfalarınızda Minify kullanmayı da düşünebilirsiniz. Adsense yayıncıları da AMP sayfalarına reklam eklerken özel AMP reklamları eklemeyi düşünebilir.
AMP İçin Bazı Kullanıcı Deneyimi (UX) Önerileri;
Videoyu Küçült: Yazıyı okurken videonun küçük bir şekilde kalmasını sağlayabilirsiniz.
Infinite Scroll: Kategori gibi sayfalarda sonsuz kaydırmayı aktif edin.
Lightbox: Resimlerinizde Lightbox kullanabilirsiniz.
AMP’de kullanılabilecek tüm kodların listesi için buraya bakabilirsiniz.
Google Search Console ve AMP
AMP sayfalarınız varsa Search Console’a kısa sürede yansıyacaktır.
AMP raporunda sayfalarınızda hatalar, uyarılar ve geçerli olan bölümleri görebilirsiniz. Dizine eklenen AMP sayfa sayınızı kontrol altında tutun.
Hataları yazılım ekibinize iletip çözümlerini sağlatın ve doğrulamaları ilgili sorunlar çözüldükten sonra başlatın.
AMP Hataları ve Uyarıları
Hatalardan bazılarını listeliyorum, dediğim gibi lütfen bu sorunları yazılım ekibinize iletin. Daha fazla bilgiyi Github sayfasından öğrenebilirsiniz.
AMP Hataları;
- Bu dokümanda zorunlu bir AMP HTML etiketi eksik.
- AMP HTML Etiketinde, etiketin özellikleri tarafından belirtilen geçersiz bir düzen var.
- Özel JavaScript’e izin verilmiyor.
- Referans verilen AMP URL’si kendi sayfasının standart AMP’si.
- Dokümanın head bölümünde olması kaydıyla sadece amp-boilerplate ve amp-custom “style” etiketlerine izin verilir.
- Yalnızca gövde bölümünün içinde izin verilen etiket veya metin gövde bölümünün dışında bulundu.
- Bu sayfadaki bir etiket için gereken AMP bileşeni komut dosyası etiketi mevcut değil.
- “amp-accordion” etiketinde izin verilmeyen bir alt etiket var.
- HTML etiketinde izin verilmeyen özellik veya özellik değeri bulunuyor.
- “img” etiketinin, eşdeğer “amp-img” etiketiyle değiştirilmesi gerekir.
- “amp-img” etiketinin “src” özelliğinde geçersiz URL protokolü var.
- Referans verilen AMP URL’si AMP sayfası değil.
- “a” etiketinde “href” özelliği için hatalı biçimlendirilmiş URL bulundu.
- Yanlış değer türü.
- Tarama sorunu.
- Bir AMP bileşeni “script” etiketi mevcut ancak kullanılmıyor.
- “on*” olarak da bilinen HTML Etkinlik özelliklerine AMP’de izin verilmiyor. Bunun yerine “amp-bind” özelliğini kullanın.
- amp-experiment-token” etiketi eksik veya yanlış. Ancak bu etiket “amp-script” için gerekli
- “style amp-custom” etiketinde CSS söz dizimi hatası.
- “style amp-custom” etiketinin içindeki metin, izin verilmeyen “CSS i-amphtml- name prefix” metnini içeriyor.
- “style amp-custom” etiketinin içindeki metin, izin verilmeyen “CSS !important” metnini içeriyor.
- “amp-sidebar” etiketinin üst etiketi “body” olmalıdır.
- “amp-img” etiketindeki “src” özelliğine ilişkin URL eksik.
- “path” etiketi yalnızca “svg” etiketinin bir alt öğesi olarak görünebilir.
AMP Uyarıları;
- Bir HTML etiketinde aynı özellik birden fazla kez yineleniyor.
- Dokümanda bir AMP bileşeni “script” etiketi birden fazla kez geçiyor.
- Bir AMP bileşeni “script” etiketi kullanımdan kaldırılmış bir sürüm kullanıyor. Bu AMP bileşeninin daha yeni bir sürümünü kullanın.
- Komut dosyası etiketi, ayrıştırılamayan geçersiz JSON içeriyor.
- Gerekli yapısal veri öğesinde hata.
- Resmin boyutu, önerilen boyuttan daha küçük.
- İçerik uyuşmazlığı: Yerleşik video eksik.
AMP’nin en sinir bozucu yanı kendi kütüphanesindeki kodların sınırlı olması ve geliştiricilerin bunlarla sınırlı olması.
Sonuç;
AMP yazıda da görebileceğiniz üzere sürekli gelişiyor ve değişiyor, gelişmeleri mutlaka yakından takip etmeniz ve hatalarınızı minimum düzeye indirmelisiniz. Bunları yaparken iyi bir yazılımcıyla çalışın. Danışmanlık yaptığım ve kullandığım tüm sitelerde başarılı sonuçların ortaya çıktığını söyleyebilirim. AMP’yi başarılı uygulayarak organik aramalardan daha fazla trafik almak SEO’nun hedefidir. Bunu kim istemez 🙂
Faydalı Bağlantılar;
https://developers.google.com/search/blog/2017/11/engaging-users-through-high-quality-amp
Merhaba, sizinle aşağıda paylaştığım gibi bir hata alıyorum. Yardımcı olursanız çok sevinirim.
En Önemli Hatalar
Hatalar, sayfanızın veya özelliğinizin Arama sonuçlarında görünmesini engelleyebilir. Sitenizde aşağıdaki hatalar bulundu:
Dokümanın head bölümünün dışında etiket bulundu. Bu tür etiketlere yalnızca dokümanın head bölümünün doğrudan alt öğesi olması durumunda izin verilir.
Özel JavaScript’e izin verilmiyor.
“on*” olarak da bilinen HTML Etkinlik özelliklerine AMP’de izin verilmiyor. Bunun yerine “amp-bind” özelliğini kullanın.
Sitenizin Google Arama’da en iyi deneyimi yaşamasını ve en kapsamlı şekilde görünmesini sağlamak için bu sorunları mümkün olduğunda düzeltmenizi öneririz.
Selamlar, JS kodunu AMP’de çalıştırırken hata alıyorsunuz. AMP testine girip hata aldığınız kod kısmını yazılımcı ekibinize aktarır mısınız?
Hocam iyide herkes wp için yazmış özel yazılım siteler ne yapacak? bu amp ye nasıl geçecek? bütün sayfalara manuel olarak el ilemi yapacak? hadi diyelim el ile yapacağız o zaman dinamik oluşturulan sayfaya amp bağlantı etiketini nasıl vereceğiz? herkes wordpress kurulumunu yazmış
Selam,
Özel yazılımmlarda adı üstünde özel olarak tasarlanması gerekiyor. Tüm alt yapıları kapsayan bir rehber hazırlamak biraz zor :/ lakin özel alt yapılarda kaynak kodlarda amphtml gibi temel standartlara uyulursa, aynı yapısal veriler AMP sayfalarda da yer alırsa sorun olmayacaktır.
Adsense tarafından yayınlanan ve siteme ekledikten sonra gelirlerde artış olan AMP için özel reklamları siteye yüklemek için alttaki kodu head kısmına ekledim. Bu koda adsense AMP reklamlarının kitaplığını sisteme yüklüyormuş.
[CODE][/CODE]
AMP reklamlarını da ekledikten sonra altta ki gibi bir hata alıyorum acaba çözümü nedir ?
“Dokümanda bir AMP bileşeni “script” etiketi birden fazla kez geçiyor.”
Selam,
Aynı kodu 2 defa mı eklediniz eklediğiniz kodları kontrol etmelisiniz. Ezbere konuşmak oldukça zor :/
Samet Bey merhaba, Amp ile ilgili sürekli altta belirttiğim hatayı alıyorum bu konu hakkında yardımcı olur musunuz?
HATA: Dokümanın head bölümünün dışında etiket bulundu. Bu tür etiketlere yalnızca dokümanın head bölümünün doğrudan alt öğesi olması durumunda izin verilir.
Selam,
Head kısmında bulunması gereken kod farklı kısma eklenmiş, bir yazılımcıdan destek almalısınız. Ezbere konuşmak oldukça zor.