AMP Başlangıç Rehberi

Bir önceki konumuzda AMP’nin gelişimini ve kullanıcılara ve site sahiplerine sağlayacağı faydadan bahsetmiştik. Bu konuda AMP sayfalarının yapısı ve kodlaması ile ilgili bilgiler vereceğim.

AMP sayfalarımın Google tarafından keşfedilmesini nasıl sağlayabilirim?

Başta Google olmak üzere destek veren arama motorları, başka sayfaların bağlantı veya referans verdiği AMP sayfalarını dizine ekler.

Sayfamızın AMP versiyonunu arama motorlarına bildirmek için HTML meta etiketini HEAD aralığına eklememiz gerekiyor :

Link etiketini Head bölümünün içerisine rel özelliğini amphtml olarak belirtmemiz hali hazırda okunan sayfanın bir amp sürümü olduğu konusunda bilgi verecektir. AMP sürümünün farklı bir URL‘ye sahip olması gerekmektedir. Bu URL adresini ise href özelliği ile belirtiyoruz.

AMP sayfamızın normal sayfamızdan keşfedilmesini sağladık şimdi ilk AMP sayfamızı oluşturalım.

İlk AMP Sayfamı Nasıl Oluşturabilirim?

Herhangi bir html editörünü kullanarak html5 kodlarıyla kolay bir şekilde amp sayfalarınızı oluşturabilirsiniz.

HTML5, javascript ve css3 kodlarına aşina olanlara kodlar oldukça tanıdık gelecektir. AMP sayfaları için gerekli olan kodları maddeler halince incelersek :

  • doctype <!doctype html> ile başlamalıdır.
  • En üst level <html ⚡> etiketi veya <html amp> etiketi ile başlamalıdır.
  • <head> ve <body> etiketlerini içermelidir. (Bu etiketler HTML için opsiyonel etiketlerdir.)
  • AMP sayfasında head bölümünde <link rel="canonical" href="$HTML_URL" /> etiketi bulunmalıdır. Burada $HTML_URL yazan bölüme sayfamızın normal html adresi yazılmalıdır. Böylece sayfamızın AMP olmayan normal HTML URL adresini de bildirmiş olacağız.
  • <meta charset="utf-8"> etiketi head bölümünün ilk alt etiketi olarak eklenmelidir.
  • <meta name="viewport" content="width=device-width,minimum-scale=1"> etiketi head bölümünün içerisinde yer almalıdır. Ayrıca initial-scale=1 parametresinin eklenmesi de tavsiye edilmektedir.
  • <script async src="https://cdn.ampproject.org/v0.js"></script> etiketi head bölümünün son etiketi olarak eklenmelidir. Bu script AMP JS Library kodlarını içermektedir ve sayfaya asenkron yüklenmesini sağlar.
  • <head> bölümüne style etiketi şu şekilde eklenmelidir: <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Google’ın AMP sayfalarını bulup bulmadığını nasıl kontrol edebilirim?

AMP uyumlu sayfalarımızı hazırladık ve link etiketi ile hem amp sayfamızı ve normal sayfalarımızı referans olarak belirttik. Peki Google bu sayfalarımızı fark etti mi, bu kontrolleri sağlamak için Google Search Console üzerinde Hızlandırılmış mobil sayfalar bölümüne göz atabilirsiniz.

Hızlandırılmış Mobil Sayfalar

Hızlandırılmış Mobil Sayfalar Google Search Console

Resimdeki gibi bir sonuç gördüğünüzde Google’ın henüz sitenizdeki AMP versiyonuna sahip sayfaları algılamadığı anlamına gelir. Sonuçların Search console üzerine yansıması için sabırlı olmalısınız. Bu süreç birkaç gün alabilir.

AMP raporu, başarıyla dizine eklenen sayfa sayısını ya da sitenizi Google tarafından taranırken AMP ile ilgili hata bulunan AMP sayfalarının sayısını gösterir. Bağlantı hataları, bozuk bağlantılar ve diğer hatalar bu raporda gösterilmez.  AMP hataları bulunan veya gerekli yapısal veri öğelerini içermeyen sayfalar, AMP ile ilişkili özelliklerin yer aldığı Google arama sonuçlarında gösterilmez.

Google Search Console Hızlandırılmış Mobil Sayfalar (AMP) raporu için yardım dokümanlarını incelemenizi tavsiye ederim.

AMP sayfalarımın Google Arama’da gösterilmeye uygun olup olmayacağını nasıl kontrol edebilirim?

Yalnızca geçerli AMP sayfaları Google Arama’da gösterilmeye uygun olur. Bu yüzden, AMP sayfalarınızın geçerliliğini AMP HTML Web Doğrulayıcısı, Chrome uzantısı veya bir cron işi (cron job) gibi daha otomatik bir süreci kullanarak kontrol edin ve tüm yeni içeriğin geçerli olduğundan emin olun.

AMP sayfalarınızda yapısal verilerin bulunması genel olarak iyi bir uygulama olmakla birlikte (JSON-LD’yi öneririz) bu, özellikle haber yayıncıları için önemlidir. Çünkü, uygun işaretleme özelliklerini içeren haber içerikleri, Google Arama sonuçlarındaki En Çok Okunan Haberler bağlantı bloğunda (En Çok Okunan Haberler karuseli dahil) gösterilebilir. Yapısal verilerinizi Google Yapısal Veri Test Aracı‘nı kullanarak kolayca test edebilirsiniz.

  • Sayfanızın amp versiyonunu tarayınızda açın,
  • URL’nin sonuna “#development=1” hastag’ını ekleyin. Mesala, http://localhost:8000/released.amp.html#development=1
  • Chrome DevTools console‘u açarak hataları denetleyebilirsiniz.
amp validator errors

amp validator ile hataları görelim

Yukarıdaki resimde görüldüğü gibi hatalar görüyorsanız, listelenmiş hataları düzeltmeniz gerekmektedir. Aşağıdaki resimdeki gibi “AMP validation successful” bilgisini görürseniz, sayfanız AMP ile tamamen uyumlu demektir.

amp doğrulama başarılı

AMP doğrulamasının başarılı olduğunu görüntüleyin

AMP Bağlantıları ve Kaynaklar

AMP hakkında daha fazla bilgi edinmeniz amacıyla sizin için kapsamlı bir malzeme ve doküman listesi derledik:

Spesifik sorularınız ve/veya geri bildiriminiz mi var? Bunları çeşitli kanallar aracılığıyla sorabilirsiniz:

Bir cevap yazın

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