REKLAMA

Czy twoja strona jest gotowa na AMP? Wszystko, co musisz wiedzieć o nowej technologii

Wzrost popularności urządzeń mobilnych wywołał zmiany w prezentowaniu dedykowanych im informacji. Zmuszeni do przeprowadzenia odpowiednich optymalizacji, web deweloperzy i wydawcy poszukiwali odpowiedniej technologii, która ułatwi im to zadanie. Do gry wkroczyła technologia AMP. Czym jest i czego możemy się po niej spodziewać?

22.12.2016 08.56
Czy twoja strona jest gotowa na AMP? Wszystko, co musisz wiedzieć o nowej technologii
REKLAMA
REKLAMA

Czym jest AMP?

AMPprzyspieszone strony mobilne (ang. Accelerated Mobile Pages) to nowy sposób na ułatwienie użytkownikom sieci przeglądania treści na urządzeniach mobilnych, najczęściej smartfonach.

Jak sama nazwa wskazuje, AMP przyspiesza czas ładowania stron internetowych redukując go niemalże do zera.

Projekt jest inicjatywą o charakterze ogólnodostępnym (ang. open source), która powstała w drodze wielu dyskusji pomiędzy deweloperami, wydawcami oraz użytkownikami.

AMP jest złożone z trzech części:

  • AMP HTML
  • AMP JS
  • Google AMP Cache

AMP HTML – jest to praktycznie zwykły HTML, który został rozszerzony o właściwości AMP, jak choćby dedykowane tagi. Dla przykładu używany jest tag amp-img, który dostarcza wsparcia dla atrybutu srcset znacznika nawet w przypadku, gdy przeglądarka go jeszcze nie wspiera. Ponieważ większość kodu to najzwyklejszy HTML, programiści nie powinni mieć większych problemów z wdrożeniem zmian tworząc witryny przystosowane do standardu AMP.

AMP JS – tak zwana biblioteka wydajności. Jest odpowiedzialna za zarządzanie ładowaniem się zasobów zapewniając szybkie renderowanie strony. Wszystko dzięki asynchronicznemu ładowaniu plików zewnętrznych przez co nic się wzajemnie nie blokują umożliwiając bezproblemowy rendering. Poza tym, biblioteka AMP JS zawiera także techniki wydajnościowe, takie jak sandboxing iframe-ów, wstępną kalkulację layoutu każdego elementu na stronie, dzięki czemu wszystko jest zoptymalizowane czasowo.

Google AMP Cache – jest to system bazujący na proxy, który jest odpowiedzialny za dostarczanie wszystkich zweryfikowanych dokumentów AMP. Dzięki magii AMP, witryny wykorzystujące tę technologię mogą być przechowywane w chmurze lub pamięci podręcznej takich firm jak Google i przez to być dostępne dla użytkownika natychmiastowo.

Jednym z głównych powodów istnienia technologii AMP jest obniżenie wskaźnika bounce rate, który zazwyczaj jest skorelowany z wysokimi czasami oczekiwania na załadowanie treści na stronie. Pomimo ograniczenia w stosunku do normalnego HTML (w kwestii prezentowania treści na stronie), AMP sprawia, że wszystko jest o wiele szybsze. Jak bardzo? Średni czas mrugnięcia okiem u człowieka to 0,3 sekundy.

Mediana czasu ładowania stron zgodnych z AMP to 0,7 sekundy, a więc lekko ponad 2 mrugnięcia okiem. WOW! AMP załaduje twoje strony w mgnieniu oka, a użytkownicy będa mieli o jeden powód mniej, by zrezygnować z wizyty.

witaj-swiecie-amp class="wp-image-533573"

Witaj, świecie! - czyli szkielet kodu AMP

Jak zostało wspomniane wcześniej, AMP HTML bazuje na istniejących technologiach webowych, pomimo ograniczania ich w pewnej mierze. Ten przykładowy kod pokazuje niezbędną podstawę by stworzyć witrynę zgodną z AMP.

kod-html-amp class="wp-image-533568"

Jak można zauważyć, istnieje trochę różnic w stosunku do normalnego HTML, np. znak błyskawicy ⚡ w tagu lub zagnieżdżony kod boilerplate specyficzny dla AMP, którego istnienie w kodzie jest nieodzowne. Istnieje wiele innych tagów amp jak na przykład:

  • amp-ad – odpowiada za wyświetlanie reklam w plikach AMP HTML,
  • amp-anim – pozwala na zagnieżdżanie animacji w plikach AMP HTML,
  • amp-analytics – służy do pomiaru aktywności na witrynach AMP,
  • amp-audio – jest zamiennikiem dla tagu audio w HTML5,
  • oraz wiele więcej...

Więcej informacji takich jak kody źródłowe czy instrukcje można znaleźć na serwisie GitHub.

