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
Spis treści
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:
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.
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).
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.
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.
<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>
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.
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.
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.
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:
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.
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.
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.
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.
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.
SXO (Search Experience Optimization) to szereg działań, mających na celu zadowolenie użytkownika trafiającego do nas…
Czym są słowa łączące w SEO? Słowa łączące (słowa przejściowe, transition words) to wymysł twórców…
JSON-LD to metoda zapisu danych strukturalnych za pomocą formatu JSON (JSON to format wymiany danych…
Ta strona używa cookies.
Polityka prywatności