AMP

AMP, czyli Accelerated Mobile Pages to technologia publikacji treści w internecie skupiona przede wszystkim na użytkowniku. W praktyce, skupia się na prędkości ładowania treści na urządzeniach mobilnych oraz (teoretycznie) niskim zużyciu zasobów.

Logo AMP
Logo AMP

Czym jest AMP?

Z jednej strony jest to po części modyfikacja języka kodowania stron – strony tworzone w AMP HTML mają elementy i atrybuty nieobecne w standardowych stronach HTML. Z drugiej strony jest to też framework, ponieważ zapewnia użytkownikom gotowe komponenty do tworzenia stron (np. accordion, social sharing, carousel etc.). W końcu jest to też technologia publikacji, odgórnie narzucająca pewne elementy (jak np. lazy load), dla której np. Google stosuje zupełnie odmienne zasady prezentacji witryny użytkownikowi (witryna domyślnie ładowana jest z serwerów cache Google, a nie z naszej domeny).

W Google wyniki AMP oznaczone są charakterystyczną błyskawicą

Pod nazwą AMP większość osób rozumie jeden z elementów technologii AMP jakim są AMP Websites, czyli strony internetowe. Warto jednak wiedzieć, że Accelerated Mobile Pages to nie tylko strony internetowe:

  • AMP Websites – strona internetowa zbudowana w technologii AMP
  • AMP Stories – webowe stories publikowane na stronie internetowej, coś a’la stories w social media
  • AMP Ads – serwowanie lekkich i szybkich reklam w technologii AMP
  • AMP Email – dynamiczne e-maile w technologii AMP

O ile AMP jest technologią służąca do budowy powyższych produktów, pod pojęciem AMP wielu rozumie pierwszy z nich, czyli AMP Websites. AMP dla wielu to po prostu strona zrobiona w AMP.

W dużym skrócie dla kompletnych laików:

Strony w AMP mają na celu znacznie szybsze ładowanie, poddane są pewnym restrykcjom (np. nie mogą zawierać niektórych efektów wizualnych czy animacji), domyślnie w wynikach wyszukiwania ładują się z adresu Google.com, a nie z naszej domeny.

Korzystają z gotowych komponentów, ale można je prawie dowolnie ostylować. Możliwe jest wdrożenie tylko częściowe (np. tylko działu newsów), lub całościowe. Możliwe jest również zbudowanie całej strony w AMP, lub współistnienie dwóch wersji strony (AMP i klasycznej).

Jak wdrożyć AMP

Jeśli chcesz korzystać z dobrodziejstw AMP, musisz niestety przepisać dużą część swojego HTML-a. Nawet skorzystanie z gotowych rozwiązań (np. wtyczki do Twojego CMSa) nie wyklucza, że potrzebne będą manualne poprawki.

Oto podstawowy szkielet strony wykonanej w technologii AMP:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Tworzenie stron w AMP to nie tajemna sztuka. Właściwie są to normalne strony w HTML, które posiadają kilka różnic w składni i kilka zakazów.

Co musi się znaleźć na stronie AMP?

Strona w AMP musi obowiązkowo posiadać następujące elementy:

<!doctype html>

Standardowa deklaracja informująca przeglądarkę, że przeglądany dokument to dokument HTML.

<html ⚡>

lub

<html amp>

Informuje, że dokument jest dokumentem w technologii AMP.

<body>

<head>

Elementy opcjonalne w standardowym HTMLu, w AMP są obowiązkowe.

<meta charset="utf-8">

Deklaracja kodowania znaków obowiązkowo wystąpić musi jako pierwszy element w sekcji <head>.

<script async src="https://cdn.ampproject.org/v0.js"></script>

Wywołanie bibliotek AMP w sekcji <head>.

<link rel="canonical" href="URL">

Obowiązkowy link kanoniczny do wersji standardowej (HTML), lub wskazanie linku kanonicznego na samego siebie, jeśli strona nie ma dwóch wersji i wykonana jest tylko w AMP.

<meta name="viewport" content="width=device-width,minimum-scale=1">

Ustawienie viewportu dla zapewnienia responsywności strony.

 

To tyle. Tyle wystarczy, by Twoja strona zyskała gustowną błyskawicę przy wynikach wyszukiwania i była pełnoprawną stroną AMP.

Większym problemem jest jednak nie to, co strona musi mieć, lecz to czego mieć nie może.

