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.
Spis treści
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).
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:
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.
