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

Specyfikacja AMP HTML

AMP HTML jest podzbiorem języka HTML, służącym do tworzenia stron z treścią, takich jak artykuły informacyjne, w sposób gwarantujący pewne podstawowe cechy wydajnościowe.

W tym podzbiorze języka HTML stosowane są pewne ograniczenia zestawu dostępnych znaczników i funkcji, ale nie wymaga on tworzenia nowych mechanizmów renderujących: istniejące programy użytkownika mogą renderować AMP HTML tak samo, jak każdy inny kod HTML.

Jeśli interesuje Cię przede wszystkim to, co jest dozwolone w AMP, a co nie, obejrzyj nasz film wprowadzający na temat ograniczeń AMP.

Ponadto dokumenty AMP HTML można przesyłać na serwer WWW i serwować tak, jak każdy inny dokument HTML; nie jest wymagana żadna specjalna konfiguracja serwera. Są one jednak zaprojektowane również do opcjonalnego serwowania przez wyspecjalizowane systemy buforujące, które pośredniczą w przesyłaniu dokumentów AMP. Serwery te serwują dokumenty z własnego źródła i mają możliwość stosowania do nich przekształceń, zapewniających dodatkowe korzyści pod względem wydajności. Oto niekompletna lista optymalizacji, jakie może przeprowadzić taki system serwujący:

  • Zastąpienie odsyłaczy do obrazów obrazami o rozmiarach dostosowanych do okienka na ekranie przeglądarki.
  • Obrazy inline, które są widoczne nad treścią.
  • Zmienne CSS inline.
  • Wstępne ładowanie składników rozszerzonych.
  • Minimalizacja kodu HTML i CSS.

AMP HTML wykorzystuje zestaw centralnie zarządzanych i przechowywanych elementów niestandardowych różnych autorów, służących do implementacji funkcji zaawansowanych, takich jak galerie obrazów, które można znaleźć w dokumencie AMP HTML. Zezwala autorowi na stylizowanie dokumentu przy użyciu własnego CSS, ale nie na kod JavaScript, poza kodem dostarczanym przy użyciu elementów niestandardowych w celu osiągnięcia celów wydajnościowych.

Korzystając z formatu AMP, producenci treści udostępniają ją w plikach AMP do indeksowania (z zastrzeżeniem ograniczeń podanych w pliku robot.txt), buforowania i wyświetlania przez podmioty trzecie.

Wydajność

Przewidywalna wydajność jest kluczowym celem projektowania AMP HTML. Dążymy przede wszystkim do skrócenia czasu, po którym użytkownik może korzystać z zawartości strony. Konkretnie znaczy to, że:

  • Należy minimalizować liczbę żądań HTTP niezbędną do wyrenderowania i wygenerowania pełnego układu dokumentu.
  • Zasoby takie jak obrazy lub reklamy należy pobierać tylko wtedy, gdy prawdopodobnie zobaczy je użytkownik.
  • Przeglądarki powinny być w stanie obliczyć miejsce wymagane przez poszczególne zasoby na stronie bez pobierania tych zasobów.

Format AMP HTML

Przykładowy dokument 

<!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>

Wymagane znaczniki

Dokumenty AMP HTML muszą:

  • Zaczynać się od deklaracji <!doctype html>. 🔗
  • Zawierać znacznik najwyższego poziomu <html ⚡> (albo <html amp>). 🔗
  • Zawierać znaczniki <head> oraz <body> (w HTML są one opcjonalne). 🔗
  • Zawierać znacznik <link rel="canonical" href="$SOME_URL"> w sekcji head, wskazujący wersję HTML dokumentu AMP HTML lub sam siebie, jeśli nie ma takiej wersji HTML. 🔗
  • Zawierać znacznik <meta charset="utf-8"> jako pierwszy element podrzędny w sekcji head. 🔗
  • Zawierać znacznik <meta name="viewport" content="width=device-width"> w sekcji head. Zalecane jest również dodanie właściwości minimum-scale=1 i initial-scale=1. 🔗
  • Zawierać znacznik <script async src="https://cdn.ampproject.org/v0.js"></script> w sekcji head. 🔗
  • Zawierać kod standardowy AMP (head > style[amp-boilerplate] i noscript > style[amp-boilerplate]) w sekcji head. 🔗

Metadane

Zalecane jest opatrywanie dokumentów AMP HTML adnotacjami zawierającymi znormalizowane metadane: Open Graph Protocol, Twitter Cards, itd.

Zalecane jest opatrywanie dokumentów AMP HTML adnotacjami zawierającymi znormalizowane metadane: Open Graph Protocol, Twitter Cards, itd.

Znaczniki HTML

Znaczników HTML można używać w AMP HTML bez żadnych zmian. Niektóre znaczniki mają swoje odpowiedniki niestandardowe (takie jak <img> i <amp-img>), a inne są całkowicie zabronione:

Znacznik Status w AMP HTML
script Zabroniony, chyba że typ to application/ld+json, application/json lub text/plain. (W razie potrzeby można dodać inne wartości niewykonywalne). Wyjątek stanowi obowiązkowy znacznik script służący do ładowania środowiska uruchomieniowego AMP i znaczniki script służące do ładowania składników rozszerzonych.
noscript Dozwolony. Może być używany w dowolnym miejscu w dokumencie. Jeśli określony, zawartość wewnątrz elementu <noscript> jest wyświetlana, gdy obsługa JavaScript jest wyłączona przez użytkownika.
base Zabroniony.
img Zastąpiony przez amp-img.
Uwaga: znacznik <img> jest elementem pustym według HTML5, więc nie ma znacznika końca. Znacznik <amp-img> ma natomiast znacznik końca </amp-img>.
picture Prohibited. Serve different image formats by using the fallback attribute or provide multiple srcset on <amp-img>.
video Zastąpiony przez amp-video.
audio Zastąpiony przez amp-audio.
iframe Zastąpiony przez amp-iframe.
frame Zabroniony.
frameset Zabroniony.
object Zabroniony.
param Zabroniony.
applet Zabroniony.
embed Zabroniony.
form Dozwolony. Wymaga dodania rozszerzenia amp-form.
elementy input W większości dozwolone z wyjątkiem niektórych typów, nieprawidłowe są mianowicie typy <input type="button">, <button type="image">. Dozwolone są również znaczniki pokrewne: <fieldset>, <label>
button Dozwolony.
style Wymagany znacznik stylu elementu amp-boilerplate. W głównym znaczniku dozwolony jest Jeden dodatkowy znacznik style do celów stylizacji niestandardowej. Znacznik ten musi mieć atrybut amp-custom. 🔗
link Dozwolone są wartości rel zarejestrowane w microformats.org. Jeśli na naszej białej liście brakuje wartości rel, prześlij zgłoszenie. Niedozwolona jest wartość stylesheet i inne wartości, takie jak preconnect, prerender i prefetch, które mają skutki uboczne w przeglądarce. Szczególny przypadek stanowi pobieranie arkuszy stylów od dostawców czcionek z białej listy.
meta Atrybutu http-equiv można użyć w przypadku określonych dozwolonych wartości; szczegółowe informacje zawiera specyfikacja walidatora AMP.
a Wartość atrybutu href nie może zaczynać się od javascript:. Jeśli jest ustawiony, atrybut target musi mieć wartość _blank. W przeciwnym razie dozwolony. 🔗
svg Dozwolona jest większość elementów SVG.

Znaczników HTML można używać w AMP HTML bez żadnych zmian. Niektóre znaczniki mają swoje odpowiedniki niestandardowe (takie jak <img> i <amp-img>), a inne są całkowicie zabronione:

Komentarze

Warunkowe komentarze HTML są niedozwolone.

Atrybuty HTML

Nazwy atrybutów zaczynające się od on (takie jak onclick lub onmouseover) są niedozwolone w AMP HTML. Atrybut o nazwie literału on (bez przyrostka) jest dozwolony.

Atrybuty związane z XML, takie jak xmlns, xml:lang, xml:base i xml:space są niedozwolone w AMP HTML.

Wewnętrzne atrybuty AMP z prefiksem i-amp- są niedozwolone w AMP HTML.

Klasy

Wewnętrzne nazwy klas AMP z prefiksami -amp- i i-amp- są niedozwolone w AMP HTML.

Dokumentacja AMP zawiera informacje o znaczeniu nazw klas z prefiksem amp-. Stosowanie tych klas jest dozwolone i ma na celu umożliwienie dostosowania niektórych funkcji środowiska uruchomieniowego i rozszerzeń AMP.

Wszystkie inne autorskie nazwy klas są dozwolone w znaczniku AMP HTML.

Identyfikatory

Niektóre nazwy identyfikatorów są niedozwolone w AMP HTML, na przykład identyfikatory z prefiksem -amp- i i-amp-, które mogą powodować konflikty z wewnętrznymi identyfikatorami AMP.

Przed użyciem identyfikatorów amp- i AMP należy zapoznać się z dokumentacją AMP dotyczącą określonych rozszerzeń, aby uniknąć konfliktu z funkcjami zapewnianymi przez te rozszerzenia, takie jak amp-access.

Pełną listę niedozwolonych nazw identyfikatorów można wyświetlić, wyszukując hasło mandatory-id-attr tutaj.

Linki

Schemat javascript: jest niedozwolony.

Arkusze stylów

Główne znaczniki semantyczne i niestandardowe elementy AMP mają style domyślne, dzięki czemu opracowanie responsywnego dokumentu jest stosunkowo łatwe. Opcja rezygnacji ze stylów domyślnych być może zostanie dodana w przyszłości.

Reguły at-rules

W arkuszach stylów dozwolone są następujące reguły at-rules:

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

Reguła @import jest niedozwolona. Inne mogą zostać dodane w przyszłości.

Autorskie arkusze stylów

Autorzy mogą dodawać niestandardowe style do dokumentu za pomocą jednego znacznika <style amp-custom> w sekcji head dokumentu lub za pomocą stylów inline.

Reguły @keyframes są dozwolone w sekcji <style amp-custom>. Jeśli jednak jest ich zbyt wiele, zalecane jest ich umieszczenie w dodatkowym znaczniku <style amp-keyframes>, który musi znajdować się na końcu dokumentu AMP. Szczegółowe informacje znajdują się w sekcji Arkusz stylów keyframes w tym dokumencie.

Selektory

Do selektorów w autorskich arkuszach stylów mają zastosowanie następujące ograniczenia:

Nazwy klas i znaczników

Nazwy klas, identyfikatory, nazwy znaczników i atrybuty w autorskich arkuszach stylów nie mogą zaczynać się od ciągu znaków -amp- ani i-amp-. Są one zarezerwowane do użytku wewnętrznego przez środowisko uruchomieniowe AMP. Wynika z tego, że arkusz stylów użytkownika nie może odwoływać się do selektorów CSS w przypadku klas -amp-, identyfikatorów i-amp- ani znaczników lub atrybutów i-amp-. Te nazwy klas, identyfikatorów i znaczników/atrybutów nie są przeznaczone do dostosowywania przez autorów. Autorzy mogą jednak pominąć style klas i znaczników amp- dowolnych właściwości CSS, które nie są jawnie zabronione przez specyfikację tych składników.

Aby zapobiec stosowaniu selektorów atrybutów do obchodzenia ograniczeń nazw klas, generalnie niedozwolone jest, aby selektory CSS zawierały tokeny lub ciągi znaków rozpoczynające się od -amp- i i-amp-.

Ważne

Używanie kwalifikatora !important jest niedozwolone. Jest to wymóg niezbędny do tego, by AMP mógł wymuszać swoje niezmienniki przekształcenia rozmiarów elementów.

Właściwości

AMP zezwala tylko na przejścia i animacje właściwości, które mogą być akcelerowane przez GPU w popularnych przeglądarkach. Obecnie mamy następującą białą listę: opacity, transform (również -vendorPrefix-transform).

W poniższych przykładach znacznik właściwości <property> musi znajdować się na powyższej białej liście.

  • transition <property> (również -vendorPrefix-transition)
  • @keyframes name { from: {<property>: value} to {<property: value>} } (również @-vendorPrefix-keyframes)

Rozmiar maksymalny

Łączny rozmiar autorskiego arkusza stylów i stylów inline przekraczający 75 000 bajtów danych skutkuje błędem walidacji.

Arkusz stylów keyframes

Oprócz znacznika <style amp-custom>, autorzy mogą również dodawać znacznik <style amp-keyframes>, dozwolony specjalnie w przypadku animacji klatek kluczowych.

Do znacznika <style amp-keyframes> mają zastosowanie następujące ograniczenia:

  1. Można go umieszczać tylko jako ostatni element podrzędny elmentu <body> dokumentu.
  2. Może zawierać tylko reguły @keyframes, @media, @supports i ich połączenia.
  3. Nie może być większy niż 500 000 bajtów.

Powodem istnienia tagu <style amp-keyframes> jest fakt, że reguły klatek kluczowych są często nieporęczne nawet w przypadku umiarkowanie skomplikowanych animacji, co prowadzi do powolnej analizy składni kodu CSS i pierwszego generowania z treścią. Takie reguły często przekraczają jednak limit rozmiaru nałożony na znacznik <style-amp-custom>. Umieszczenie takich deklaracji keyframes na końcu dokumentu w sekcji <style amp-keyframes> pozwala na przekroczenie ograniczeń rozmiarów. Jako że klatki kluczowe nie blokują renderowania, unika się również blokowania pierwszego generowania zawartości w celu ich przeanalizowania.

Przykład:

<style amp-keyframes>
@keyframes anim1 {}

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

Czcionki niestandardowe

Autorzy mogą dołączyć arkusze stylów czcionek niestandardowych. Dwie obsługiwane metody to znaczniki linków wskazujące dozwolonych dostawców czcionek oraz dodanie reguły @font-face.

Przykład:

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

Dostawcy czcionek mogą być wymienieni na białej liście, jeśli obsługują integracje tylko w CSS i serwują je za pomocą protokołu HTTPS. Obecnie dozwolone są następujące źródła serwowania czcionek za pomocą znaczników linków:

  • 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 (należy odpowiednio zamienić kitId)

UWAGA DO IMPLEMENTUJĄCYCH: dodanie do tej listy wymaga zmiany reguły AMP Cache CSP.

Autorzy mogą dołączać wszystkie czcionki niestandardowe za pomocą reguły @font-face w niestandardowym kodzie CSS. Czcionki dołączone za pomocą reguły @font-face muszą być pobierane za pomocą schematu HTTP lub HTTPS.

Środowisko uruchomieniowe AMP

Środowisko uruchomieniowe AMP to JavaScript, który działa wewnątrz każdego dokumentu AMP. Zapewnia on implementacje niestandardowych elementów AMP, zarządza ładowaniem zasobów i nadawaniem priorytetów oraz opcjonalnie zawiera walidatora środowiska uruchomieniowego AMP HTML do użytku podczas tworzenia.

Środowisko uruchomieniowe AMP jest ładowane za pomocą obowiązkowego znacznika <script src="https://cdn.ampproject.org/v0.js"></script> w sekcji <head> dokumentu AMP.

Środowisko uruchomieniowe AMP można umieszczać w każdej stronie w trybie programistycznym. Tryb programistyczny wyzwoli walidację AMP w osadzonej stronie, co spowoduje wyświetlenie statusu walidacji i ewentualnych błędów w konsoli programistycznej JavaScript. Tryb programistyczny można wywoływać poprzez dołączenie parametru #development=1 do adresu URL strony.

Zasoby

Zasoby takie jak obrazy, filmy, pliki audio lub reklamy muszą być włączane do pliku AMP HTML za pomocą elementów niestandardowych, takich jak <amp-img>. Nazywamy je „zasobami zarządzanymi”, ponieważ o tym, czy i kiedy zostaną załadowane i wyświetlone użytkownikowi, decyduje środowisko uruchomieniowe AMP.

Nie ma żadnych szczególnych gwarancji co do sposobu działania ładowania środowiska uruchomieniowego AMP, ale generalnie powinno się w miarę możliwości dążyć do ładowania zasobów na tyle szybko, aby zostały one załadowane do chwili, w której użytkownik chciałby je zobaczyć. Środowisko uruchomieniowe powinno nadać priorytet zasobom aktualnie znajdującym się w okienku na ekranie i starać się odpowiednio przewidzieć zmiany w tym okienku, aby wstępnie załadować zasoby.

Środowisko uruchomieniowe AMP może w dowolnym momencie podjąć decyzję o zwolnieniu z pamięci zasobów, które nie znajdują się obecnie w okienku na ekranie albo ponownie użyć kontenerów zasobów, takich jak ramki iframe, w celu zmniejszenia ogólnego obciążenia pamięci RAM.

Składniki AMP

W AMP HTML używane są elementy niestandardowe, zwane „składnikami AMP”, służące do zastępowania wbudowanych znaczników ładowania zasobów, takich jak <img> i <video> oraz do implementacji funkcji o złożonych interakcjah, takich jak lightboxy czy karuzele.

Szczegółowe informacje o obsługiwanych składnikach zawiera specyfikacja składników AMP.

Obsługiwane są 2 typy składników AMP:

  1. Wbudowane
  2. Rozszerzone

Wbudowane składniki są zawsze dostępne w dokumencie AMP i mają dedykowany element niestandardowy, taki jak <amp-img>. Składniki rozszerzone muszą być jawnie dołączone do dokumentu.

Wspólne atrybuty

layout, width, height, media, placeholder, fallback

Atrybuty te definiują układ elementu. Głównym celem jest tu zapewnienie wyświetlania elementu i odpowiednie zarezerwowane miejsca na niego przed pobraniem kodu JavaScript lub jakichkolwiek zasobów zdalnych.

Szczegółowe informacje na temat systemu rozmieszczania zawiera artykuł System układu AMP.

on

Atrybut on służy do instalowania programów obsługi zdarzeń w elementach. Obsługiwane zdarzenia zależą od danego elementu.

Wartość do składni jest prostym, zależnym od domeny językiem formularza:

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

Przykład: on="tap:fooId.showLightbox"

W razie pominięcia methodName wykonywana jest metoda domyślna, o ile jest zdefiniowana dla elementu. Przykład: on="tap:fooId"

Niektóre działania, jeśli jest to udokumentowane, mogą przyjmować argumenty. Argumenty definiuje się między nawiasami w notacji key=value. Akceptowane są następujące wartości:

  • proste ciągi znaków bez cudzysłowów: simple-value;
  • ciągi znaków w cudzysłowach: "string value" lub 'string value';
  • wartości logiczne: true lub false;
  • liczby: 11 lub 1.1.

Możesz nasłuchiwać wielu zdarzeń w jednym elemencie, oddzielając zdarzenia średnikiem ;.

Przykład: on="submit-success:lightbox1;submit-error:lightbox2"

Dowiedz się więcej o działaniach i zdarzeniach AMP.

Składniki rozszerzone

Składniki rozszerzone nie muszą być dostarczane ze środowiskiem uruchomieniowym AMP. Muszą one natomiast zostać jawnie włączone do dokumentu.

W jednym elemencie można nasłuchiwać wielu zdarzeń, rozdzielając zdarzenia średnikiem ;.

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

Znacznik <script> musi mieć atrybut async i atrybut custom-element, odwołujący się do nazwy elementu.

Implementacje środowiska uruchomieniowego mogą używać nazwy do renderowania elementów zastępczych tych elementów.

Adres URL skryptu musi zaczynać się od https://cdn.ampproject.org i musi być zgodny z bardzo ścisłym wzorcem /v\d+/[a-z-]+-(latest|\d+|\d+.\d+).js.

Adres URL

Adres URL składników rozszerzonych ma postać:

https://cdn.ampproject.org/$RUNTIME_VERSION/$ELEMENT_NAME-$ELEMENT_VERSION.js
Przechowywanie wersji

Patrz zasady przechowywania wersji AMP.

Szablony

Szablony renderują zawartość HTML w oparciu o szablon zależny od języka i dostarczone dane JSON.

Szczegółowe informacje na temat obsługiwanych szablonów przedstawia specyfikacja szablonów AMP.

Szablony nie są dostarczane z środowiskiem uruchomieniowym AMP i muszą być pobierane tak samo jak elementy rozszerzone. Składniki rozszerzone ładuje się poprzez umieszczenie w sekcji head dokumentu znacznika <script> w następujący sposób:

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

Znacznik <script> musi mieć atrybut async i atrybut custom-template odwołujący się do typu szablonu. Adres URL skryptu musi zaczynać się od https://cdn.ampproject.org i musi stosować się do bardzo ścisłego wzorca /v\d+/[a-z-]+-(latest|\d+|\d+\.\d+)\.js.

Szablony deklaruje się w dokumencie w następujący sposób:

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

Atrybut type jest wymagany i musi odwoływać się do zadeklarowanego skryptu custom-template.

Atrybut id jest opcjonalny. Poszczególne elementy AMP odnajdują swoje własne szablony. Typowe scenariusze zakładają, że element AMP szuka szablonu <template> wśród swoich elementów podrzędnych lub wskazanych za pomocą identyfikatorów.

Składnia w elemencie szablonu zależy od języka szablonu. Język szablonu można jednak ograniczyć w AMP. Na przykład zgodnie z elementem "template" wszystkie produkcje muszą znajdować się nad prawidłowym, dobrze sformułowanym modelem DOM. Wszystkie dane wyjściowe szablonów są również poddawane oczyszczaniu, aby zapewnić, że są zgodne z AMP.

Aby dowiedzieć się więcej o składni i ograniczeniach dotyczących szablonu, odwiedź dokumentację szablonu.

Adres URL

Adres URL składników rozszerzonych ma postać:

https://cdn.ampproject.org/$RUNTIME_VERSION/$TEMPLATE_TYPE-$TEMPLATE_VERSION.js
Przechowywanie wersji

Więcej szczegółów można znaleźć w części dotyczącej przechowywania wersji elementów niestandardowych.

Zabezpieczenia

Dokumenty AMP HTML nie mogą wyzwalać błędów, gdy są serwowane zgodnie z zasadami zabezpieczeń zawartości, które nie obejmują słów kluczowych unsafe-inline ani unsafe-eval.

Format AMP HTML jest zaprojektowany w taki sposób, że zawsze tak jest.

Wszystkie elementy szablonu AMP muszą przejść przez kontrolę zabezpieczeń AMP, zanim zostaną przesłane do repozytorium AMP.

SVG

Obecnie dozwolone są następujące elementy SVG:

  • podstawowe: "g", "glyph", "glyphRef", "image", "marker", "metadata", "path", "solidcolor", "svg", "switch", "view"
  • kształty: "circle", "ellipse", "line", "polygon", "polyline", "rect"
  • tekst: "text", "textPath", "tref", "tspan"
  • renderowanie: "clipPath", "filter", "hkern", "linearGradient", "mask", "pattern", "radialGradient", "vkern"
  • specjalne: "defs" (dozwolone są tu wszystkie powyższe elementy podrzędne), "symbol", "use"
  • filtr: "feColorMatrix", "feComposite", "feGaussianBlur", "feMerge", "feMergeNode", "feOffset", "foreignObject"
  • ARIA: "desc", "title"

Jak również te atrybuty:

  • "xlink:href": dozwolone są tylko identyfikatory URI zaczynające się znakiem „#”
  • "style"

Odnajdywanie dokumentu AMP

Opisany poniżej mechanizm zapewnia standardowy sposób, w jaki oprogramowanie sprawdza, czy istnieje wersja AMP dokumentu kanonicznego.

Jeśli istnieje dokument AMP, który jest alternatywną reprezentacją dokumentu kanonicznego, wówczas dokument kanoniczny powinien wskazywać na dokument AMP za pomocą znacznika link z relacją "amphtml".

Przykład:

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

Sam dokument AMP ma wskazywać na swój dokument kanoniczny za pomocą znacznika link z relacją "canonical".

Przykład:

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

(Jeśli jeden zasób jest jednocześnie dokumentem AMP i kanonicznym, relacja kanoniczna powinna wskazywać na siebie — nie jest wymagana relacja "amphtml").

Należy pamiętać, że w celu zapewnienia jak największej kompatybilności z systemami wykorzystującymi AMP możliwe powinno być odczytanie relacji "amphtml" bez wykonywania kodu JavaScript. (To znaczy, że znacznik powinien być obecny w nieprzetworzonym kodzie HTML, a nie wstrzykiwany za pomocą kodu JavaScript).