Jakie są ograniczenia w kodzie?

<script>

Elementem niedozwolonym jest tag script, chyba że jako typ podamy application/ld+json lub text/plain. Nic więc nie stoi na przeszkodzie (a nawet jest to wskazane), by umieścić w kodzie dane strukturalne w formacie JSON-LD.

Tagu tego możemy również używać do ładowania komponentów AMP i wywoływania samego głównego skryptu AMP – w pozostałych przypadkach jest on zakazany.

<img>

W AMP umieszczanie grafik odbywa się za pomocą odpowiednika tagu img, czyli <amp-img>. Różnic między tymi tagami jest kilka, ale najważniejsza jest taka, że amp-img wymaga podania dokładnego wymiaru grafiki jeszcze przed załadowaniem – ratio szerokości do wysokości musi być znane już w momencie renderowania.

Warto też pamiętać, że amp-img, w przeciwieństwie do klasycznego tagu img wymaga również tagu zamykającego </amp-img>.

<iframe>, <video>, <audio>

Na podobnej zasadzie jak w przypadku tagu <img>, swoje odpowiedniki mają również powyższe tagi: amp-iframe, amp-video, amp-audio.

<form>

Przesyłanie formularzy nie jest zakazane, należy jednak pamiętać o konieczności załadowania biblioteki amp-form. Niedozowolone są elementy: <input[type=image]>, <input[type=button]>, <input[type=password]>, <input[type=file]>.

Inne zakazane tagi HTML:

<base>

<picture>

<object>

<embed>

Co z CSS?

CSS jest dozwolony bez większych ograniczeń, z jednym dużym ale. Niedozwolone jest ładowanie plików z arkuszami CSS. Oznacza to, że cały kod CSS musi się znaleźć w sekcji head, lub po prostu inline jako atrybut style.

Wyjątek stanowią zewnętrzne arkusze stylów customowych fontów.

Zupełnie niedozwolone – niezależnie od sposobu umieszczenia na stronie – jest użycie important w kodzie CSS.

Wersja kanoniczna AMP czy strona w całości w AMP?

Wdrożyć AMP można na dwa główne sposoby – np. stworzyć wersję AMP i używać jej równolegle z wersją „klasyczną” tak, jak kiedyś wiele serwisów wprowadzało oddzielne wersje mobilne.

Dokładnie te same argumenty co w przypadku wersji mobilnych przemawiają jednak za tym, by tworzyć stronę od razu w całości w technologii AMP.

Jeśli zdecydujemy się utrzymywać dwie wersje strony, będziemy mniej podatni na zmiany i ewentualne problemy techniczne związane z AMP. Z drugiej strony jest to bardziej czasochłonne i wymaga większej dyscypliny pracy.

Wykonanie strony w całości w AMP ułatwia proces i eliminuje zagrożenie powstania duplicate content, ale skazuje nas nieco na usterki techniczne, szczególnie, gdy korzystamy z gotowych pluginów AMP.

Jak wdrożyć AMP na WordPressie i Woocommerce?

Wbrew pozorom jest to bardzo łatwe zadanie, jeśli nasz WordPress jest wykonany zgodnie ze sztuką i nie ma wielu zakodowanych na sztywno w templatce funkcji.

Godny polecenia jest darmowy plugin AMPforWP. Na czystym, lub niezmodyfikowanym zbytnio WordPressie, AMP działa od razu i nie generuje żadnych błędów.

Po wstępnym ustawieniu opcji najbardziej czasochłonne okazuje się często wybranie odpowiedniego wyglądu.

Jeśli nie przypadnie nam do gustu żadna z 3-4 templatek dostępnych w darmowej wersji, możemy stworzyć własną doinstalowując darmowy dodatek AMP Theme Framework (będący rodzajem startowej templatki do edycji) lub dokupić dodatek AMP Layouts.

Jeśli masz kłopoty z tym pluginem, napisz do mnie, postaram się pomóc.

Dla kogo jest AMP?

Tu również odpowiedź jest prosta: nie dla każdego. AMP prawdopodobnie znacznie przyspieszy Twoją stronę, ale nie znaczy to, że wystrzeli ona natychmiast w wynikach Google.

AMP powinieneś na pewno rozważyć, jeżeli:

  • myślisz w ogóle o pojawieniu się w Google News lub Google Discover
  • większość Twojego ruchu na stronie pochodzi z mobile
  • borykasz się z problemem wolnego ładowania strony i nie masz pomysłu jak go rozwiązać
  • z jakichś powodów chcesz obniżyć swój bounce rate

