AMP

Przekonująco, płynnie i błyskawicznie

Z łatwością utwórz pierwsze witryny internetowe użytkowników za pomocą AMP.

Rozpocznij
<amp-sidebar
  id="sidebar"
  layout="nodisplay"
  side="right"" ""left"
</amp-sidebar>

Co to jest
AMP?

Strony internetowe, które są przekonujące, płynnie działają i są ładowane niemal natychmiast

AMP to prosty i niezawodny format sprawiający, że witryna internetowa jest szybka, zorientowana na użytkownika i zarabia pieniądze. AMP zapewnia długoterminowy sukces Twojej strategii internetowej dzięki dystrybucji na popularnych platformach oraz obniżeniu kosztów operacyjnych i rozwoju.

<amp-img class="resp-img"
  alt="Desktop"
  width="550"
  height="368"
  src="images/Desktop.jpeg">
</amp-img>
<style amp-custom>
  .resp-img {
    max-width: 700px;
  }
</style>

Wywołuj wspaniałe doznania użytkowników w całym otwartym Internecie

AMP umożliwia tworzenie witryn internetowych i reklam, które są konsekwentnie szybkie, piękne i mają wysoką skuteczność na różnych urządzeniach i platformach dystrybucji. Wydawcy i reklamodawcy mogą decydować o tym, jak zaprezentować treści, aby podkreślić swoją orientację na użytkownika.

Zrzut ekranu witryny internetowej korzystającej z AMP.
Zrzut ekranu witryny internetowej korzystającej z AMP.
Zachowaj elastyczność i kontrolę oraz zmniejsz złożoność kodu Za pomocą CSS można dostosowywać styl, a dane dynamiczne umożliwiają pobieranie w razie potrzeby najnowszych danych.
Bloki konstrukcyjne zapewniające wydajność działania Utworzenie świetnej witryny internetowej wymaga czasu i pracy. Składniki AMP są już zoptymalizowane pod kątem najlepszej wydajności.
Przyczyń się do zrównoważonego rozwoju w przyszłości, w Internecie otwartym dla wszystkich Projekt AMP to inicjatywa open source, mająca na celu ochronę przyszłości Internetu poprzez zapewnienie lepszego, szybszego i bardziej przyjaznego dla użytkownika działania stron internetowych.
Szybkość strony internetowej poprawia komfort użytkowania i podstawowe wskaźniki biznesowe Strony AMP są ładowane niemal natychmiast — na wszystkich urządzeniach i platformach.
Tworzenie stron AMP jest łatwe You can often convert your entire archive in days – especially when using common CMS like WordPress or Drupal.
AMP można stosować w różnych internetowych punktach kontaktu z klientem Technologia AMP, używana przez globalne platformy, takie jak Google, Bing i Twitter, pozwala zapewnić użytkownikom naturalne w odczuciu działanie na wszystkich platformach, domyślnie wyświetlając strony AMP, jeśli tylko są dostępne.

Dokładamy wszelkich starań, aby poprawić szybkość we wszystkich obszarach. Jeśli załadowanie naszej witryny zajmuje dużo czasu, nie ma znaczenia jak wspaniałe jest nasze dziennikarstwo, niektórzy ludzie opuszczą stronę, jeszcze nim zobaczą, co na niej jest.

David Merrell, starszy menedżer produktu

Przeczytaj historię sukcesu

Składniki AMPHTML

<!DOCTYPE HTML>
<html >
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="hello-world.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-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
  <amp-geo layout="nodisplay">
    <script type="application/json">
      {
        "AmpBind": true
      }
    </script>
  </amp-geo>
  <h1>Hello in <span [text]="country">...</span>!</h1>
  <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">Where am I?</button>
</body>
</html>

Hello
World!

Składniki wbudowane

AMPHTML to HTML z pewnymi ograniczeniami, zapewniającymi niezawodność działania.

Chociaż większość znaczników na stronie AMPHTML to zwykłe znaczniki HTML, niektóre z nich zastępowane są znacznikami specyficznymi dla AMP (patrz także punkt Znaczniki HTML w sekcji Specyfikacja AMP). Te niestandardowe elementy, zwane składnikami AMPHTML, ułatwiają stosowanie typowych wzorców w wydajny sposób.

Znacznik tag amp-img na przykład zapewnia pełną obsługę atrybutu srcset, nawet w przeglądarkach, które jeszcze go nie obsługują. Dowiedz się jak utworzyć pierwszą stronę w AMPHTML.

Strony AMP są wykrywane przez wyszukiwarki i inne platformy za pomocą znacznika HTML. Można mieć wersję strony inną niż AMP i wersję AMP lub tylko wersję AMP.

Serwery AMP Cache

Strony AMP można buforować w celu umożliwienia niemal natychmiastowego ładowania w Internecie. Platformy takie jak Google obsługują serwery AMP Cache, aby umożliwić szybkie ładowanie treści z ich usług.

Google AMP Cache to oparta na serwerach proxy sieć dystrybucji treści, służąca do dostarczania wszystkich ważnych dokumentów AMP. Pobiera strony AMPHTML, buforuje je i automatycznie poprawia działanie strony. W razie korzystania z Google AMP Cache dokument, wszystkie pliki JS i wszystkie obrazy są ładowane z tego samego źródła za pomocą zapewniającego maksymalną wydajność protokołu HTTP 2.0.
Serwery buforujące są również wyposażone we wbudowany system sprawdzania poprawności, który sprawdza, czy strona działa poprawnie i nie jest zależna od zasobów zewnętrznych. System sprawdzania poprawności uruchamia serię asercji sprawdzających, czy znaczniki strony są zgodne ze specyfikacją AMPHTML.

Kolejna wersja walidatora jest dołączana do każdej strony AMP. Wersja ta może rejestrować błędy sprawdzania poprawności bezpośrednio w konsoli przeglądarki podczas wyświetlania strony, co pozwala sprawdzić jak złożone zmiany mogą wpłynąć na działanie i doznania użytkownika.

Poznaj przykładowe realizacje witryn AMP