AMP
TR
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский 中文 Polski Tiếng việt

AMP HTML Teknik Özellikleri

AMP HTML, belirli temel performans özelliklerini garanti edecek şekilde haber makaleleri gibi içerik sayfaları yazmayı sağlayan bir HTML alt kümesidir.

HTML'nin bir alt kümesi olarak, HTML aracılığıyla kullanılabilen tüm etiketlere ve işlevlere bazı kısıtlamalar getirir, ancak yeni işleme motorlarının geliştirilmesini gerektirmez: var olan kullanıcı aracıları, AMP HTML'yi tıpkı diğer tüm HTML'ler oluşturabilir.

Öncelikli olarak AMP'de nelere izin verildiği ve neyin yasak olduğu ile ilgileniyorsanız, AMP sınırlamaları hakkındaki ana videomuzu izleyin.

Ayrıca, AMP HTML belgeleri bir web sunucusuna yüklenebilir ve diğer herhangi bir HTML belgesi gibi sunulabilir; sunucu için özel bir konfigürasyona gerek yoktur. Bununla birlikte, bu belgeler isteğe bağlı olarak AMP belgelerine proxy sağlayan özel AMP sunum sistemleri aracılığıyla sunulacak şekilde tasarlanmıştır. Bu sistemler belgeleri kendi kök dizinlerinden sunar ve ek performans faydaları sağlayan belge dönüştürmeleri uygulamalarına izin verilir. Böyle bir sunum sisteminin yapabileceği optimizasyonların tam kapsamlı olmayan listesi aşağıda sunulmuştur:

  • Görüntü referanslarını, izleyicinin görüntü alanına göre boyutlandırılmış görüntülerle değiştirme.
  • Ekranın üst kısmında görünen satır içi görüntüler.
  • Satır içi CSS değişkenleri.
  • Genişletilmiş bileşenleri önceden yükleme.
  • HTML ve CSS'yi küçültme.

AMP HTML, bir AMP HTML belgesinde bulunabilecek görüntü galerileri gibi gelişmiş işlevleri uygulamak için katkı olarak eklenmiş ancak merkezi olarak yönetilen ve barındırılan bir dizi özel öğe kullanır. Bu öğe dizisi, belgenin özel CSS kullanılarak stilize edilmesine izin verirken, belgenin performans hedeflerine ulaşması için özel öğeler aracılığıyla sağlananın ötesinde yazar tarafından oluşturulmuş JavaScript'e izin vermez.

İçerik üreticileri AMP biçimini kullanarak AMP dosyalarındaki içeriği taranmaya (robots.txt kısıtlamalarına tabi olara), önbelleğe alınmaya ve üçüncü taraflarca görüntülenmeye uygun hale getiriyor.

Performans

Tahmin edilebilir performans, AMP HTML için temel bir tasarım hedefidir. Öncelikle, bir sayfanın içeriğinin kullanıcı tarafından tüketilmesine / kullanılmasına kadar geçen süreyi azaltmayı hedefliyoruz. Somut bir ifadeyle bu şu anlama geliyor:

  • Belgenin işlenmesi ve tam olarak düzenlenmesi için gerekli HTTP istekleri en aza indirilmelidir.
  • Resimler veya reklamlar gibi kaynaklar, yalnızca kullanıcı tarafından görülme olasılığı yüksekse indirilmelidir.
  • Tarayıcılar, ilgili kaynağı getirmeden sayfadaki her kaynak için ihtiyaç duyulan alanı hesaplayabilmelidir.

AMP HTML biçimi

Örnek belge 

<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>Sample document</title>
    <link rel="canonical" href="./regular-html-version.html" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <style amp-custom>
      h1 {
        color: red;
      }
    </style>
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Article headline",
        "image": ["thumbnail1.jpg"],
        "datePublished": "2015-02-05T08:00:00+08:00"
      }
    </script>
    <script
      async
      custom-element="amp-carousel"
      src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
    ></script>
    <script
      async
      custom-element="amp-ad"
      src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"
    ></script>
    <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
    >
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src="sample.jpg" width="300" height="300"></amp-img>
    </p>
    <amp-ad
      width="300"
      height="250"
      type="a9"
      data-aax_size="300x250"
      data-aax_pubname="test123"
      data-aax_src="302"
    >
    </amp-ad>
  </body>
