AMP Nedir? SERP ve SEO’yu Geliştirmeye Yardımcı Olur mu?

» » AMP Nedir? SERP ve SEO’yu Geliştirmeye Yardımcı Olur mu?

6 dakikada okuyabilirsiniz

google-amp-nedir

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-istatistik
AMP sayfalarda harcanan süre 2 katına çıkıyor.

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.

AMP yeniliklerinden bir örnek vermek gerekirse Story;

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.

  1.       Eklentiyi indirin ve yükleyin, (mutlaka sitenizin yedeğini alın)
  2.       Eklentiyi etkinleştirin,
  3.       AMP ayarları bölümünden sitenize özel AMP logo vs. ayarlarınızı yapın hepsi bu kadar.
amp-eklentisi
AMP eklenti ayarları.

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;

amp-top-stories
AMP etiketine sahip haber sitelerinin mobil SERP’teki gösterimi.

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.

amp-sonuc
AMP geçişi sonuçları örneği. %70’lik organik trafik artışının %50’si AMP’den geliyor.

E-ticaret sitelerinden geçiş yapan var mı diye sorarsanız Myntra geçtiğini açıklamıştı. (Türkiye’de geçen varsa belirtebilirsiniz, aklıma gelmiyor şuanda)

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.

hurriyet-amp-ornegi
Hürriyet’in AMP & Responsive örneği tasarımlar benzer. (Bende reklam çıkmamış 🙂 )

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.

analytics-amp
AMP sayfalardaki analytics kodunu mutlaka test edin ve ziyaretçilerinizi izleyin.

İ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;

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.

amp-test
AMP test sonucu.

Sonucun SERP’te nasıl gözükeceğini görmek için  “Arama Sonucu Önizle” butonuna tıklayın;

amp-onizleme
AMP’nin SERP görüntüsü.

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.

video-ux-amp
Videonun içeriği okurken devam etmesi. Resim: SearchEngineLand

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-sc
AMP sayfaların SC’deki yeri.

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.

amp-hata-search-console
AMP ekranı.

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-tarama
Son tarama tarihine SC’den bakabilirsiniz.

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://webmaster-tr.googleblog.com/2017/11/yuksek-kaliteli-amp-sayfalar-ile.html

https://moz.com/blog/accelerated-mobile-pages-whiteboard-friday

https://blog.amp.dev/

Samet Özsüleyman Samet Özsüleyman, SEO Uzmanı olarak çalışmaktadır. Aynı zamanda İstatistikçi olan Samet; sıcak çikolatayı, yapısal verileri ve tarihi çok sevip, boş zamanlarında Netflix'ten bişeyler izlemektedir. Çeşitli alanlarda SEO çalışmalarını sürdürmektedir.
Samet Özsüleyman Samet Özsüleyman, SEO Uzmanı olarak çalışmaktadır. Aynı zamanda İstatistikçi olan Samet; sıcak çikolatayı, yapısal verileri ve tarihi çok sevip, boş zamanlarında Netflix'ten bişeyler izlemektedir. Çeşitli alanlarda SEO çalışmalarını sürdürmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir