AMP

AMP'yi uygulamanıza entegre etme

Important: this documentation is not applicable to your currently selected format email!

Bu kılavuz, AMP sayfalarını entegre etmek ve onlara bağlantı vermek isteyen mobil ve web uygulaması geliştiricileri içindir. Örneğin, kullanıcılarına daha hızlı bir deneyim sağlamak için paylaşılan bir URL'nin AMP sürümünü yükleyen bir mobil sohbet uygulamasını düşünelim.

Bağlantıları AMP'ye çevirme

AMP ile harici web sitelerini yerel veya mobil web uygulamanızda neredeyse anında oluşturmak mümkündür. Bunu, içeriğinizdeki URL'leri onlara karşılık gelen AMP URL'leriyle (varsa) eşleştirerek ve orijinal sürüm yerine AMP sürümünü açarak gerçekleştirebilirsiniz. Size yardımcı olması için Google'ın AMP URL API'si gibi araçları kullanabilirsiniz.

Örneğin, aşağıdaki mesaj, tüm URL'leri onlara karşılık gelen AMP sürümleriyle değiştirerek (varsa) AMP sürümlerini sunmak üzere dönüştürülebilir. Yükleme süresini azaltmak ve geçerli AMP'nin sunulduğundan emin olmak için AMP Önbelleğinde önbelleğe alınmış AMP sayfalarına bağlantı vermelisiniz.

Orijinal mesaj:

This is a message with links to an <a href="http://www.example.org/a">
article with AMP version</a> and an <a href="http://www.example.org/b"> article without AMP version</a>.

Dönüştürülmüş mesaj:

This is a message with links to an <a href="https://www-example-org.cdn.ampproject.org/c/www.example.org/a">
article with AMP version</a> and an <a href="www.example.org/b"> article without AMP version</a>.

İPUCU – Uygulamanızdaki tercih ayarları aracılığıyla kullanıcılara AMP sürümü yerine AMP olmayan sürümü görüntüleme seçeneği sunmayı düşünün.

Bağlantıları dönüştürme yolları

Bağlantıları programlı olarak dönüştürmenin üç yolu vardır:

  1. Yazma zamanı sunucu tarafı (tercih edilen): (tercih edilen): Bir URL'nin yazma zamanında AMP URL'sini Google'ın AMP URL API'si yoluyla getirin ve AMP URL'lerini sunucu tarafında depolayın. Orijinal URL paylaşım için gerekli olabileceğinden her iki URL'yi de istemciye iletin. İstemci tarafı ağ isteği sayısı daha az olduğundan bu önerilen yaklaşımdır. Bu yaklaşımı kullanırken, web siteleri AMP biçimini giderek daha fazla benimsediğinden, AMP sürümleri için düzenli olarak (örneğin günlük) tarama bağlantıları önemlidir.
  2. Okuma zamanı sunucu tarafı (bazı kullanımlar): İçeriği istemcinize göndermeden önce Google'ın AMP URL API'si yoluyla AMP URL'sini getirin. Yukarıda belirtildiği gibi, orijinal URL paylaşım için gerekli olabileceğinden her iki URL'yi (AMP ve AMP olmayan) de istemciye iletin. Bu yöntem düşük çıkış yelpazeli hizmetler için iyidir.
  3. İstemci tarafı (sunucu tarafı mümkün değilse): İstemciden Google'ın AMP URL API'si yoluyla AMP URL'sini getirin. Sunucu tarafı URL dönüşümü mümkün değilse (örneğin, uçtan uca şifreleme kullanan mesajlaşma uygulamaları için) bu yaklaşımı kullanın. Herhangi bir kullanıcı etkileşimi gerçekleşmeden önce, içerik kullanılabilir olur olmaz URL dönüşümünü tetiklediğinizden emin olun.

ÖNEMLİ – Asla kullanıcı etkileşimi sonucunda Google AMP API'si yoluyla AMP URL'leri istemeyin çünkü bu istek, ek bir ağ isteği gerektirdiğinden uygulamanızın performansını düşürür. Bunun yerine yukarıda açıklanan üç yaklaşımdan birini kullanın.

Google'ın AMP URL API'si

Google, AMP URL API'sini sunarak verili bir URL listesine karşılık gelen AMP HTML URL'lerini getirir (resmi belgeleme / demo). URL'lerin standart sürümlerde olması gerekmez. Bir AMP sürümü varsa, yanıt orijinal AMP URL'sini ve Google AMP Önbelleğindeki önbelleğe alınan AMP sayfasının URL'sini içerir.

Örneğin, belirli bir URL listesi için:

{
  "urls": [
    "https://www.example.org/article-with-amp-version",
    "http://www.example.com/no-amp-version.html"
  ]
}

Yanıt gövdesi, AMP URL eşlemesini JSON biçiminde içerir:

{
  "ampUrls": [
    {
      "originalUrl": "https://www.example.org/article-with-amp-version",
      "ampUrl": "https://www.example.org/article-with-amp-version/amp",
      "cdnAmpUrl": "https://www-example-org.cdn.ampproject.org/c/s/www.example.org/article-with-amp-version"
    }
  ],
  "urlErrors": [
    {
      "errorCode": "NO_AMP_URL",
      "errorMessage": "AMP URL not found.",
      "originalUrl": "http://www.example.com/no-amp-version.html"
    }
  ]
}

