AMP

Szczegóły techniczne relacji internetowych

Ten przewodnik wyjaśnia wszystkie szczegóły techniczne i najlepsze praktyki, które należy znać, aby z powodzeniem tworzyć relacje internetowe za pomocą AMP.

Prawidłowy AMP

Relacja internetowa to pod względem technicznym pojedyncza strona utworzona przy użyciu AMP i zgodna ze specyfikacją AMP:

  • Zaczyna się od deklaracji <!doctype html>.
  • Zawiera znacznik najwyższego poziomu <html ⚡> albo <html amp>.
  • Zawiera znaczniki <head> i <body>.
  • Zawiera znacznik <meta charset="utf-8> jako pierwszy element podrzędny znacznika <head>.
  • Zawiera znacznik <script async src="https://cdn.ampproject.org/v0.js"></script> w sekcji <head>. Zgodnie z najlepszą praktyką należy dodać skrypt jak najwcześniej w sekcji <head>.
  • Zawiera znacznik <link rel="canonical" href="page/url"> w sekcji <head>, z odsyłaczem href wskazującym adres URL relacji internetowej.
  • Zawiera znacznik <meta name="viewport" content="width=device-width"> w sekcji <head>. Zalecane jest dodanie również właściwości initial-scale=1.
  • Zawiera kod standardowy AMP w sekcji <head>.

Różnica między stroną internetową AMP a relacją internetową utworzoną przy użyciu AMP to składnik amp-story. Jest jedynym bezpośrednim elementem podrzędnym sekcji <body> dokumentu i musi zawierać atrybut standalone. Wszystkie strony, warstwy i elementy relacji internetowej są definiowane w znacznikach <amp-story>.

<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8" />
    <title>Joy of Pets</title>
    <link rel="canonical" href="pets.html" />
    <meta name="viewport" content="width=device-width" />
    <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>
    <script
      async
      custom-element="amp-video"
      src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
    ></script>
    <script
      async
      custom-element="amp-story"
      src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
    ></script>
    <style amp-custom>
      ...;
    </style>
  </head>
  <body>
    <!-- Cover page -->
    <amp-story
      standalone
      title="Joy of Pets"
      publisher="AMP tutorials"
      publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
      poster-portrait-src="assets/cover.jpg"
    >
      <amp-story-page id="cover">
        <amp-story-grid-layer template="fill">
          <amp-img
            src="assets/cover.jpg"
            width="720"
            height="1280"
            layout="responsive"
          >
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>The Joy of Pets</h1>
          <p>By AMP Tutorials</p>
        </amp-story-grid-layer>
      </amp-story-page>

      <!-- Page 1 -->
      <amp-story-page id="page1">
        <amp-story-grid-layer template="vertical">
          <h1>Cats</h1>
          <amp-img
            src="assets/cat.jpg"
            width="720"
            height="1280"
            layout="responsive"
          >
          </amp-img>
          <q
            >Dogs come when they're called. Cats take a message and get back to
            you. --Mary Bly</q
          >
        </amp-story-grid-layer>
      </amp-story-page>
      ...
    </amp-story>
  </body>
</html>

Więcej informacji zawiera samouczek tworzenia pierwszej relacji internetowej i dokumentacja składnika amp-story .

Szczytowa wydajność i komfort użytkowania

Użytkownicy mogą wyświetlać relacje internetowe w miejscach o słabym połączeniu sieciowym lub na starszych urządzeniach. Zapewnij im wystarczający komfort, stosując się do tych najlepszych praktyk.

Kolor tła

Określ kolor tła każdej strony relacji internetowej. Określenie koloru tła zapewni wyświetlenie dobrego zasobu rezerwowego, jeśli warunki użytkownika uniemożliwią pobranie zasobów obrazów lub wideo. Wybierz kolor, który jest reprezentatywny dla dominującego koloru planowanego zasobu tła strony lub użyj spójnego motywu kolorystycznego na wszystkich stronach relacji. Upewnij się, że kolor tła jest inny niż tekst, aby zapewnić czytelność.

Definiuj kolor tła stron w znacznikach <style amp-custom> w sekcji nagłówka dokumentu relacji internetowej lub inline w składniku <amp-story-page>.

Warstwy elementów

W nagłówku systemowym znajdują się elementy sterujące, takie jak ikony wyciszania i udostępniania. Widnieją one w wyższym indeksie porządku osi Z niż obraz tła i wideo. Upewnij się, że ikony te nie zasłaniają żadnych istotnych informacji.

Współczynnik proporcji

Projektuj zasoby relacji internetowych w proporcji 9:16. Wysokość i szerokość strony różni się w zależności od przeglądarki i urządzenia, więc nie umieszczają istotnych treści w pobliżu krawędzi strony.

Obrazy plakatów

Obraz plakatu jest wyświetlany użytkownikowi podczas pobierania wideo. Obraz plakatu powinien być reprezentatywny dla wideo, aby umożliwić płynne przejście. Określ obraz plakatu, dodając atrybut poster do elementu amp-video i wskazując mu lokalizację obrazu.

<amp-video autoplay loop
  width="720" height="1280" layout="responsive"
  poster="images/kitten-playing.png">
  <source src="videos/kitten-playing.mp4"
    type="video/mp4" />
</amp-video>

Wideo

Wszystkie filmy muszą być dodawane za pomocą składnika amp-video.

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

Rozdzielczość i jakość

Koduj wideo, aby dostosować jakość do następujących zalecanych optymalizacji:

MP4 -crf 23
WEBM -b:v 1M

Staraj się nie przekraczać 10 sekund czasu trwania segmentów HLS.

Format i rozmiar

Utrzymuj rozmiar filmów wideo mniejszy niż 4 MB, aby uzyskać optymalną wydajność. Zastanów się nad dzieleniem dużych filmów na kilka stron.

Jeśli możesz zapewniać tylko jeden format wideo, użyj MP4. Jeśli to możliwe, należy użyć wideo HLS i określić plik MP4 jako zasób rezerwowy w celu zapewnienia zgodności z przeglądarkami. Użyj następującego kodeka wideo:

MP4, HLS i DASH H.264
WEBM VP9

Określaj elementy <source>, a nie atrybut src

Aby określić źródło wideo, stosuj elementy podrzędne <source> w składniku <amp-video>, zamiast atrybutu src. Użycie elementu <source> pozwala określić typ wideo i dodać zapasowe źródła wideo. Aby określić typ MIME, musisz użyć atrybutu type. W przypadku filmów HLS użyj atrybutu application/x-mpegurl lub application/vnd.apple.mpegurl. W przypadku wszystkich innych typów wideo należy użyć prefiksu MIME video/, a następnie formatu wideo, na przykład "video/mp4".

<amp-video
  id="video-page1"
  autoplay
  loop
  layout="fill"
  poster="https://example.com/media/poster.jpg"
>
  <source
    src="https://amp-example.com/media/movie.m3u8"
    type="application/vnd.apple.mpegurl"
  />
  <source src="https://amp-example.com/media/movie.mp4" type="video/mp4" />
</amp-video>

Automatyczne przechodzenie dalej po odtworzeniu wideo

Atrybut auto-advance-after eksponowany przez składnik amp-story-page określa, czy i kiedy strona z relacją ma przejść do dalej bez dotknięcia przez użytkownika. Aby przejść do przodu po wideo, należy wskazać w atrybucie identyfikator wideo.

<amp-story-page auto-advance-after="myvideo"></amp-story-page>

Wyświetlanie w poziomie

Format Web Story zapewnia opcjonalne wyświetlanie w poziomie. Zmienia to tryb wyświetlania, zastępując domyślne wyświetlanie w trzech pionowych okienkach i pozwalając użytkownikom mobilnym na oglądanie relacji na urządzeniu trzymanym poziomo.

Włącz obsługę trybu poziomego poprzez dodanie atrybutu supports-landscape do składnika <amp-story>.

<amp-story
  standalone
  supports-landscape
  title="Joy of Pets"
  publisher="AMP tutorials"
  publisher-logo-src="assets/icon.svg"
  poster-portrait-src="assets/cover.jpg"
>
</amp-story>