AMP to raczej nie jest technologia dla stron na których ważny jest wodotryskowy wygląd – portfolio, czy internetowe CV może sobie AMP darować. Innymi słowy, wszędzie tam, gdzie JavaScript odpowiada za efekty wizualne, lub kluczowe funkcjonalności strony, AMP będzie kulą u nogi.

Jeśli też np. prowadzisz stronę na WordPressie i masz zainstalowane 60 wtyczek z widocznymi na frontendzie elementami, czeka Cię wiele wieczorów spędzonych na rozwiązywaniu konfliktów. Nawet proste wtyczki od formularzy kontaktowych sprawią, że strona nie zwaliduje się jako poprawna strona AMP.

Historia i popularność AMP

  • Październik 2015: ogłoszenie projektu przez Google
  • Luty 2016: AMP po raz pierwszy pojawiło się w SERPie Google, w sekcji Top Stories.
  • Wrzesień 2016: strony AMP w standardowych wynikach wyszukiwania na mobile
  • Wrzesień 2016: AMP pojawia się w aplikacji Bing
  • Luty 2016: zaledwie w rok po premierze AMP zdobywa 7% ruchu wśród topowych wydawców treści w USA
  • Maj 2017: wg Google, ponad 900 000 domen serwuje wyniki AMP
  • Czerwiec 2017: AMP pojawia się w aplikacji Twitter
  • Wrzesień 2018: Bing wprowadza własny AMP cache

Tyle historii. Mamy początek 2020 roku i AMP używane jest obecnie w przypadku 0,07% stron internetowych.

Nie jest to porażający odsetek, ale ciekawy jest poniższy wykres:

https://w3techs.com/technologies/details/ml-amp

W przypadku AMP, znacznie większy odsetek (niż w przypadku HTML) stron, które go używają, to strony o wysokim ruchu.

AMP a SEO

Nie spodziewajmy się niesamowitych efektów SEO po wdrożeniu AMP. Jest to technologia przyspieszająca znacznie naszą witrynę (w większości wypadków). Tylko tyle i aż tyle. Jest to tylko jeden z czynników rankingowych, który zrealizować można także innymi metodami.

Jestem w trakcie przeprowadzania kilku case’ów dotyczących AMP vs SEO. Choć za wcześnie na ostateczne konkluzje, wstępny wniosek jest prosty: AMP pomogło tam, gdzie do tej pory był problem z prędkością. Tam gdzie prędkość ładowania była akceptowalna, AMP pozostało właściwie bez wpływu na pozycje.

Z drugiej strony, bez AMP trudno dziś znaleźć się w takich miejscach jak Google News. Brak wpływu na SEO nie jest więc tak oczywisty – wszystko zależy od rodzaju witryny, jaką prowadzimy.

Ale i tak, jeśli prowadzisz ecommerce i chcesz wydać ostatnie pieniądze na wdrożenie AMP – nie rób tego.

Krytyka AMP

Naukowcy z amerykańskiego Northwestern University obliczyli, że średnio strony AMP ładują się 2,5 razy szybciej bez pre-renderingu w SERPie i aż 9 razy szybciej z pre-renderingiem.

To fakt oparty na niezależnym badaniu. Jednak prędkość to nie wszystko i technologia AMP stale krytykowana jest za swoje większe lub mniejsze grzeszki.

Przede wszystkim zarzuca się Google’owi wykorzystywanie pozycji monopolisty i dyktatorskie podejście do tego jak strony mają być budowane i monetyzowane.

Ponieważ większość stron AMP serwowana jest z serwerów Google sprytnie nazwanych AMP Cache, korporacja staje na pozycji władcy internetu, decydującego kto i co może umieścić w sieci. I to pomimo faktu, że możliwe jest już serwowanie wyników AMP w Google z własnej domeny oraz faktu, że teoretycznie AMP jest projektem open source.

Problemem jest też pre-rendering stron AMP w wynikach wyszukiwania Google – zużywa on zasoby i transfer użytkownika i loguje tę aktywność, mimo iż użytkownik mógł wcale nie być daną stroną zainteresowany.

Problemem jest też monetyzacja serwisów. Reklamy w AMP są ustandaryzowane i prawie niemożliwe jest zarabianie na customowych, nietypowych jednostkach reklamowych.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *