AMP

AMP - definicja

AMP - technologia publikacji treści w internecie z myślą o urządzeniach mobilnych, polegająca na modyfikacji języka HTML i sposobu osadzania skryptów i styli w celu przyspieszenia działania stron.



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

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.


Darmowa oferta SEO Konsultacja i wycena bez żadnych kosztów
Piotr Samojło

Freelancer działający pod marką Audytorium SEO. Jeśli masz pytania, lub szukasz człowieka od SEO i optymalizacji stron, zapraszam do kontaktu.

FAQ


Co to jest 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.

Co musi się znaleźć na stronie AMP?

Obowiązkowe elementy to deklaracja typu dokumentu (HTML AMP), body, head, meta charset, wywołanie bibliotek AMP i określenie viewportu.

Co nie może się znaleźć na stronie AMP?

Na stronach AMP zakazane jest osadzanie własnych skryptów JS i arkuszy stylów, należy używać odpowiedników AMP dla tagów img, iframe, video, form i kilku innych.

Czy AMP musi być wdrożone na całej stronie?

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).

Czy możliwe jest wdrożenie AMP na Wordpressie?

Oczywiście, istnieje w tym celu wiele gotowych wtyczke, jak np. AMPforWP. Na "czystej" instalacji Wordpressa wtyczki działają bez problemu, jednak im więcej zmian i wtyczek posiadasz, tym większa szansa, że strona będzie wymagała poprawek, aby być poprawną stroną AMP.

Czy AMP pomaga w SEO?

Pośrednio tak, ponieważ powinno znacznie przyspieszyć działanie strony. Bez AMP trudno też zaistnieć w kanałach takich jak Google News, czy Google Discover. Jednak nie jest to na pewno złoty środek zapewniający sukces w SEO.

Zostaw komentarz

Twój adres e-mail nie zostanie upuibliczniony Pola wymagabe*

SXO (Search Experience Optimization)

SXO (Search Experience Optimization) to szereg działań, mających na celu zadowolenie użytkownika trafiającego do nas…

2 miesiące temu

HTTP/2

2 miesiące temu

Link dofollow / nofollow

Definicja w przygotowaniu.

3 miesiące temu

Content

3 miesiące temu

Pozycjonowanie

4 miesiące temu

Machine-Readable Entity IDs

7 miesięcy temu

MREID

7 miesięcy temu

Słowa łączące

Czym są słowa łączące w SEO? Słowa łączące (słowa przejściowe, transition words) to wymysł twórców…

8 miesięcy temu

JSON-LD

JSON-LD to metoda zapisu danych strukturalnych za pomocą formatu JSON (JSON to format wymiany danych…

8 miesięcy temu

Ta strona używa cookies.

Polityka prywatności