Jeżeli posiadasz stronę opartą na Wordpressie, z pomocą przyjdzie ci wtyczka, dzięki której wdrożenie odpowiednich zmian i przystosowanie witryny do technologii AMP będzie banalnie proste. Wszystko co trzeba zrobić to:

  1. Ściągnąć odpowiednia paczkę z serwisu GitHub i ją zainstalować, co nie powinno przysporzyć zbyt wielu problemów i zająć góra 5 minut.
  2. Aktywować plugin - sprawi, że do wszystkich twoich stron zostanie dodane /amp .
  3. Edycja pliku .htaccess przy pomocy narzędzia FTP (np. Filezilla) w celu upewnienia się, czy wszystko działa jak należy poprzez wklejenie tego kodu. Oczywiście zamiast https://przyklad.com wstawiamy adres swojej domeny.
  4. Edycja CSS przy pomocy FTP (wp-content -> plugins -> amp -> template.php).

Czy jesteś odpowiednio z-AMP-owany?

Pamiętaj, że prawidłowe tagi link rel= są wyjątkowo ważne dla twej witryny. Bez nich twoje materiały w technologii AMP mogą nigdy nie zostać odkryte przez wyszukiwarkę! Ponadto jeżeli udostępniasz materiały w wersji AMP i standardowej, warto uchronić się przed duplikowaniem treści poprzez odpowiednie wykorzystanie linków kanonicznych.

Jeżeli strona jest stworzona w wersji standardowej oraz AMP (dla urządzeń mobilnych), to wersja desktopowa powinna posiadać w swoim kodzie następujący tag:

<link rel="amphtml" href="https://www.example.com/url/to/amp-version.html" />

Z kolei link kanoniczny na twojej stronie AMP powinien wskazywać adres strony standardowej (innej niż ta w wersji AMP):

<link rel="canonical" href="https://www.example.com/url/to/regular-html-version.html" />

Strony AMP bez wersji standardowej (desktopowej) powinny wskazywać siebie w linkowaniu kanonicznym.

<link rel="canonical" href="https://www.example.com/url/to/amp-document.html" />

Jeżeli zastanawiasz się, czy twoja witryna lub dana podstrona spełnia warunki AMP, zawsze możesz ją sprawdzić korzystając z walidatora AMP. W sieci istnieje wiele takich narzędzi i można je z łatwością znaleźć korzystając z wyszukiwarki. Można także posłużyć się oficjalnym narzędziem udostępnionym na stronie projektu AMP.

amp-validator class="wp-image-533570"

Ponadto Google dodał nowy raport w Google Search Console, który można znaleźć w zakładce „Search Appearance”, służący do wykrywania błędów związanych z AMP.

Jak twierdzi Google:

Czy AMP pozwala na korzystanie z reklam?

Ktoś mógłby zapytać: co z reklamami? – Dowiedziałby się w odpowiedzi, że ponad 70 dostawców technologii reklamowej już zaczęło prace nad wdrożeniami dla nowej technologii. Ich celem jest zapewnienie implementacji właściwych rozwiązań marketingowych w technologii AMP, by wydawcy mogli korzystać z reklam bez zaniedbywania UX.

Oczywiście w dalszym ciągu istnieje pytanie dotyczące statystyk ruchu. Wiadomo, że firmy jak comScore, Adobe Analytics, parse.ly, CartBeat, Nielsen, ClickTale i Google Analytics zaczęły prace nad tą kwestią, dzięki czemu strony AMP będą miały pełny dostęp do właściwie zmierzonych danych dostarczanych w czasie rzeczywistym. Należy dodać też, że AMP pozwalają na monetyzację stron w technologii AMP zupełnie jak w przypadku monetyzacji standardowych stron HTML, więc możliwe jest utrzymanie części zysków z reklam.

Niestety przez ograniczenia, jakie narzuca AMP w zakresie rodzaju reklam, jakich wydawcy mogą użyć na swoich stronach, część z nich zauważyła spadki w dochodach uzyskiwanych tą drogą (przykładowo brak reklam typu pop-up). Ogólnie rzecz ujmując nowa technologia spotkała się z mieszanymi odczuciami w kwestii jej wykorzystania do zarabiania na reklamach. Być może jedynym słusznym krokiem na chwilę obecną jest zaczekanie na rozwój wydarzeń i dopiero wtedy podjęcie decyzji o wdrożeniu AMP.

Warto także wspomnieć, że pierwsze badania wykazały, iż reklamy na stronach AMP są częściej oglądane i angażują użytkowników bardziej, niż reklamy na normalnych stronach.

amp-reklama class="wp-image-533576"

Benefity AMP dla SEO

Google zarzeka się, że posiadanie stron w technologii AMP nie jest faworyzowane przez wyszukiwarkę w wynikach wyszukiwania. Pomimo tego, stwierdza także, że szybszy czas ładowania treści wpłynie na pozycję rankingową. Należy wspomnieć też, że istnieje tak zwana karuzela wiadomości Google, która posiada nadrzędny priorytet względem standardowych wyników wyszukiwania. Karuzele można znaleźć na samej górze strony wyników wyszukiwania mobilnego, przez co Twoja strona może bardzo szybko osiągnąć najwyższą pozycję dzięki zaimplementowaniu AMP przed konkurencją.