</html>

Gerekli işaretleme

AMP HTML belgelerinde şunlar ZORUNLUDUR:

  • <!doctype html> belge türü ile başlamak. 🔗
  • üst düzey bir <html ⚡> etiketi içermek ( <html amp> de kabul edilir). 🔗
  • <head> ve <body> etiketleri içermek (bunlar HTML'de isteğe bağlıdır). 🔗
  • AMP HTML belgesinin normal HTML sürümüne veya böyle bir HTML sürümü yoksa kendi kendisine işaret eden bir <link rel="canonical" href="$SOME_URL"> etiketi başlık (head) bölümünde içermek. 🔗
  • başlık (head) etiketinin ilk alt öğesi olarak bir <meta charset="utf-8"> etiketi içermek. 🔗
  • head (başlık) etiketlerinin içinde bir <meta name="viewport" content="width=device-width"> etiketi içermek. Ayrıca minimum-scale=1 ve initial-scale=1 dahil edilmesi önerilir. 🔗
  • head (başlık) etiketlerinin içinde bir <script async src="https://cdn.ampproject.org/v0.js"></script> etiketi içermek. 🔗
  • head (başlık) etiketinde AMP ortak metin kodunu ( head > style[amp-boilerplate] ve noscript > style[amp-boilerplate] ) içermek. 🔗

Meta veriler

AMP HTML belgelerinin standartlaştırılmış meta verilerle açıklanması önerilir: Açık Grafik Protokolü, Twitter Cards vb.

Ayrıca, AMP HTML belgelerinin schema.org/CreativeWork veya schema.org/NewsArticle veya schema.org/BlogPosting gibi daha spesifik türlerinden herhangi biriyle işaretlenmesini öneririz.

HTML Etiketleri

HTML etiketleri, AMP HTML'de değiştirilmeden kullanılabilir. Bazı etiketlerin özel eşdeğer etiketleri varken ( <img> ve <amp-img> gibi) bazı etiketler tamamen yasaktır:

Etiket AMP HTML'deki durum
script Tür application/ld+json , application/json veya text/plain olmadığı sürece yasaktır. (Gerektiğinde diğer yürütülebilir olmayan değerler eklenebilir.) Genişletilmiş bileşenleri yüklemek için AMP çalışma zamanını ve komut dosyası etiketlerini yüklemek için zorunlu komut dosyası etiketi bir istisnadır.
noscript İzin verilir. Belgenin herhangi bir yerinde kullanılabilir. Belirtilirse, JavaScript kullanıcı tarafından devre dışı bırakılmışsa <noscript> öğesinin içindeki içerik görüntülenir.
base Yasaktır.
img amp-img ile değiştirilir.
Lütfen unutmayın: <img>, HTML5'e göre bir Boş Öğedir, bu yüzden bir kapama etiketi yoktur. Ancak,<amp-img> bir kapatma etiketine sahiptir </amp-img>.
picture Yasaktır. fallback özniteliğini kullanarak farklı resim biçimleri sunun ya da <amp-img> üzerinde çoklu srcset ekleyin.
video amp-video ile değiştirildi.
audio amp-audio ile değiştirildi.
iframe amp-iframe ile değiştirildi.
frame Yasaktır.
frameset Yasaktır.
object Yasaktır.
param Yasaktır.
applet Yasaktır.
embed Yasaktır.
form İzin verilir. amp-form uzantısının dahil edilmesi gerekir.
giriş öğeleri Çoğunlukla izin verilir, ancak bazı giriş türlerinde istisnalar vardır, yani <input type="button">, <button type="image"> geçersizdir. İlgili bazı etiketlere de izin verilir: <fieldset>, <label>
button İzin verilir.
style amp-boilerplate için gerekli stil etiketi . Özel stil oluşturmak amacıyla başlık (head) etiketinde ek bir stil etiketine izin verilir. Bu stil etiketi, amp-custom özniteliğine sahip olmalıdır. 🔗
link microformats.org'da kayıtlı rel değerlerine izin verilir. Beyaz listemizde bir rel değeri eksikse, lütfen bir sorun konusu gönderin . stylesheet ve tarayıcıda yan etkileri olan preconnect , prerender ve prefetch gibi diğer değerlere izin verilmez. Beyaz listedeki yazı tipi sağlayıcılarından stil sayfalarını getirmek için özel bir durum eklenmiştir.
meta http-equiv özniteliği, izin verilen belirli değerler için kullanılabilir; ayrıntılar için AMP doğrulayıcı teknik özelliklerine bakın.
a href öznitelik değeri javascript: ile başlamamalıdır. Ayarlandığı takdirde, target öznitelik değeri _blank olmalıdır. Aksi halde izin verilir. 🔗
svg Çoğu SVG öğesine izin verilir.

Doğrulayıcı uygulamaları, yukarıdaki etiketler kaldırılarak HTML5 teknik özelliklerine dayalı bir beyaz liste kullanmalıdır. AMP Etiketi Eki'ne bakın.

Yorumlar

Koşullu HTML yorumlarına izin verilmez.

HTML öznitellikleri

on ile başlayan öznitelik isimlerine (örneğin onclick veya onmouseover) AMP HTML'de izin verilmez. Tek başına on isimli özniteliğe (hiçbir sonek olmadan) izin verilir.

xmlns, xml:lang, xml:base ve xml:space gibi XML ile ilgili özniteliklere AMP HTML'de izin verilmez.

AMP HTML'de i-amp- ön ekine sahip dahili AMP özniteliklerine izin verilmez.

Sınıflar

AMP HTML'de -amp- ve i-amp- ön ekine sahip dahili AMP sınıf adlarına izin verilmez.

amp- ön ekine sahip sınıf adlarının anlamı için AMP belgelerine bakın. Bu sınıfların kullanımına izin verilir ve AMP çalışma zamanı ve uzantılarının bazı özelliklerinin özelleştirilmesine izin verilmesi amaçlanır.

AMP HTML işaretlemesinde diğer tüm özel olarak oluşturulmuş sınıf adlarına izin verilir.

Kimlikler

AMP HTML'de -amp- ve i-amp- ön ekli kimlikler gibi, dahili AMP kimlikleriyle çakışabilecek belirli kimlik adlarına izin verilmez.

amp-access gibi uzantıların sunduğu özelliklerle çakışmayı önlemek için amp- ve AMP kimliklerini kullanmadan önce bu uzantılara dair AMP belgelerine göz atın.

Burada mandatory-id-attr araması yaparakizin verilmeyen kimlik adlarının tam listesini görüntüleyin.

Bağlantılar

javascript: şemaya izin verilmez.

Stil sayfaları

Büyük semantik etiketler ve AMP özel öğeleri, duyarlı bir belge oluşturmayı makul ölçüde kolaylaştırmak için varsayılan stillerle birlikte gelir. Varsayılan stilleri devre dışı bırakma seçeneği gelecekte eklenebilir.

@ kuralları

Aşağıdaki @ kurallarına stil sayfalarında izin verilir:

@font-face, @keyframes, @media, @page, @supports.

@import öğesine izin verilmez. Gelecekte diğerleri eklenebilir.

Yazar stil sayfaları

Yazarlar, belgenin başlığında veya satır içi stillerde tek bir <style amp-custom> etiketi kullanarak bir belgeye özel stiller ekleyebilir.

@keyframes kurallarına <style amp-custom> içinde izin verilir. Ancak, sayıları fazlaysa, bunların AMP belgesinin sonunda yer alması gereken ek <style amp-keyframes> etiketine yerleştirilmesi önerilir. Ayrıntılar için bu belgenin Ana Kareler stil sayfası bölümüne bakın.

Seçiciler

Yazar tarafından oluşturulan stil sayfalarındaki seçiciler için aşağıdaki kısıtlamalar geçerlidir:

Sınıf ve etiket adları

Yazar tarafından oluşturulan stil sayfalarındaki sınıf adları, kimlikler, etiket adları ve öznitelikler -amp- ve i-amp- dizesiyle başlayamaz. Bunlar, AMP çalışma zamanı tarafından dahili kullanım için ayrılmıştır. Buna göre, kullanıcının stil sayfası -amp- sınıfları, i-amp- kimlikleri ve i-amp- etiketleri için CSS seçicilere ve özniteliklere başvuramaz. Bu sınıflar, kimlikler ve etiket/öznitelik adlarının yazarlar tarafından özelleştirilmesi amaçlanmamıştır. Ancak yazarlar, amp- sınıflarının stillerini ve bu bileşenlerin teknik şartları tarafından açıkça yasaklanmayan tüm CSS özellikleri için etiketlerini geçersiz kılabilir.

Özellik seçicilerin sınıf adı sınırlamalarını aşmak üzere kullanılmasını önlemek için CSS seçicilerinin -amp- ve i-amp- ile başlayan belirteçler ve dizeler içermesine genellikle izin verilmez.

Önemli

!important niteleyicisinin kullanımına izin verilmez. Bu, AMP'nin öğe boyutlandırma değişmezlerini uygulamasını sağlamak için zorunlu bir gerekliliktir.

Özellikler

AMP yalnızca genel tarayıcılarda GPU ile hızlandırılabilen özelliklerin geçişlerine ve animasyonlarına izin verir. Şu anda aşağıdakileri beyaz listeye alıyoruz: opacity, transform (ayrıca -vendorPrefix-transform).

Aşağıdaki örneklerde <property> yukarıdaki beyaz listede yer almalıdır.

  • transition <property> (ayrıca -vendorPrefix-transition)
  • @keyframes name { from: {<property>: value} to {<property: value>} } (ayrıca @-vendorPrefix-keyframes)

En büyük boyut

Yazar stil sayfası veya satır içi stillerin birlikte 75.000 bayttan büyük olması bir doğrulama hatasıdır.

Ana kareler stil sayfası

Yazarlar, <style amp-custom> etiketine ek olarak, özellikle ana kare animasyonları için izin verilen <style amp-keyframes> etiketini de ekleyebilir.

<style amp-keyframes> etiketi için aşağıdaki kısıtlamalar geçerlidir:

  1. Yalnızca belgenin <body> öğesinin son alt öğesi olarak yerleştirilebilir.
  2. Yalnızca @keyframes , @media , @supports kuralları ve bunların kombinasyonunu içerebilir.
  3. 500.000 bayttan büyük olamaz.

<style amp-keyframes> etiketinin var olmasının nedeni, animasyon karesi kurallarının orta derecede karmaşık animasyonlar için bile genellikle hantal olmasıdır, ki bu da yavaş CSS ayrıştırmasına ve ilk içerikli boyamaya neden olur. Ancak bu tür kurallar genellikle <style amp-custom> üzerinde uygulanan boyut sınırını aşar. Bu tür animasyon karesi bildirimlerini <style amp-keyframes> içinde belgenin altına koymak, boyut sınırlamalarını aşmalarına olanak tanır. Ve bunu yapmak, ana kareler sayfa oluşturmayı engellemediğinden, bunları ayrıştırmak için ilk içerikli boyamanın engellenmesini de önler.

Örnek:

<style amp-keyframes>
@keyframes anim1 {}

@media (min-width: 600px) {
  @keyframes anim1 {}
}
</style>
</body>

Özel yazı tipleri

Yazarlar, özel yazı tipleri için stil sayfaları ekleyebilir. Desteklenen 2 yöntem, beyaz listedeki yazı tipi sağlayıcılarına bağlantı veren link etiketleri ve @font-face ekleme işlemedir.

Örnek:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Tangerine"
/>

Yazı tipi sağlayıcıları, yalnızca CSS entegrasyonlarını destekliyorsa ve HTTPS üzerinden hizmet veriyorsa beyaz listeye alınabilir. Aşağıdaki kaynaklara şu anda bağlantı etiketleri aracılığıyla yazı tipi sunulmasına izin verilmektedir:

  • Fonts.com: https://fast.fonts.net
  • Google Fonts: https://fonts.googleapis.com
  • Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com
  • Typekit: https://use.typekit.net/kitId.css (kitId öğesini uygun şekilde değiştirin)

UYGULAYICILAR NOT: Bu listeye ekleme yapmak, AMP Önbelleği CSP kuralında bir değişiklik gerektirir.

Yazarlar, kendi özel CSS'leri yoluyla bir @font-face CSS talimatı aracılığıyla tüm özel yazı tiplerini eklemekte özgürdür. @font-face aracılığıyla eklenen yazı tipleri, HTTP veya HTTPS şeması aracılığıyla getirilmelidir.

AMP çalışma zamanı

AMP çalışma zamanı, her AMP belgesinin içinde çalışan bir JavaScript parçasıdır. AMP özel öğeleri için uygulamalar sağlar, kaynak yüklemesini ve önceliklendirmeyi yönetir ve isteğe bağlı olarak geliştirme sırasında kullanılmak üzere AMP HTML için bir çalışma zamanı doğrulayıcısı içerir.

AMP çalışma zamanı, AMP belgesi <head> etiketindeki zorunlu <script src="https://cdn.ampproject.org/v0.js"></script> etiketi aracılığıyla yüklenir.

AMP çalışma zamanı, herhangi bir sayfa için bir geliştirme moduna yerleştirilebilir. Geliştirme modu, gömülü sayfada AMP doğrulamasını tetikler ve bu işlem, doğrulama durumunu ve JavaScript geliştirici konsoluna yönelik tüm hataları gösterir. Geliştirme modu, sayfanın URL'sine #development=1 eklenerek tetiklenebilir.

Kaynaklar

Resimler, videolar, ses dosyaları veya reklamlar gibi kaynaklar, <amp-img> gibi özel öğeler aracılığıyla bir AMP HTML dosyasına eklenmelidir. Bunlara "yönetilen kaynaklar" diyoruz çünkü bunların yüklenip yüklenmeyeceğine ve kullanıcıya ne zaman görüntüleneceğine AMP çalışma zamanı tarafından karar verilir.

AMP çalışma zamanının yükleme davranışına ilişkin belirli bir garanti yoktur, ancak genellikle kaynakları yeterince hızlı yüklemeye çalışmalıdır, kullanıcı mümkünse bunları görmek istediği zaman, yüklenmiş olmalıdırlar. Çalışma zamanı, şu anda görünüm alanında bulunan kaynaklara öncelik vermeli ve görünüm alanındaki değişiklikleri tahmin etmeye ve kaynakları buna göre önceden yüklemeye çalışmalıdır.

AMP çalışma zamanı, herhangi bir zamanda, halihazırda görünüm alanında olmayan kaynakları kaldırmaya veya genel RAM tüketimini azaltmak için iframe'ler gibi kaynak kapsayıcılarını yeniden kullanmaya karar verebilir.

AMP Bileşenleri

AMP HTML, <img> ve <video> gibi yerleşik kaynak yükleme etiketlerini değiştirmek ve resim lightbox'ları veya döngüler gibi karmaşık etkileşimli özellikleri uygulamak için "AMP bileşenleri" adı verilen özel öğeler kullanır.

Desteklenen bileşenlerle ilgili ayrıntılar için AMP bileşen teknik özelliklerine bakın.

Desteklenen 2 tür AMP bileşeni vardır:

  1. Yerleşik
  2. Genişletilmiş

Yerleşik bileşenler her zaman bir AMP belgesinde bulunur ve <amp-img> gibi özel bir öğeye sahiptir. Genişletilmiş bileşenler, belgeye açıkça dahil edilmelidir.

Ortak öznitelikler

layout, width, height, media, placeholder, fallback

Bu öznitelikler bir öğenin yerleşimini tanımlar. Buradaki temel amaç, herhangi bir JavaScript veya uzak kaynak indirilmeden önce alanının uygun şekilde rezerve edilebilmesini ve öğenin görüntülenebilmesini sağlamaktır.

Yerleşim sistemi hakkında ayrıntılar için AMP Yerleşim Sistemine göz atın.

on

on özniteliği, öğelerde olay işleyicisi yüklemek için kullanılır. Desteklenen olaylar, öğelere bağlıdır.

Sözdiziminin değeri, formun etki alanına özgü basit bir dilidir:

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

Örnek: on="tap:fooId.showLightbox"

methodName atlanırsa, varsayılan yöntem öğe için tanımlandığı takdirde çalıştırılır. Örnek: on="tap:fooId"

Belgelendikleri takdirde bazı eylemler argümanlar kabul edebilir. Bağımsız değişkenler, key=value gösteriminde parantezler arasında tanımlanır. Kabul edilen değerler şunlardır:

  • basit tırnak işaretsiz dizeler: simple-value;
  • tırnak işaretli dizeler: "dize değeri" veya 'dize değeri';
  • boole değerleri: true veya false;
  • sayılar: 11 veya 1.1 .

İki olayı noktalı virgülle ayırarak bir öğedeki birden çok olayı dinleyebilirsiniz ;.

Örnek: on="submit-success:lightbox1;submit-error:lightbox2"

AMP Eylemleri ve Olayları hakkında daha fazla bilgi edinin.

Genişletilmiş bileşenler

Genişletilmiş bileşenler, AMP çalışma zamanıyla birlikte gönderilmesi gerekmeyen bileşenlerdir. Bunun yerine, belgeye açıkça dahil edilmelidirler.

Genişletilmiş bileşenler, aşağıdaki gibi belgenin başlığına bir <script> etiketi eklenerek yüklenirler:

<script
  async
  custom-element="amp-carousel"
  src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
></script>

<script> etiketi bir async özniteliğine ve öğe adına referans veren custom-element özniteliğine sahip olmalıdır.

Çalışma zamanı uygulamaları, bu öğelere yer tutucular oluşturmak için adı kullanabilir.

Betik URL'si https://cdn.ampproject.org ile başlamalı ve çok sıkı bir /v\d+/[a-z-]+-(latest|\d+|\d+\.\d+)\.js örüntüsü izlemelidir.

URL

Genişletilmiş bileşenlerin URL'si şu biçimdedir:

https://cdn.ampproject.org/$RUNTIME_VERSION/$ELEMENT_NAME-$ELEMENT_VERSION.js
Sürüm oluşturma

AMP sürüm oluşturma politikasına bakın.

Şablonlar

Şablonlar, dile özgü şablona ve sağlanan JSON verilerine göre HTML içeriğini oluşturur.

Desteklenen şablonlarla ilgili ayrıntılar için AMP şablon teknik özelliklerine bakın.

Şablonlar, AMP çalışma zamanıyla birlikte gönderilmez ve genişletilmiş öğelerde olduğu gibi indirilmeleri gerekir. Genişletilmiş bileşenler, aşağıdaki gibi belgenin başlığına bir <script> etiketi eklenerek yüklenir:

<script
  async
  custom-template="amp-mustache"
  src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"
></script>

<script> etiketi bir async özniteliği içermeli ve şablon türüne referans veren bir custom-template özniteliğine sahip olmalıdır. Betik URL'si https://cdn.ampproject.org ile başlamalı ve çok sıkı /v\d+/[a-z-]+-(latest|\d+|\d+\.\d+)\.js örüntüsünü izlemelidir.

Şablonlar belgede şu şekilde bildirilir:

<template type="amp-mustache" id="template1">
Hello {{you}}!
</template>

type özniteliği gereklidir ve bildirilmiş bir custom-template betiğe referans vermelidir.

id özniteliği isteğe bağlıdır. Bağımsız AMP öğeleri kendi şablonlarını keşfeder. Tipik senaryolar, alt öğeleri arasında veya kimlik ile referans vererek <template> arayan bir AMP öğesini içerir.

Şablon öğesi içindeki sözdizimi, belirli bir şablon diline bağlıdır. Bununla birlikte, şablon dili AMP içinde kısıtlanabilir. Örneğin, "template" öğesine göre, tüm oluşturmaların geçerli, iyi biçimlendirilmiş bir DOM üzerinde olması gerekir. Tüm şablon çıktıları, AMP için geçerli çıktı oluşturulduğundan emin olmak için temizlenir.

Bir şablonun sözdizimi ve kısıtlamaları hakkında bilgi edinmek için şablonun belgelerine bakın.

URL

Genişletilmiş bileşenlerin URL'si şu biçimdedir:

https://cdn.ampproject.org/$RUNTIME_VERSION/$TEMPLATE_TYPE-$TEMPLATE_VERSION.js
Sürüm oluşturma

Daha fazla ayrıntı için özel öğelerin sürümlerine bakın.

Güvenlik

AMP HTML belgeleri, unsafe-inline ve unsafe-eval anahtar kelimelerini içermeyen bir İçerik Güvenlik Politikası ile sunulduğunda hataları tetiklememelidir.

AMP HTML biçimi, her zaman böyle olacak şekilde tasarlanmıştır.

Tüm AMP şablon öğeleri, AMP havuzuna gönderilmeden önce AMP güvenlik incelemesinden geçmelidir.

SVG

Şu anda aşağıdaki SVG öğelerine izin verilmektedir:

  • temel öğeler: "g", "glyph", "glyphRef", "image", "marker", "metadata", "path", "solidcolor", "svg", "switch", "view"
  • şekiller: "circle", "ellipse", "line", "polygon", "polyline", "rect"
  • metin: "text", "textPath", "tref", "tspan"
  • işleme: "clipPath", "filter", "hkern", "linearGradient", "mask", "pattern", "radialGradient", "vkern"
  • özel: "defs" (üstteki tüm alt öğelere burada izin verilir), "symbol", "use"
  • filtre: "feColorMatrix", "feComposite", "feGaussianBlur", "feMerge", "feMergeNode", "feOffset", "foreignObject"
  • ARIA: "desc", "title"

Bu özniteliklerin yanı sıra:

  • "xlink:href": yalnızca "#" ile başlayan URI'lara izin verilir
  • "style"

AMP belge keşfi

Aşağıda açıklanan mekanizma, standart bir belgenin AMP sürümünün var olup olmadığını yazılımın keşfetmesi için standartlaştırılmış bir yol sunar.

Standart bir belgenin alternatif bir temsili olan bir AMP belgesi mevcutsa, standart belge "amphtml" ilişkisine sahip bir link etiketi aracılığıyla AMP belgesine referans vermelidir.

Örnek:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html" />

AMP belgesinin kendisinin, "standart" ilişkiye sahip bir link etiketi aracılığıyla kendi standart belgesine geri referans vermesi beklenir.

Örnek:

<link
  rel="canonical"
  href="https://www.example.com/url/to/canonical/document.html"
/>

(Tek bir kaynak aynı anda AMP ve standart belge ise, standart ilişki kendi kendisine işaret etmelidir - "amphtml" ilişkisi gerekmez.)

AMP tüketen sistemlerle en geniş uyumluluk için, JavaScript'i çalıştırmadan "amphtml" ilişkisini okumanın mümkün olması gerektiğini unutmayın. (Diğer bir deyişle, etiket ham HTML'de bulunmalı ve JavaScript aracılığıyla enjekte edilmemelidir.)