NOT – Google Dışı AMP Önbelleklerinde önbelleğe alının AMP sayfalarının URL'leri, AMP URL API'si yoluyla getirilemez. Ancak, döndürülen AMP URL'sinden (ampURL) önbelleğe alınan URL'yi kolayca türetebilirsiniz.

AMP Önbelleklerini Kullanma

AMP Önbelleği geçerli AMP belgelerini sunmayı amaçlayan proxy tabanlı bir içerik teslim ağıdır (CDN). AMP Önbellekleri aşağıdaki amaçlarla tasarlanmıştır:

  • Yalnızca geçerli AMP sayfaları sunmak.
  • AMP sayfalarının verimli ve güvenli şekilde önceden yüklenmesini sağlamak.
  • İçerik konusunda kullanıcı için faydalı performans iyileştirmeleri sunmak.

Şu ana iki AMP Önbellek sağlayıcısı vardır:

Bu durum bir uygulamada AMP dosyasını göstermek için kullanılabilecek aşağıdaki iki seçeneği sunar:

  1. yayıncının barındırdığı sürüm
  2. AMP Önbelleğinde barındırılan sürüm

Aşağıdaki nedenlerle AMP Önbelleğini kullanmanızı tavsiye ediyoruz:

  • Daha hızlı yükleme süresi ve düşük gecikme süresi sayesinde daha iyi kullanıcı deneyimi (>1sn daha hızlı yükleme süresi).
  • İstemciye bağlı nesnelerin ek önbelleğe alınması sayesinde performans ve bant genişliği avantajları; örneğin istemcinin görünüm penceresi boyutuna bağlı olarak aynı görüntünün farklı sürümlerinin önbelleğe alınması.
  • Orijinal AMP dosyası artık geçerli bir AMP olmayabilir ve bu da kötü bir kullanıcı deneyimine yol açabilir. Bu durumda, AMP Önbelleği AMP dosyasının en son geçerli sürümünü sunar.
  • Çok düzgün çalışmayan bir yayıncı, AMP Önbellek gezginine ve kullanıcılarına iki farklı belge sunabilir. AMP Önbelleğini kullanmak, kullanıcıların daima Önbellek olarak aynı AMP dosyasını görmesini sağlar.

[tip type = "important"] ÖNEMLİ - AMP sayfalarını AMP Önbelleği aracılığıyla sunarken, AMP'nin kaynağını açıkça gösteren ve kullanıcılara standart URL'yi paylaşma olanağı sunan bir görüntüleyici deneyimi sağlayın (bu konu hakkında daha fazlası için aşağıdaki iki bölüme de bakın).

AMP Görüntüleyicisi Ekleme

AMP Çalışma Zamanı, kendisi ile Görüntüleyici arasında mesaj gönderme ve alma amaçlı bir protokol sunan bir Görüntüleyici API'si sunar. Bu API, AMP belgelerinin önceden oluşturulmasını, makaleler arasında kaydırmayı ve AMP Çalışma Zamanı izlemesini kontrol etmeye olanak verir. AMP sayfalarına AMP Görüntüleyicilerini bağlama kılavuzunda AMP Görüntüleyici API'si hakkında daha fazla bilgi edinebilirsiniz. Web ve iOS için görüntüleyici uygulamalarını GitHub'da bulabilirsiniz. Henüz bir Android görüntüleyicisi yoktur, AMP sayfalarını göstermek için bir WebView'i nasıl en iyi şekilde yapılandırabileceğinizi görmek için Stack Overflow'daki şu yanıta bakın.

Burada bir AMP Görüntüleyicisi eklemek için en iyi uygulamaları bulabilirsiniz:

  • AMP sayfasını AMP Önbelleğinden sunun (>1sn daha hızlı yükleme süresi).
  • Makalenin yayıncı kaynağını gösterin (örneğin daraltılabilir başlıkta).
  • Bir paylaşma eylemi sağlayın (ayrıca aşağıdaki "AMP İçeriği Paylaşma" bölümüne de bakın).
  • webView tabanlı görüntüleyicilerde, üçüncü taraf çerezlerini etkinleştirin.
  • Platformunuz/uygulamanız için bir yönlendirici ayarlayın.

AMP İçeriği Paylaşma

Bir AMP belgesini platformun AMP Görüntüleyicisi içinden paylaşırken, platform teknik olarak mümkün olduğunda standart URL'yi paylaşmalıdır. Örneğin, platformda bir paylaş düğmesi varsa, bu düğmenin standart URL'yi paylaşması gerekir.

AMP Projesi'nin felsefesine göre platformlar kullanıcıya bir belgenin hangi sürümünü sunacağını seçebilmelidir. Bu nedenle, URL'yi farklı bir platformda paylaşırken standart sürümü (AMP sürümü yerine) paylaşmak ve daha sonra hedef platformun doğru seçimi yapmasını beklemek en mantıklısıdır.