Lepsza widoczność materiałów z danej strony równa się większej szansie, że użytkownicy zapamiętają tę stronę oraz markę. Dzięki temu istnieje większe prawdopodobieństwo, że odwiedzą oni także standardową wersję serwisu ze stacjonarnego urządzenia, co może przełożyć się na wzrost statystyk ruchu.

Istnieje także aspekt dotyczący szybkiego ładowania treści, który jest ważnym czynnikiem w rankingu Google. Lepsze doświadczenie użytkownika wynikające z szybkiego ładowania stron www może prowadzić do obniżenia wartości współczynnika bounce rate. Idąc tym tropem, użytkownicy wraz z upływem czasu mogą zacząć utożsamiać strony w technologii AMP z lepszym doświadczeniem i faworyzować je względem standardowych stron, co może wpłynąć w przyszłości na preferencje użytkowania w kwestii wyszukiwania treści w Internecie. Patrząc na obecny trend warto zainwestować w technologię AMP już dziś.

Nie wszystko złoto, co się świeci.

Usprawniajac czas ładowania i widoczność stron, AMP może wydawać się niektórym technologią idealną. Czy jest jednak tak wspaniałe? Skupiając się na prędkości, AMP pośrednio wymusza na wydawcach oddanie części kontroli nad stroną oraz zmniejszenia jej funkcjonalności. Ponadto jest to kolejna wersja twojej witryny, więc jednym słowem - kolejna porcja pracy do wykonania.

Ach, czy wspomniałem, że AMP wymusza także korzystanie z pełnego HTTPS?

Kolejnym problemem może być fragmentacja internetu ze względu na kolejne wersje stron. Google promuje AMP, Facebook swoje Instant Articles, kto wie, co jeszcze nas czeka. Założeniem internetu było stworzenie jednej wersji strony dostępnej dla każdego z różnych urządzeń.

Już teraz internet jest nieco podzielony, z dodatkiem AMP fragmentacja będzie postępować. Google planuje wprowadzić wyniki stron AMP nie tylko na wspomnianej karuzeli na górze strony wyników wyszukiwania, ale także na wszystkie wyniki przy wyszukiwaniu mobilnym. Witryny bez wersji AMP zostaną więc zepchnięte w mroczne czeluści internetu.

Warto zaznaczyć także, że technologia AMP nadal jest bardzo ograniczona, przez co nie nadaje się do wykorzystania np. w eCommerce ze względu na brak wsparcia dla formularzy. Pomimo ciągłych poprawek i wspierania coraz większej ilości rozszerzeń, technologia ta niestety nadal ma ograniczone zastosowanie.

Przykłady stron AMP

Żeby lepiej zobrazować sobie jak strona AMP wygląda, poniżej znajdziesz kilka przykładów stron korzystających z tej technologii.

Wiemy już, że AMP bazuje na rozwiązaniach typu chmura. W chwili obecnej strony, które zostały zweryfikowane są przechowywane domyślnie przez pamięć podręczną Google’a, co niestety wiąże się z ograniczeniem kontroli wydawców nad treściami. Warto wspomnieć, że istnieje także możliwość korzystania z hostów zewnętrznych jeżeli zaistnieje taka potrzeba.

Co dalej z tym AMP?

AMP staje się coraz bardziej popularne i może sprawić, że sposób w jaki korzystamy z internetu w ruchu zmieni się na zawsze. Dzięki łatwej implementacji i wykorzystaniu rozwiązań typu chmura, wprowadza on nową jakość w konsumpcji treści mobilnych. Wraz z upływem czasu, użytkownicy z pewnością przyzwyczają się do natychmiastowego ładowania się stron, co może przełożyć się na zmianę ich preferencji w zakresie wyników z wyszukiwarek. Wydawcy, którzy nie wdrożyli jeszcze technologii AMP będą więc mieli coraz ciężej w walce o pozyskanie uwagi użytkowników.

Ze względu na swoją architekturę AMP preferuje treści statyczne, tak więc wszystkie rodzaje blogów, stron o charakterze informacyjnym czy portale kulinarne powinny być zainteresowane tą technologią. Dodać można fakt, że na chwilę obecną ponad 700 tysięcy domen opublikowało strony dostosowane pod AMP, a wiele z nich już zaczęło uzyskiwać zyski z reklam.

Pomimo tego, że AMP może sprawiać dylemat w kwestii swojej użyteczności i słuszności, a jego obecność jest na razie ograniczona tylko do paru rynków, jest to na pewno temat warty śledzenia i uwagi.

yasu class="wp-image-533577"
REKLAMA

Autorem tekstu jest Yasuhiro Kanzawa

Kilka słów od niego samego: Yasu helps with on-page optimization. His primary goal is to improve website’s position in search engine ranking by eliminating technical and structural bugs. He is also responsible for creating keyword research reports and constructing information architecture for a website. In his spare time he loves to cook, watch movies and taste local cuisine whenever he travels.

REKLAMA
Najnowsze
REKLAMA
REKLAMA
REKLAMA